BrowserCaptureMediaStreamTrack:restrictTo() 方法

可用性有限

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

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

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

BrowserCaptureMediaStreamTrack 接口的 restrictTo() 方法将自捕获流限制到特定的 DOM 元素(及其后代)。

语法

js
restrictTo(restrictionTarget)

参数

restrictionTarget

一个 RestrictionTarget 实例,表示要将流限制到的元素,或者 null/undefined,在这种情况下,将从轨道中移除任何先前设置的限制。

返回值

一个 Promise,解析为 undefined

Promise 将会拒绝,如果

  • 轨道 kind 不是 "video",或者其 readyState 不是 "live"
  • 限制目标元素已不存在。
  • 正在限制的轨道不是从用户屏幕捕获的轨道。
  • restrictionTarget 不是 RestrictionTarget 实例、nullundefined
  • 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

浏览器兼容性

另见