CropTarget

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The CropTarget interface of the Screen Capture API provides a static method, fromElement(), which returns a CropTarget instance that can be used to crop a captured video track to the area in which a specified element is rendered.

Static methods

fromElement() Experimental: Returns a CropTarget instance that can be used to crop a captured video track to the area in which a specified element is rendered.

Examples

// Options for getDisplayMedia() const displayMediaOptions = { preferCurrentTab: true, }; // Create crop target from DOM element const demoElem = document.querySelector("#demo"); const cropTarget = await CropTarget.fromElement(demoElem); // Capture video stream from user's webcam and isolate video track const stream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions); const [track] = stream.getVideoTracks(); // Crop video track await track.cropTo(cropTarget); // Broadcast cropped stream in <video> element videoElem.srcObject = stream;

See Using the Element Capture and Region Capture APIs for in-context example code.