CropTarget：fromElement() 静态方法
CropTarget 接口的 fromElement() 静态方法返回一个 CropTarget 实例，该实例可用于将捕获的视频轨道裁剪到指定元素渲染的区域。
由于 Region Capture API 是裁剪到当前浏览器标签页的区域，而不是捕获特定元素，因此在裁剪区域上方绘制的任何内容都会在捕获中显示。
语法
js
CropTarget.fromElement(element)
参数
element-
对您想用作裁剪目标的
Element的引用。元素要用作裁剪目标，必须满足以下条件：- 在屏幕上
- 可见，即，例如，未通过
display: none隐藏。
此外，如果正在限制的轨道有克隆（即，由
BrowserCaptureMediaStreamTrack.clone()创建）或者是从与用户当前标签页不同的标签页捕获的（例如，通过Window.postMessage()传递），则不会捕获该元素。
返回值
一个 Promise，它解析为一个 CropTarget 对象实例，然后可以将该实例传递给 BrowserMediaStreamTrack.cropTo()，以便将轨道中捕获的视频裁剪到仅指定 DOM 元素渲染的区域。
CropTarget 对象是可序列化的。它们可以使用 Window.postMessage() 等机制传递到另一个文档。
示例
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。
规范
| 规范 |
|---|
| 区域捕获 # dom-croptarget-fromelement |
浏览器兼容性
加载中…