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

François Beaufort

Elad Alon

網頁平台現在隨附 Capture Handle，這項機制可協助擷取和擷取的網頁應用程式進行協作。擷取控制代碼可讓擷取網頁應用程式以符合人體工學的方式，自信地識別擷取的網頁應用程式 (如果擷取的網頁應用程式已選擇加入)。

以下列舉幾個例子，說明這項功能的好處。

範例 1：如果視訊會議網頁應用程式正在擷取簡報網頁應用程式，視訊會議網頁應用程式可以向使用者顯示控制項，方便他們在投影片之間切換。由於控制項直接嵌入視訊會議網頁應用程式，使用者不必在視訊會議分頁和簡報分頁之間來回切換。使用者不必再擔心這些問題，可以更專心準備簡報。

範例 2：如果擷取的表面會算繪回擷取位置，就會產生「鏡子大廳」效果。值得注意的是，如果使用者選擇擷取正在進行視訊會議通話的分頁，且視訊會議網頁應用程式會算繪本機預覽畫面，就會出現這種可怕的現象。使用擷取控制代碼，即可偵測及減輕自行擷取造成的影響，例如網頁應用程式抑制本機預覽畫面。

關於擷取控點

擷取控制代碼由兩個互補部分組成：

• 擷取的網頁應用程式可以選擇透過 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 資訊與擷取的網頁應用程式建立通訊 (例如透過工作人員傳訊，或使用共用的雲端基礎架構)。

擷取側邊

擷取網頁應用程式會保留影片 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。擷取控制代碼提供更簡單、可靠且安全的機制。此外，擷取的網頁應用程式也能選取目標對象，包括選取來源或整個網路。

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

範例

您可以執行範例，試用 Capture Handle。

示範

如需一些示範，請前往：

• 遙控器
• 自拍偵測

特徵偵測

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

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

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

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

後續步驟

以下搶先預告近期將推出的功能，可望提升網頁版螢幕分享體驗：

• 區域擷取功能可讓您裁剪從目前分頁的螢幕擷取畫面取得的影片軌。
• 條件式焦點可讓擷取的網頁應用程式指示瀏覽器將焦點切換至擷取的顯示表面，或避免這類焦點變更。

意見回饋

Chrome 團隊和網路標準社群很想瞭解您使用 Capture Handle 的體驗。

請提供設計的相關資訊

Capture Handle 是否有任何不符合預期的地方？或者，是否有缺少的方法或屬性，需要實作才能實現想法？對安全模型有任何疑問或意見嗎？

• 在 GitHub 存放區中提報規格問題，或在現有問題中新增想法。

導入作業有問題嗎？

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

• 前往 https://new.crbug.com 回報錯誤。請務必盡可能提供詳細資料，以及重現錯誤的簡單操作說明。

展現支持

您是否打算使用 Capture Handle？您的公開支持有助於 Chrome 團隊優先處理功能，並向其他瀏覽器供應商說明支援這些功能的重要性。

傳送推文至 @ChromiumDev，告訴我們您在哪裡使用這項功能，以及使用方式。

實用連結

• 規格
• 說明影片
• TAG 審查
• Chromium 錯誤
• ChromeStatus.com 項目

特別銘謝

感謝 Joe Medley 審查本文。