Opentok Screen Sharing with Audio

Question

I try to create a Screen Sharing application with the opentok JS client that shares the publishers audio as well.

Screen Sharing works fine. But the audio is never shared.

Now, I noticed a warning in the console (Firefox) saying Invalid audioSource passed to Publisher - when using screen sharing no audioSource may be used. Does that mean it is not possible at all, or that the audio source is invalid?

Answer 1

With v2.13.0 it is now possible to pass a MediaStreamTrack as a custom audioSource and videoSource to initPublisher. This means you are able to add your microphone audio to the screen sharing stream. This will only work in Chrome or Firefox. IE does not support MediaStreamTrack's and Safari does not currently support screensharing.

const publish = Promise.all([
  OT.getUserMedia({
    videoSource: 'screen'
  }),
  OT.getUserMedia({
    videoSource: null
  })
])
.then(([screenStream, micStream]) => {
  return OT.initPublisher(null, {
    videoSource: screenStream.getVideoTracks()[0],
    audioSource: micStream.getAudioTracks()[0]
  });
});

Here is a sample of it all working https://output.jsbin.com/wozuhuc This sample will only work in Firefox because Chrome needs an extension.

Answer 2

I contacted the tokbox support and they confirmed, that the audio has to be published in an additional stream.

Answer 3

I had a go at making this work in Chrome, which is possible by using getDisplayMedia({video: true, audio: true}), which now shows a tickbox to allow the user to share device audio:

You can then use this to create a normal publisher which uses the video and audio streams from this call like so:

 let prom = navigator.mediaDevices.getDisplayMedia({ video:true, audio: true });

    prom.then(function(result) {
        console.log("Collected permission. Going to start publishing.");
        desktopStream = result;
        var audioStream = desktopStream.getAudioTracks()[0];
        var videoStream = desktopStream.getVideoTracks()[0];

        console.log(audioStream);

        // Screen sharing is available. Publish the screen.
        screenPublisher = OT.initPublisher('ownScreen',
            {
                videoSource: videoStream,
                audioSource: audioStream,
                name: 'Sharing Screen',
                maxResolution: { width: 1920, height: 1920 },
                mirror: false,
                fitMode: "contain",
            },
            function(error) {
                if (error) {
                    console.log(error);
                    // Look at error.message to see what went wrong.
                } else {
                    session.publish(screenPublisher, function(error) {
                        if (error) {
                            handleError();
                        }

                        $('#shareScreen').fadeOut(150, function(){
                            $('#stopShare').fadeIn(150);
                        });

                        $('#stopShare').addClass('blob blue');

                    });
                }
            }
        );

You can also add a name to the screen share publisher to allow subscribers to distinguish between a regular video publisher and this new custom screen share publisher.