從任何元素擷取影片串流

François Beaufort
François Beaufort
GitHub
Elad Alon

只要使用螢幕畫面擷取 API，即可擷取整個分頁。Element Capture API 可讓您擷取並記錄特定的 HTML 元素。它會將整個分頁的擷取轉換為特定 DOM 子樹狀結構的擷取內容，只擷取 target 元素的直接子系。換句話說，這項功能會裁剪及移除遭到遮蓋和遮住的內容。

使用元素擷取的好處

考量視訊會議應用程式的需求條件，可協助你瞭解「元素擷取」功能的實用性。如果您有視訊會議應用程式可讓您將第三方應用程式嵌入 iframe，有時可能會想以影片形式擷取該 iframe，並傳送給遠端參與者。

Chrome 中視訊會議通話的螢幕截圖。
Elad 透過第三方應用程式與 François 進行視訊會議。

呼叫 getDisplayMedia() 並讓使用者選擇目前的分頁，就會傳送目前的分頁。這很有可能會將人們自己的影片傳回給他們。您可以使用區域拍攝功能裁剪掉該區域。

不過，如果簡報者與視訊會議應用程式互動，且部分內容 (例如下拉式清單) 出現於即將擷取的內容上方，會發生什麼事？

下拉式清單的螢幕截圖，涵蓋要擷取的內容。
系統會在要擷取的內容頂端顯示下拉式清單。

區域擷取功能無法為你提供協助。部分下拉式清單可能會顯示在遠端參與者螢幕。

已擷取下拉式清單的螢幕截圖。
Elad 的下拉式清單顯示在法屬法人所收到內容的上方。

區域擷取功能會以這種方式擷取元素的一部分 (稱為「遮蔽內容」)，會導致多個問題：

  • 這些內容可能會擋住使用者要分享的內容。
  • 某些內容可能會遭遮蓋，例如即時通訊通知。
  • 但遭遮蓋的內容可能會造成混淆。(舉例來說，應用程式的重新版面配置可以短暫提供遠端參與者的影片，而不是擷取的目標)。

Element Capture API 能讓您指定要分享的元素，藉此解決上述所有問題。

目標元素螢幕截圖 (檢視畫面中沒有下拉式選單)。
François 並未看到 Elad 的下拉式清單。

如何使用元素擷取？

captureTarget 是網頁上的元素，其中包含使用者要擷取的內容。你希望視訊會議網頁應用程式擷取captureTarget並分享給遠端參與者。因此從 captureTarget 衍生 RestrictionTarget。使用這個 RestrictionTarget 限制視訊軌後，該視訊軌的影格現在只會包含 captureTarget 及其直接 DOM 子系中的像素。

如果 captureTarget 會變更大小、形狀或位置，視訊軌就會跟著播放，您不需要從任一網頁應用程式額外輸入內容。但同樣不需要特殊處理。

請再次檢查這些步驟：

第一步是讓使用者擷取目前的分頁。

// Ask the user for permission to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
 preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

使用您選擇的元素做為輸入內容，呼叫 RestrictionTarget.fromElement() 即可定義 RestrictionTarget。

// Associate captureTarget with a new RestrictionTarget
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);

接著，呼叫視訊軌上的 restrictTo()，並使用 RestrictionTarget 做為輸入內容。一旦最後一個承諾值解決，所有後續影格都會受到限制。

// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);

// Enjoy! Transmit remotely.

深入探索

特徵偵測

如要檢查系統是否支援 RestrictionTarget.fromElement()，請使用：

if ("RestrictionTarget" in self && "fromElement" in RestrictionTarget) {
  // Deriving a restriction target is supported.
}

擷取 RestrictionTarget

聚焦在名為 captureTarget 的元素。如要從該來源衍生 RestrictionTarget，請呼叫 RestrictionTarget.fromElement(captureTarget)。如果成功，系統會用新的 RestrictionTarget 物件解析傳回的 Promise。否則，如果計算出的 RestrictionTarget 物件數量不合理，該物件就會遭拒。

const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);

與元素不同，RestrictionTarget 物件「可序列化」。舉例來說，您可以使用 Window.postMessage() 將傳遞訊息傳送至其他文件。

受限

擷取分頁時，視訊軌會顯示 restrictTo()。擷取目前的分頁時，可透過 null 或從目前分頁內的元素衍生的任何 RestrictionTarget 呼叫 restrictTo()。

呼叫 restrictTo(restrictionTarget) 會將影片軌變更為 captureTarget 的擷取，就像是自行繪製，與 DOM 的其餘部分一樣。也會擷取 captureTarget 的所有子系。「captureTarget」的同層元素會從擷取作業中排除。因此，在軌跡上提交的任何影格看起來都像是裁剪為 captureTarget 的輪廓，並移除所有遮蔽和遭遮蔽的內容。

// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);

呼叫 restrictTo(null) 會將測試群組還原為原始狀態。

// Stop restricting.
await track.restrictTo(null);

如果呼叫 restrictTo() 成功，傳回的 Promise 就會自動解決，但可以保證所有後續影片影格都僅限 captureTarget 使用。

如果失敗，Promise 就會遭到拒絕。無法撥打 restrictTo() 的可能原因如下：

  • 如果在非擷取的分頁中建立 restrictionTarget。(請注意，點選 [改為分享此分頁] 按鈕，使用者可以隨時變更要擷取的分頁)。
  • restrictionTarget 衍生自已不存在的元素。
  • 如果音軌有本機副本，(詳情請參閱問題 1509418)。
  • 如果目前的曲目不是自行擷取的音軌，
  • 如果衍生 restrictionTarget 的元素不符合限制資格。

自我拍攝注意事項

當應用程式呼叫 getDisplayMedia() 時，使用者選擇擷取應用程式本身的分頁，稱為「自行擷取」。

所有分頁擷取視訊軌都會揭露 restrictTo() 方法，而不只是用於自行拍攝。不過元素擷取功能目前僅供自行拍攝。因此，建議您在限制測試群組前，先檢查使用者是否選取了目前的分頁。可以使用「擷取控點」完成此操作。也可以要求瀏覽器使用 preferCurrentTab 提醒使用者自行擷取。

透明度

應用程式透過 getDisplayMedia() 取得的影片影格不含 Alpha 頻道。如果應用程式設定了部分透明的擷取目標，則刪除 Alpha 管道可能會產生某些後果：

  • 實際顏色可能會改變。移除 Alpha 頻道時，在淺色背景上繪製的部分透明目標元素可能會變暗，而在深色背景上繪製的元素則可能較淺。
  • 將 Alpha 版本移除後，使用者看不到或無法看到的顏色。舉例來說，如果透明部分具有 RGBA 代碼 rgba(0, 0, 0, 0)，這可能會導致擷取的影格出現非預期的黑色區域。
，瞭解如何調查及移除這項存取權。
非矩形透明擷取目標的結果螢幕截圖。
非矩形透明拍攝目標影片串流 (右側) 是黑色背景矩形，內含不透明藍色圓圈。

不符資格的擷取目標

因此你一律可以開始將音軌限制為任何有效的擷取目標。不過，如果特定條件 (例如元素或祖系為 display:none)，系統就不會產生影格。一般原因在於，限制僅適用於由單一、連貫、二維長方形區域的元素組成的，而其像素可以在邏輯上與任何父項或同層級元素分開決定。

確保元素符合限制資格的其中一項重要考量是，必須建立專屬的堆疊背景資訊。確認無誤後，您可以指定 isolation CSS 屬性，並將其設為 isolate。

<div id="captureTarget" style="isolation: isolate;"></iframe>

請注意，目標元素隨時可以切換是否符合資格和不符合限制資格，例如當應用程式變更 CSS 屬性時。應用程式必須採用合理的擷取目標，並避免無預警地變更其屬性。如果目標元素不再符合資格，則除非目標元素再次符合限制資格，否則系統不會在音軌發出新的影格。

啟用元素擷取功能

電腦版 Chrome 支援 Element Capture API (元素擷取標記後方)，使用者可在 chrome://flags/#element-capture 啟用 Element Capture API。

這項功能也正在進入 Chrome 121 電腦版的來源試用。這項功能可讓開發人員啟用這項功能，讓網站訪客收集實際使用者的資料。如要進一步瞭解來源試用，請參閱「開始使用來源試用」一文。

安全性和隱私權

如要瞭解安全性的取捨，請參閱元素擷取規格的「隱私權和安全性考量」一節。

Chrome 瀏覽器會在已擷取的分頁邊緣周圍繪製藍色框線。

示範

如要使用元素擷取功能，請在 Glitch 上執行示範。請務必檢查原始碼。

意見回饋

Chrome 團隊和網路標準社群歡迎分享你對 Element Capture 的感想。

請與我們分享設計

區域擷取功能是否未如預期運作？或是你還需要實現創意的方法或屬性嗎？對安全性模型有任何疑問或意見嗎？

  • 在 GitHub 存放區上提交規格問題，或將你的想法新增至現有問題。

無法導入嗎？

您發現 Chrome 實作錯誤嗎？還是採用與規格不同？

  • 前往 https://new.crbug.com 回報錯誤。請盡可能提供所有細節，並提供重現重現說明的簡單操作說明。Glitch 有便捷的報復工具，

特別銘謝

相片來源：Paul Skorupskas 提供的 Unsplash 網站上