CODEWITHSUNDEEP
opentoktokbox
Rico Leuthold
Rico Leuthold

Reputation: 1995

Opentok Screen Sharing with Audio

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?

Upvotes: 6

Views: 3816

Answers (4)

Chuck
Chuck

Reputation: 23

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:

Chrome share screen and 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.

Upvotes: 1

Adam Ullman
Adam Ullman

Reputation: 1537

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.

Upvotes: 14

Rico Leuthold
Rico Leuthold

Reputation: 1995

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

Upvotes: 1

Francisco Javier Cano Sandoval
Francisco Javier Cano Sandoval

Reputation: 294

If you create a subscriber, and connect it to the session, it will receive audio and video from all publishers. As far as I know, there is no audio in screen sharing, that's why you cannot publish it. That should solve it. I hope this helps.

Upvotes: 0

Related Questions