Is it possible broadcast audio with screensharing with WebRTC

Question

is it possible broadcast audio with screensharing with WebRTC? Simple calling getUserMedia with audio: true fails by permission denied error. Is there

Answer 1

yes you can record audio and screen record on chrome with two requests.

 getScreenId(function (error, sourceId, screen_constraints) {

capture screen

  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);
  });
});

Answer 2

Refer this demo: Share screen and audio/video from single peer connection!

Multiple streams are captured and attached to a single peer connection. AFAIK, audio alongwith chromeMediaSource:screen is "still" not permitted.

---

Updated at April 21, 2016

Now you can capture audio+screen using single getUserMedia request both on Firefox and Chrome.

However Chrome merely supports audio+tab i.e. you can NOT capture full-screen along with audio.

Audio+Tab means any chrome tab along with microphone.

---

Updated at Jan 09, 2017

You can capture both audio and screen streams by making two parallel (UNIQUE) getUserMedia requests.

Now you can use addTrack method to add audio tracks into screen stream:

var audioStream = captureUsingGetUserMedia();
var screenStream = captureUsingGetUserMedia();

var audioTrack = audioStream.getAudioTracks()[0];

// add audio tracks into screen stream
screenStream.addTrack( audioTrack );

Now screenStream has both audio and video tracks.

nativeRTCPeerConnection.addStream( screenStream );
nativeRTCPeerConnection.createOffer(success, failure, options);

Answer 3

As of May 2020

To share the audio track of the screen share you can use getDisplayMedia instead of getUserMedia. Docs.

navigator.mediaDevices.getDisplayMedia({audio: true, video: true})

This is currently only supported in Chrome / Edge and it is only supported when using the "Chrome Tab" sharing option. You'll see a checkmark for Share audio in the dialog box.

Answer 4

In Firefox, you can use getUserMedia to grab a screenshare/etc and mic audio in the same request, and can attach it to a PeerConnection. You can combine it with other streams -- multiple audio or video tracks in a single PeerConnection in Firefox requires Firefox 38 or later. Currently 38 is Developer Edition (formerly termed Aurora). 38 should go to release in around 9 weeks or so.