getUserMedia() Screen share with Audio and update tray

Question

When I use getUserMedia() for screen share, I don't get audio.

Things which I would like to do, but couldn't find any relevant stuff:

I want to capture both the screen and audio at the same time. How can I achieve this ?
When my screen share starts, the below tray appears. What it is called ? and how can I modify it (like its looks) ?

Screenshot:

score 2 · Answer 1 · answered Mar 13 '15 at 03:21

if you want one stream made of your screensharing for the video track and your webcam/mike audio for the audio track, you will need to make 2 calls to getusermedia with constraints set to screen and audio, respectively. then you will have to put the tracks in a common stream. Eventually, you can attach that stream to a peer connection. as peveuve said, you can also use two peer connections, but it comes with at least two problems:
- you will not have synchronization between audio and video (not so important for screensahring)
- you will need two connection => twice the number of ports => more chance to fail. That is more likely to be a problem.
this is a mandatory security feature from the browser (to prevent a rogue page to broadcast your screen without you knowing it). I do not know of a way to manipulate it at all

Is there a sample app that does makes 2 calls screen and audio? I am unable to add streams to generate a common stream. Can you please guide? — user2801184, Apr 19 '16 at 17:35

score 2 · Answer 2 · answered Nov 19 '16 at 06:51

its possible with npm-msr on Chrome.

getScreenId(function (error, sourceId, screen_constraints) {
  navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
  navigator.getUserMedia(screen_constraints, function (stream) {
    navigator.getUserMedia({audio: true}, function (audioStream) {
      stream.addTrack(audioStream.getAudioTracks()[0]);
      var mediaRecorder = new MediaStreamRecorder(stream);
      mediaRecorder.mimeType = 'video/mp4'
      mediaRecorder.stream = stream;

      document.querySelector('video').src = URL.createObjectURL(stream);
      var video =  document.getElementById('screen-video')
      if (video) {
        video.src = URL.createObjectURL(stream);
        video.width = 360;
        video.height = 300;
      }
    }, function (error) {
      alert(error);
    });
  }, function (error) {
    alert(error);
  });
});

score 0 · Answer 3 · edited May 23 '17 at 10:30

0

Check this answer: Is it possible broadcast audio with screensharing with WebRTC

You can't share both screen and audio in the same peer, you have to open 2 peers.

edited May 23 '17 at 10:30

Community

1
1

answered Mar 12 '15 at 14:39

peveuve

770
8
20

getUserMedia() Screen share with Audio and update tray

3 Answers3