Limited availability
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The cropTo()
method of the BrowserCaptureMediaStreamTrack
interface crops a self-capture stream to the area in which a specified DOM element is rendered.
cropTarget
A CropTarget
instance representing the element rendering area the stream should be cropped to, or null
/undefined
, in which case any previously-set cropping is removed from the track.
A Promise
that resolves to undefined
.
The promise will reject if:
kind
is not "video"
, or its readyState
is not "live"
.cropTarget
is not a CropTarget
instance, null
, or undefined
.cropTarget
was created in a tab other than the one being captured.Note: In Chromium, if a track has clones, cropTo()
will reject (see Chrome issue 41482026).
// 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.
Stopping the croppingYou can stop the cropping by making a call to cropTo()
on a previously-cropped track, passing an argument of null
to it:
// Stop cropping
await track.cropTo(null);
Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4