Sharing Screens with the New Javascript Screen Capture API

📣 Sponsor

Post Covid-19, the world is becoming increasingly more and more remotely based. Although common before, the phrase "let me share my screen.." has become standard vernacular in the business world. As such, there is an increasing need for services like screen sharing within the web platform.

To solve this, the new Javascript Screen Capture API lets users give permission to a website to capture their screen. After permission is granted, we can use that data in web applications. An example might be, that we send this data live to another user as part of a screen sharing application.

How does it work?

A straightforward example of how this works is shown below.

let captureVideo = async function() { try { let getScreenData = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }); videoElement.srcObject = getScreenData; } catch (e) { console.log(e); } }

We then have some HTML that looks like this. Note, it's important your video element is autoplaying or set to play:

<video id="my-video-stream" autoplay></video>

The getDisplayMedia function only takes two options, and that is whether it should access video or audio, or both. We use await here, because we need to wait for the user to us give access to their screen.

After we give access, all data is accessible via the getScreenData variable we defined. The type of data this returns is a MediaStream which is a bespoke type used for web based media streaming.


To make this come to life, I've used the code above to make a simple demo which starts when you click the button below. Note: if this doesn't work, your browser may not be supported! This currently works on most desktop browsers, and very few mobile browsers. Scroll down for the support table for more information.

Video will play here


As with most new specifications, this is not a functionality supported by all browsers, although support may be greater than you think. Essentially all desktop browsers support this, which typically is the device we share screens on. See below for browsers which currently support this functionality.

Browser Support Table for Javascript Screen Capture API
Last Updated 1627467874957

More Tips and Tricks for Javascript

Subscribe for Weekly Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email