使用擷取控點功能提升分頁分享體驗

François Beaufort
François Beaufort
GitHub
Elad Alon

瀏覽器支援

  • Chrome：102。
  • Edge：102。
  • Firefox：不支援。
  • Safari：不支援。

網頁平台現在會隨附擷取句柄，這是一種機制，可協助擷取和擷取的網頁應用程式之間進行協作。擷取句柄可讓擷取網頁應用程式以符合人體工學的方式，自信地識別擷取的網頁應用程式 (如果擷取的網頁應用程式已選擇加入)。

以下列舉幾個例子說明好處。

範例 1：如果視訊會議網頁應用程式擷取簡報網頁應用程式，則可向使用者提供控制項，讓他們在投影片之間切換。由於控制項已直接嵌入視訊會議網頁應用程式中，使用者不必在視訊會議分頁和顯示分頁之間反覆切換。這項負擔解除後，使用者現在可以更專注於呈現簡報內容。

範例 2：當擷取的表面算繪回擷取位置時，就會發生「鏡廳」效果。值得注意的是，如果使用者選擇擷取進行視訊會議通話的分頁，而視訊會議網頁應用程式會顯示本機預覽畫面，就會出現這個令人擔心的效果。使用 Capture Handle 時，系統可以偵測並減輕自拍問題，例如透過網路應用程式抑制本機預覽畫面。

鏡廳效果的插圖

關於擷取句柄

Capture Handle 包含兩個互補的部分：

  • 已擷取的網路應用程式可以選擇透過 navigator.mediaDevices.setCaptureHandleConfig() 向部分來源公開特定資訊。
  • 擷取網頁應用程式後，即可在 MediaStreamTrack 物件上使用 getCaptureHandle() 讀取該資訊。

擷取的側邊

網頁應用程式可以將資訊公開給可能擷取的網頁應用程式。方法是使用含有下列成員的選用物件呼叫 navigator.mediaDevices.setCaptureHandleConfig()：

  • handle：可以是長度不超過 1024 個半形字元的任何字串。
  • exposeOrigin：如果為 true，擷取的網頁應用程式可能會將擷取的網頁應用程式來源公開。
  • permittedOrigins：有效值為 (i) 空陣列、(ii) 包含單一項目 "*" 的陣列，或 (iii) 來源陣列。如果 permittedOrigins 包含單一項目 "*"，則所有擷取的網頁應用程式都能觀察到 CaptureHandle。否則，只有擷取來源位於 permittedOrigins 的網頁應用程式才會可見。

以下範例說明如何將隨機產生的 UUID 公開為任何擷取網頁應用程式的句柄和來源。

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

請注意，擷取的網頁應用程式不會知道自己是否正在擷取。除非擷取的網頁應用程式使用 CaptureHandle 資訊，與擷取的網頁應用程式建立通訊 (例如透過 worker 或共用雲端基礎架構傳送訊息)。

擷取側

擷取網頁應用程式會保留影片 MediaStreamTrack，並可透過對該 MediaStreamTrack 呼叫 getCaptureHandle() 來讀取擷取句柄資訊。如果沒有可用的擷取句柄，或是擷取的網頁應用程式無法讀取，這個呼叫會傳回 null。如果擷取控制代碼可用，且擷取的網頁應用程式已新增至 permittedOrigins，這個呼叫會傳回物件，其中包含下列成員：

  • handle：透過 navigator.mediaDevices.setCaptureHandleConfig() 設定的已擷取網頁應用程式字串值。
  • origin：如果 exposeOrigin 設為 true，則為擷取的網頁應用程式來源。否則，則未定義。

以下範例說明如何從影片音軌讀取擷取句柄資訊。

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

監控 CaptureHandle 變更，方法是監聽 MediaStreamTrack 物件的 "capturehandlechange" 事件。變更會在下列情況下發生：

  • 擷取的網頁應用程式會呼叫 navigator.mediaDevices.setCaptureHandleConfig()。
  • 在擷取的網頁應用程式中發生跨文件導覽。
videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

安全性和隱私權

理論上，您可以透過在擷取的網頁應用程式中嵌入「魔術像素」，或是在影片串流中嵌入 QR code，與擷取的網頁應用程式進行協作。Capture Handle 提供更簡單、可靠且安全的機制。這項功能也允許擷取的網頁應用程式選取目標對象，包括特定來源或整個網際網路。

請注意，navigator.mediaDevices.setCaptureHandleConfig() 僅適用於安全瀏覽情境 (僅限 HTTPS) 中的頂層主框架。

範例

您可以在 Glitch 上執行範例，體驗 Capture Handle 的功能。請務必查看原始碼。

示範

部分示範可在以下位置取得：

特徵偵測

如要檢查是否支援 getCaptureHandle()，請使用：

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

如要檢查是否支援 navigator.mediaDevices.setCaptureHandleConfig()，請使用：

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

後續步驟

以下是近期內將推出的功能，可改善在網路上分享螢幕畫面的體驗：

  • 區域擷取可讓您從當前分頁的螢幕擷取畫面中，裁剪影片音軌。
  • Conditional Focus 可讓擷取的網頁應用程式指示瀏覽器將焦點切換至擷取的顯示介面，或避免焦點變更。

意見回饋

Chrome 團隊和網路標準社群希望瞭解你使用 Capture Handle 的體驗。

請提供設計相關資訊

Capture Handle 是否有任何不如預期的情況？或者，您是否缺少實作想法所需的方法或屬性？您對安全性模型有疑問或意見嗎？

  • 在 GitHub 存放區中提出規格問題，或在現有問題中加入您的想法。

導入時發生問題？

你是否發現 Chrome 實作項目有錯誤？或者實作方式與規格不同？

  • 請前往 https://new.crbug.com 提交錯誤。請務必提供盡可能多的詳細資料，以及重現問題的簡單操作說明。Glitch 可讓您輕鬆快速地分享重現內容。

顯示支援

您是否打算使用 Capture Handle？你的公開聲援有助於 Chrome 團隊決定功能的優先順序，並向其他瀏覽器供應商顯示支援這些功能的重要性。

請發推文給 @ChromiumDev，告訴我們你在哪裡使用這項功能，以及使用方式。

特別銘謝

感謝 Joe Medley 審查本文。