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

瀏覽器相容性

另見