keyboard_backspace wifi_off

Element Capture API

Screen capturing is not (yet) supported on your device

Element Capture is not (yet) supported on your device

The Element Capture API enables screen capturing web apps to record specific HTML elements.

It works by restricting the video stream resulting from a call to navigator.mediaDevices.getDisplayMedia() to a chosen HTML element.

Demo

Click the "Start camera" button below to start your webcam. The four previews will show the original camera preview and the camera stream in grayscale, sepia and with inverted colors. Click one of the previews to capture. You will see that when you hover the mouse over the captured camera preview, the mouse pointer will also be visible in the video stream of the captured element.

You can click the video stream of the captured element to take a screenshot of it.

Camera previews

Captured element

Screenshot

const restrictToTarget = async ({target}) => { // the current tab is already shared so the capturePreview <video> element // already has a stream that we can restrict to the clicked HTML element if (capturePreview.srcObject && capturePreview.srcObject.getVideoTracks().length > 0 && capturePreview.srcObject.getVideoTracks()[0].readyState === "live") { // get the HTML element we want to restrict the video stream to const restrictionTarget = await RestrictionTarget.fromElement( target ); const [videoTrack] = capturePreview.srcObject.getVideoTracks(); // restrict the video stream to the clicked HTML element await videoTrack.restrictTo(restrictionTarget); } else { // start capturing the current tab captureStream = await navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true, }); const [videoTrack] = captureStream.getVideoTracks(); // get the HTML element we want to restrict the video stream to const restrictionTarget = await RestrictionTarget.fromElement( target ); // restrict the video stream to the clicked HTML element await videoTrack.restrictTo(restrictionTarget); // set the video stream of the captured tab to the capturePreview <video> element capturePreview.srcObject = captureStream; } }; cameraPreview.onclick = restrictToTarget; grayscaleCanvas.onclick = restrictToTarget; invertedCanvas.onclick = restrictToTarget; sepiaCanvas.onclick = restrictToTarget;

Documentation

Element Capture on Chrome Developers.

Browser support

Element Capture is supported in Chrome and Edge 121+ on Desktop as an Origin Trial

What PWA Can Do Today A showcase of what is possible with Progressive Web Apps today