Screen Capture API

Screen capture is a powerful feature often used in applications like screen recording tools, live streaming platforms and video conferencing apps. Javascript offers modern APIs, such as the getDisplayMedia() method to capture the contents of your screen. 

Screen capture APIs, available through the navigator.mediaDevices object, provide web applications with access to the user’s screen, window or browser tab. They return a MediaStream object, which can be displayed in a <video> tag element. 

As we said before, the key method is getDisplayMedia(). This method is designed specifically for capturing screen content: it requires explicit user permission, ensuring that privacy is always respected. 

There is also another method called getUserMedia(), used specifically for webcam and microphone access.

How to use Screen Capture APIs

In this function:

• videoElem is a <video> tag previously created
• The method getDisplayMedia() is called to obtain the MediaStream object
• Finally, we can set the property srcObject of the video tag to the obtained stream
• The displayMediaOptions is an object of configuration to define some requirements

Configuration option

As we saw in the previous paragraph, the getDisplayMedia() accepts a configuration object that allows to specify audio and video requirements. 

For instance:

• Video: it is possible to specify if obtaining the video or not. It can be a Boolean or an object to define parameters, such as the resolution or the frame rate.
• Audio: it is possible to define if you obtain the audio or not. It can be a Boolean as the video or an object to define parameters such as echo cancellation or noise suppression.

Here’s an example of a simple configuration object (gdmOptions) and a more complex one:

How to use Screen capture APIs for User’s devices

The other method offered by these APIs is getUserMedia(): with this method, it is possible to have access to the user’s webcam.

The code is like the other: we get the Stream by this method, we set the property of the video tag element, and we can obtain the video and audio in the same way.

How to use Screen capture APIs to screen recording

The getDisplayMedia() method allows users to capture and record their screens. The example code below demonstrates how users can select a specific window or tab to share. While sharing is active, all actions performed within the selected tab or window are recorded and displayed in a <video> element. Once the user stops sharing, the recorded content can be reviewed directly within the browser.

This application of screenshot API is particularly beneficial, as it allows users to create simple screen recording in their browser without any third-party application. The captured content can then be used in various contexts, such as tutorials, presentations, or quick demonstrations.

In addition, the functionality can be integrated into more complete web applications in many different types of industries. For educational purposes, for example, it can enrich e-learning programs by allowing professors to register lectures or performances. For customer service, it can be used to allow users to troubleshoot through user sessions. For cooperation equipment, it can be used to protect the workflow and allow sharing for later reference.

By combining getDisplayMedia() with other APIs, such as MediaRecorder, developers can enhance the recording experience by providing additional features like saving recordings to files, uploading them to cloud storage, or editing them directly in the browser.

How to use Screen Capture APIs to take a screenshot

One more interesting usage of these APIs would be to get screenshots of the user screen. This feature works similarly to the screen recording feature. For instance, the user can choose to share a certain tab, window, or screen, and the shared content will be streamed in an element.

By this time, the video stream is drawn into an element in the browser, allowing us to get an image snapshot that can represent a specific frame of the shared screen. Once the image is captured, the stream can be stopped to prevent further recording.

This approach is particularly powerful because the <canvas> element provides a wide range of drawing and editing tools. Developers can use its properties to manipulate the screenshot, overlay annotations, add graphics, or personalize the image according to the application’s requirements. For instance, users could add text, highlight specific areas, or apply filters directly on the captured screenshot.

This is the portion of code to take a screenshot:

Security and Privacy

Screen Capture APIs are designed with security constraints: users must explicitly grant permission to share their screen and audio. The browser will show a native interface to allow the user to confirm which part to share of the screen. Web applications cannot capture the screen without the user’s consent. Furthermore, the API can be used only in secure connection (HTTPS). 

For privacy reasons, the API doesn’t allow developers to bypass these restrictions.

Error Management

When we use the Screen Capture APIs some errors may occur. For example, the user may not grant the permission to the web application to obtain the video or audio. 

In this case, the API will throw an error, and we must deal with it in the correct way. 

An example of error handling can be seen in the code above. The API will generate an error, and we will check its name property. If the error name corresponds to NotAllowedError, we will notify the user that they need to grant permission for webcam sharing in order to use the feature. If a different error is generated, we will display a generic error message instead.

Limits

These APIs have some limits too:

• Performance: the sharing screen can be heavy in terms of used resources, especially for video with high resolution.
• User interaction: the user must always grant the authorization for the operation and this introduces another mandatory action.
• Browser compatibility: not all browsers support these APIs in the same way: it’s thus important to check the documentation beforehand. Moreover, mobile devices don’t support the getDisplayMedia() method.

Conclusions

The Screen Capture APIs are an important innovation for the development of modern web applications. Thanks to their simplicity and power, it’s possible to create advanced tools for the sharing and recording screen. However, it’s essential to understand the limit and respect the privacy rules of the users.

Github Repo

Demo

---

Main Author: Niccolò Naso, Front-end Developer @ Bitrock