RestrictionTarget: fromElement() 静态方法

可用性有限

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

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

安全上下文: 此功能仅在安全上下文(HTTPS)中可用,且支持此功能的浏览器数量有限。

RestrictionTarget 接口的 fromElement() 静态方法返回一个 RestrictionTarget 实例,该实例可用于将捕获的视频轨道限制为指定的 DOM 元素(及其后代)。

语法

js
RestrictionTarget.fromElement(element)

参数

element

您想用作限制目标的 Element 的引用。要使元素用作限制目标,它必须

  • 形成一个 堆叠上下文
  • 在 3D 空间中被扁平化(例如,它不受任何 3D 变换的影响)。
  • 被渲染(例如,不在屏幕外或通过 display: none 隐藏)。
  • 仅包含一个盒片段(例如,不跨越多行)。

如果不满足上述条件,则认为它不符合限制条件

此外,如果正在限制的轨道具有克隆(即,由 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

浏览器兼容性

另见