Introduction To Screen Capture API

These web APIs are consumed by almost every web application; for instance, the DOM API is used to interact with the DOM elements on the screen. A web API is also available for the user to capture their screen. Let’s briefly look at it.

Screen Capture API

You can use this API to add a recording feature to your website. The client can record their screen or the portion of their screen as a media stream. The stream can then be shared with anyone. The Screen Capture API extends the two other web APIs, i.e., Media Capture API and Streams API.

The API is limited to desktop web browsers at the time and does not support mobile browsers.

Usage

The API provides a single method that asks the user to select the screen they want to capture as a media stream. The method is asynchronous, so you can either call it by wrapping it in an asynchronous function or use then() to handle the promise and response.

The API is simple to use. You can create a simple HTML boilerplate, and inside it, you can write down a simple function to call the Screen Capture API.

js
Copy
async function recordScreen() {
	try {
		let mediaStream = await navigator.mediaDevices.getDisplayMedia({
			video: true
		});
		videoElement.srcObject = mediaStream;
		return mediaStream;
	} catch (e) {
		console.log('Unable to acquire screen capture: ' + e);
	}
}

It will open a popup window where all your tabs will be listed. You will have options to share your whole screen, a window, or a tab.