ContextQMD
Back to Content

CropTarget

files/en-us/web/api/croptarget/index.md

latest1.6 KB
Original Source

{{APIRef("Screen Capture API")}}{{SeeCompatTable}}

The CropTarget interface of the {{domxref("Screen Capture API", "Screen Capture API", "", "nocode")}} provides a static method, {{domxref("CropTarget.fromElement_static", "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.

{{InheritanceDiagram}}

Static methods

  • {{domxref("CropTarget.fromElement_static", "fromElement()")}} {{Experimental_Inline}}
    • : 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

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

{{Specifications}}

Browser compatibility

{{Compat}}

See also