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()-
Returns a
CropTargetinstance that can be used to crop a captured video track to the area in which a specified element is rendered.
Examples
js
// 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.
Specifications
| Specification |
|---|
| Region Capture # crop-target |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
CropTarget
|
|
|
|
|
|
|
|
|
|
|
|
|
fromElement() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.