14

is it possible broadcast audio with screensharing with WebRTC? Simple calling getUserMedia with audio: true fails by permission denied error. Is there any workeround which could be used to broadcast audio also? Will be audio implemented beside screensharing?

Thanks.

Ivo Pavlik
  • 267
  • 1
  • 3
  • 17

4 Answers4

19

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);
Muaz Khan
  • 7,138
  • 9
  • 41
  • 77
  • Is there any update/progress on using audio along with chromeMediaSource:screen concurrently in a single peer connection? – ChrisM Feb 26 '14 at 12:57
  • Audio is not supported yet with these three: chromeMediaSource:screen, chromeMediaSource:tab, and chromeMediaSource:desktop. – Muaz Khan Feb 27 '14 at 06:54
  • But it is possible to create two parallel peer connections, one for screen sharing and one with audio/video? – Ran Halprin May 28 '14 at 12:38
  • @Neko, you can create up to 256 parallel peer connections and it doesn't matter what kind of stream you're sharing using those peer connection. The answer is simply yes: 5 peers can share 5 application's screen, 10 peers can share only audio; and remaining can share audio+video. This process is usually known as "mesh networking model" where multiple peers are initiated and all peers are interconnected. – Muaz Khan May 28 '14 at 17:19
  • Can anyone please answer this question http://stackoverflow.com/questions/35444604/desktop-audio-capture-not-working-for-chrome-app – user2801184 Apr 20 '16 at 20:21
  • Thanks for the informative answer. FYI you are also capable of doing this with two video streams (webcam+desktop) and microphone audio. Basically need to split the video tracks at the receiving end as stated here https://groups.google.com/forum/#!topic/discuss-webrtc/8yIc0PEH4Gk – McP Apr 19 '17 at 20:26
  • @MuazKhan is it possible to share the audio of an application in `chrome.desktopCapture.chooseDesktopMedia` ? currently share audio is coming only for whole desktop and tab, Not for application screen. Any ideas? – Sasi Varunan Oct 18 '18 at 06:55
  • @MuazKhan Does this support screen + system audio instead of a microphone? – leetom Jan 22 '19 at 16:57
  • @leetom Screen+Speakers is supported by two chrome-extension APIs: 1) `desktoPCapture`, and 2) `tabCapture`. On the other hand, `getDisplayMedia` do no t support speakers capturing YET. i.e. Using getDisplayMedia you can merely capture the screen; not system's audio. I'll recommend to use desktopCapture PAI temporarily until/if getDisplayMedia lands with audio support. – Muaz Khan Jan 23 '19 at 02:01
  • @MuazKhan Screen sharing is possible with only Audio stream is going on ? – Arjun Apr 23 '20 at 06:03
12

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.

enter image description here

Community
  • 1
  • 1
diasks2
  • 2,033
  • 2
  • 36
  • 61
  • If you have a stream with 2 or more audio tracks, it will stream only the first one to peers. If you want both you need to mix them before sending through WebRTC. – diasks2 May 20 '20 at 02:55
3

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.

jesup
  • 6,765
  • 27
  • 32
  • Creating a webRTC screensharing and using getUserMedia at the same time creates strange results in which some of the audio just gets cut away because audio recording does not seem to work properly. So I'm about to give up on implementing a getUserMedia-based audio recorder which records at the same time as screen recording takes place. – oliverbachmann Dec 27 '15 at 01:47
  • I'll give that a try with MediaRecorder. You may want to file a bug in bugzilla in Core::Audio/Video Recording and cc :mreavy. It *should* work – jesup Dec 30 '15 at 16:36
3

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);
  });
});
Bulut Ağırman
  • 59
  • 3