BrowserCaptureMediaStreamTrack:restrictTo() 方法
BrowserCaptureMediaStreamTrack
接口的 restrictTo()
方法将自捕获流限制到特定的 DOM 元素(及其后代)。
语法
js
restrictTo(restrictionTarget)
参数
restrictionTarget
-
一个
RestrictionTarget
实例,表示要将流限制到的元素,或者null
/undefined
,在这种情况下,将从轨道中移除任何先前设置的限制。
返回值
Promise 将会拒绝,如果
- 轨道
kind
不是"video"
,或者其readyState
不是"live"
。 - 限制目标元素已不存在。
- 正在限制的轨道不是从用户屏幕捕获的轨道。
restrictionTarget
不是RestrictionTarget
实例、null
或undefined
。restrictionTarget
是在捕获标签页以外的标签页中创建的。
注意: 在 Chromium 中,如果一个轨道有克隆,restrictTo()
将会拒绝(请参阅 Chrome issue 41482026)。
示例
基本限制示例
js
// Options for getDisplayMedia()
const displayMediaOptions = {
preferCurrentTab: true,
};
// Create restriction target from DOM element
const demoElem = document.querySelector("#demo");
const restrictionTarget = await RestrictionTarget.fromElement(demoElem);
// Capture video stream from user's webcam and isolate video track
const stream =
await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
const [track] = stream.getVideoTracks();
// Restrict video track
await track.restrictTo(restrictionTarget);
// Broadcast restricted stream in <video> element
videoElem.srcObject = stream;
有关上下文中的示例代码,请参阅 使用元素捕获和区域捕获 API。
停止限制
您可以通过在同一轨道上调用 restrictTo()
并传递 null
作为参数来停止限制。
js
// Stop restricting
await track.restrictTo(null);
规范
规范 |
---|
元素捕获 # dom-browsercapturemediastreamtrack-restrictto |
浏览器兼容性
加载中…