BrowserCaptureMediaStreamTrack: cropTo() 方法
BrowserCaptureMediaStreamTrack 接口的 cropTo() 方法将自捕获流裁剪到指定 DOM 元素渲染的区域。
语法
js
cropTo(cropTarget)
参数
cropTarget-
一个
CropTarget实例，代表流应被裁剪到的元素渲染区域，或者null/undefined，在这种情况下，将从轨道中移除先前设置的任何裁剪。
返回值
Promise 会在以下情况下被拒绝：
- 轨道
kind不是"video"，或者其readyState不是"live"。 - 裁剪目标元素不再存在。
- 正在裁剪的轨道不是从用户屏幕捕获的轨道。
cropTarget不是CropTarget实例、null或undefined。cropTarget是在与当前捕获的标签页不同的标签页中创建的。
注意： 在 Chromium 中，如果一个轨道有副本，cropTo() 将被拒绝（请参阅 Chrome issue 41482026）。
示例
基本裁剪示例
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。
停止裁剪
您可以通过在一个先前已裁剪的轨道上调用 cropTo() 方法，并将其参数设置为 null 来停止裁剪。
js
// Stop cropping
await track.cropTo(null);
规范
| 规范 |
|---|
| 区域捕获 # dom-browsercapturemediastreamtrack-cropto |
浏览器兼容性
加载中…