How-to Share Your Screen with Audio in a WebRTC Video Call

If you are planning a live event, webinar, or video conference application you may want to enable your users to share more than a smile and some kind words. With Dolby.io, you can share the screen from your computer as a media stream that includes both audio and video. This can be helpful for playback of videos, remote content review with audio, and similar purpose-built applications that extend your workflow or captivate your audience. Since our solution is sent over WebRTC, there is no need for end-users to install a plugin or browser extension to share or receive a shared screen.

We’re focusing on bi-directional communications in this code sample. If you are looking for one-directional low-latency real-time streaming you may find the post on How to Screen Capture for Streaming helpful.

Getting Started with Screen Sharing

If you follow the Web SDK Getting Started Guide you can get a basic video call up and running. That project is kept pretty basic, sticking with static HTML and pulling in the SDK from a CDN so that you can learn the concepts and then easily adapt to whatever framework or build tools you want to use in your own projects later.

Start by cloning the final source-code and running a basic HTTP server.

git clone https://github.com/dolbyio-samples/comms-sdk-web-getting-started.git
cd comms-sdk-web-getting-started/video-calls/final
npx live-server

Edit the final/index.html in your favorite IDE to add the user interface elements for toggling screen share on and off. This example uses a radio button, but in your final application you might use different widgets that will need to maintain state. The control element we’re using is a switch from Bootstrap.

         <button type="button" class="btn btn-dark" id="btn-leave">Leave</button>
+
+        <div class="container px-4 py-4 mt-3">
+            <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" role="switch" id="btn-share">
+                <label class="form-check-label" for="btn-share">Share Screen</label>
+            </div>
+        </div>
     </div>

You will also want to provide a container where the video stream from the screen share will be placed. This can be an empty div with whatever formatting or layout is appropriate for your own applications.

        <div id="screenshare-view" class="row justify-content-around mt-3">
        </div>

You should be able to join the conference just as you did in the Getting Started tutorials, but now you have a “Share Screen” control. These can be placed anywhere on the page to suit your needs.

The radio button doesn’t do anything yet so we’ll wire that up next.

Choose What to Share

We need to add an onclick handler for the switch. Similar to the “Join” and “Leave” buttons, this handler will check to make sure we’ve joined a conference and then when the toggle is active will call the startScreenShare function. The function takes some optional parameters, in this case we are explicitly enabling the sharing of audio. This is the default behavior for any browsers that support sharing audio so isn’t really necessary. Unfortunately, there is not yet 100% browser coverage with the underlying WebRTC mechanism, so by enabling audio we can get a helpful message when it isn’t supported. Check the documentation for limitations if this is a concern for your use cases.

This handler can be put someplace in your main() function, such as immediately after handleConferenceFlow().

        document.getElementById("btn-share").onclick = async (event) => {
            if (VoxeetSDK.conference.current) {
                if (event.target.checked) {
                    try {
                        await VoxeetSDK.conference.startScreenShare({'audio': true});
                    } catch (err) {
                        shareMessage(`Error when sharing screen: ${err}`);
                    }
                } else {
                    try {
                        await VoxeetSDK.conference.stopScreenShare();
                    } catch (err) {
                        shareMessage(`Error when stopping screen share: ${err}`);
                    }
                }
            } else {
                // provide user with feedback and/or maintain state of toggle if not in a conference
            }
        }

When you join a conference and toggle the button now, you’ll be prompted by your browser on whether or not to allow it access to your screen. If you accept that security question for sharing permissions and then what happens next will vary a little from browser to browser.

With Chrome for example, you will be prompted to choose what you’d like to share. You can choose a specific Chrome Tab, an open Window, or the Entire Screen. Note how at the bottom there is a “Share tab audio” checkbox. This allows the audio being played by the Chrome tab to be shared across the screen share so everybody remote in the video call can hear it.

The operating system and browser may present some security limitations. For example, if you are on MacOS and attempt to share your entire screen, you’ll notice that sharing the audio is not there.

If you are looking at the console during development you’ll see a message in those scenarios.

⚠️ Screen-share with audio is not supported on this browser.

This happens because sharing device audio over WebRTC is prohibited by the browser and underlying operating system. If this is an important feature for your application, the FilePresentationService is an alternative solution for sharing user’s content.

Display the ScreenShare Media Stream

Once we’ve called startScreenShare() the event streamAdded will occur for each client. This is the same event that occurs when a camera shares a video stream as mentioned in the Share Video section of the Getting Started guide. We need to disambiguate the event by checking the type of the stream. If the type is Camera or ScreenShare they may both be coming from the same participant but frequently will be handled in your user interface independently.

This requires an update to the handleConferenceFlow() function.

                 if (stream.type === "Camera") {
                     shareVideo(participant, stream);
+                } else if (stream.type === "ScreenShare") {
+                    shareScreen(participant, stream);
                 }
             });

Similar to the shareVideo() function, the shareScreen() method should check if a screen is already being shared. If not, it can create a <video/> element and attach the media stream to it. In order for audio to be shared, it is important to also make sure the participant is not muted.

        const shareScreen = (participant, stream) => {
            let screenShareNode = document.getElementById(`screenshare-${participant.id}`);
            if (screenShareNode) {
                shareMessage("Screen is already being shared in this session.");
            } else {

                // Create a video node for the screen share stream
                screenShareNode = document.createElement("video");
                screenShareNode.id = `screenshare-${participant.id}`;
                screenShareNode.autoplay = "autoplay";
                navigator.attachMediaStream(screenShareNode, stream);

                // Add the video node to the user interface

                const container = document.getElementById("screenshare-view");
                container.appendChild(screenShareNode);

                // Make sure the participant is not muted to share audio

                VoxeetSDK.conference.mute(participant, false);
            }
        }

Finally, when the user wants to stop sharing, the stopScreenShare() can be called and the streamRemoved event will need to be handled by each client. If the type is again ScreenShare you would remove that video node without removing the main user’s camera video stream.

             VoxeetSDK.conference.on("streamRemoved", (participant, stream) => {
                 console.log(`Stream Removed for ${participant.info.name}`);
+
+                if (stream.type === "ScreenShare") {
+                    const screenShareNode = document.getElementById(`screenshare-${participant.id}`);
+                    if (screenShareNode) {
+                        screenShareNode.parentNode.removeChild(screenShareNode);
+                    }
+
+                    // Only remove the screenshare
+                    return;
+                }
+
                 const videoNode = document.getElementById(`video-${participant.id}`);

The end user can choose to interrupt the screen share by blocking the browser, changing permissions, or simply closing the shared window. When the stream is removed, you may also want to update the state of your switch or other control elements. This will vary from framework to framework (react, vue, angular, etc.).

Sharing What We’ve Built

Screen sharing is an important feature to many different types of applications. Whether for online collaboration, remote content review, or sharing a presentation during a live event it is likely an important feature that your end-users will expect from the applications you build.

For a full explanation of the source code, check out the Getting Started Guide for explanations of how it all works together. In case of any problems, check out the Screen Share Audio troubleshooting tips or reach out and contact our team. If you are looking to start from a fully flushed out implementation with complete react components that include screen sharing and many other features in a polished web application, look for the dolbyio-samples/comms-app-react-videocall sample project on GitHub.