CropTarget

Limited availability

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

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

TheCropTarget interface of theScreen Capture API provides a static method,fromElement(), which returns aCropTarget 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 aCropTarget 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 elementconst demoElem = document.querySelector("#demo");const cropTarget = await CropTarget.fromElement(demoElem);// Capture video stream from user's webcam and isolate video trackconst stream =  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);const [track] = stream.getVideoTracks();// Crop video trackawait track.cropTo(cropTarget);// Broadcast cropped stream in <video> elementvideoElem.srcObject = stream;

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