Streaming

How to Screen Capture for Streaming in JavaScript

SUMMARY

Learn how to screen share in a browser with JavaScript and stream the shared screen to an audience with WebRTC in just a few lines of code.


Screen capture, or screen sharing, is the process of capturing what a user sees on their computer screen as video, which can then be recorded or streamed to other people interested in viewing it. The screen capture process is most commonly associated with online video conferencing where a presenter shares their screen for other viewers to see. 

In this guide, we’ll be exploring how to enable screen capture in browser with JavaScript, and how you can then stream the captured screen out to an audience with Dolby.io Streaming. If you are interested in conferencing solutions with multiple participants sharing their screen, check out this guide here which walks through building a conferencing app with screen share functionality.

How to Screen Capture with JavaScript?

Screen capturing with JavaScript is straightforward thanks screen capture support with the getDisplayMedia method provided by the MediaDevices interface. The getDisplayMedia method is supported on both Windows and Mac devices for all major browsers, however, it isn’t currently available for mobile devices. For a full list of support for getDisplayMedia see this table here.

To get started using getDisplayMedia we first need to define our display media options:

const displayMediaOptions = {
    video: {
        displaySurface: "window",
    },
    audio: false,
};

In this case, we are not capturing the display audio just the display window as a video feed. There are a number of different settings to adjust with the full list available here

With our options defined, we can use the getDisplayMedia method to capture our screen:

const screenCapture = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);

With that, we have now begun to successfully capture our screen. When this function is called users will receive a permissions prompt from the browser which they will have to approve for the device to begin capturing content.

How to Screen Share in a WebRTC Live Stream?

Now that we are successfully capturing the device’s display how do we stream it out? To deliver a WebRTC stream we require a WebRTC CDN. Depending on how many people you’d like to view the stream we may require a CDN that supports WebRTC scaling. For this example we’ll use Dolby.io WebRTC streaming since it is simple to implement, has a global delay of under 500ms, and can scale to thousands of viewers. 

You can create a free Dolby.io Streaming account by signing up here.

With our Dolby.io account created we can continue with streaming our screen capture. Dolby.io streaming requires us to define broadcast options, which include settings like simulcast, recording, multiview, and our media stream object. In this example, we can set our media stream object to our screenCapture object created in part 1.

const broadcastOptions = {
            mediaStream: screenCapture,
        };

Since we are using the Dolby.io Streaming platform we will need to grab our Dolby.io API keys from the dashboard. In this case, we require a Stream name, and a Publishing token which you can find by creating a token, or clicking on a token you’ve already created, and switching to the API tab.

The dolby.io streaming dashboard with the publish api info section highlighted in red to indicate the importance of stream name and publishing token in connecting up to the dolby.io servers.

Once you have grabbed your API credentials, import the Dolby.io Streaming (Formerly Millicast) JavaScript SDK from jsDeliver into your HTML file.

<script src="https://cdn.jsdelivr.net/npm/@millicast/sdk/dist/millicast.umd.min.js"></script>

By importing this package you can now use the Dolby.io Streaming JavaScript SDK to stream out your stream capture.

From the SDK we can call the getPublisher function to create a token generator with our API credentials:

const tokenGenerator = () =>
    window.millicast.Director.getPublisher({
        token: "YOUR Publishing Token",
        streamName: "YOUR Stream Name",
    });
  
const publisher = new window.millicast.Publish("Stream Name", tokenGenerator);

Using the token generator we can create a publish object which we’ll use to stream out our display content.

const publisher = new window.millicast.Publish("Stream Name", tokenGenerator);

Finally, with our publisher object created, we can start streaming by calling the connect function.

try {
            await publisher.connect(broadcastOptions);
        } catch (e) {
            console.error("Connection failed, handle error", e);
        }

If the app successfully connects your screen share will be live which you can check using your stream name and account ID from your dashboard.

https://viewer.millicast.com?streamId=<YOUR_ACCOUNT_ID>/<YOUR_STREAM_NAME>
Image of an in-browser stream viewer playing a dolby.io youtube video. The video highlights how many people are watching the stream, whether the stream is live, and the player controls along the bottom. The content of the shared screen is irrelevant.
An example of a user live streaming a shared screen to a viewer’s browser with the latest Dolby.io YouTube video playing. Note the number of viewers in the top left, the LIVE tag in the top right, and the viewer controls along the bottom.

Want to Build More WebRTC Streaming Solutions?

Screen sharing is just the tip of the iceberg for features you can add to your streaming app. Explore the Dolby.io Documentation or Blog to learn more about all the different features you can add to your streaming experiences such as Multiviewsimulcast, and in-app chat.

Feedback or Questions? Reach out to the team on TwitterLinkedIn, or via our support desk

Leave a Comment

Braden Riggs

Developer Advocate

Born and Raised in Australia and now Living in San Francisco, Braden joined the Developer Relations team in 2021 after graduating from UC San Diego with a degree in data science. Braden loves to create apps and content for the Dolby.io Blog, YouTube channel, and the samples GitHub. When not working you can find Braden surfing, hiking, or exploring San Francisco.

Get Started

Drive real-time interactions and engagement with sub-second latency

We are more than just a streaming solutions provider; we are a technology partner helping you build a streaming ecosystem that meets your goals. Get started for free and as you grow, we offer aggressive volume discounts protecting your margins.

Developer Resources

Explore learning paths and helpful resources as you begin development with Dolby.io.

Copy link
Powered by Social Snap