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.
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;