RestrictionTarget: fromElement() 静态方法
RestrictionTarget
接口的 fromElement()
静态方法返回一个 RestrictionTarget
实例,该实例可用于将捕获的视频轨道限制为指定的 DOM 元素(及其后代)。
语法
js
RestrictionTarget.fromElement(element)
参数
element
-
您想用作限制目标的
Element
的引用。要使元素用作限制目标,它必须如果不满足上述条件,则认为它不符合限制条件。
此外,如果正在限制的轨道具有克隆(即,由
BrowserCaptureMediaStreamTrack.clone()
创建)或是从不同于用户当前标签页的标签页捕获的(例如,通过Window.postMessage()
传递),则该元素不会被捕获。
注意: 捕获元素时,其上设置的任何 alpha 通道值都不会包含在内。如果限制目标元素是半透明的,它在捕获后将完全不透明,因此看起来会不同。
返回值
一个 Promise
,它解析为一个 RestrictionTarget
对象实例,然后该实例可以传递给 BrowserCaptureMediaStreamTrack.restrictTo()
,以便将轨道中捕获的视频限制为 RestrictionTarget
创建时指定的特定 DOM 元素。
RestrictionTarget
对象是可序列化的。它们可以通过 Window.postMessage()
等机制传递到另一个文档。
如果限制目标元素不符合限制条件,则 Promise 会被拒绝。
示例
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。
规范
规范 |
---|
元素捕获 # dom-restrictiontarget-fromelement |
浏览器兼容性
加载中…