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

瀏覽器相容性

另見