CropTarget

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

实验性: 这是一项实验性技术
在生产中使用此技术之前,请仔细检查浏览器兼容性表格

CropTarget 接口是 屏幕捕获 API 的一部分,提供了一个静态方法 fromElement(),该方法返回一个 CropTarget 实例,可用于将捕获的视频轨道裁剪到指定元素渲染的区域。

静态方法

fromElement() 实验性

返回一个 CropTarget 实例,可用于将捕获的视频轨道裁剪到指定元素渲染的区域。

示例

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;

有关上下文中的示例代码,请参阅 使用元素捕获和区域捕获 API

规范

规范
区域捕获
# crop-target

浏览器兼容性

另见