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

François Beaufort
François Beaufort
GitHub
Elad Alon

瀏覽器支援

  • 102
  • 102
  • x
  • x

網站平台現已支援擷取控點，這項機制有助於在擷取及擷取網頁應用程式之間進行協作。擷取控點可讓擷取網頁應用程式進行人體工學，有自信地辨識擷取的網頁應用程式 (如果擷取的網頁應用程式已選擇啟用)。

請透過幾個例子說明優點。

範例 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...
}

監聽 MediaStreamTrack 物件的 "capturehandlechange" 事件，以監控 CaptureHandle 變化。發生以下情況時，會發生變更：

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

安全性和隱私權

理論上，擷取及擷取網頁應用程式之間的合作，從擷取的網頁應用程式中嵌入「魔術像素」，或將 QR code 嵌入影片串流中，是目前可以實現的合作。擷取帳號代碼不僅更簡單、更可靠，也更加安全。也允許擷取的網頁應用程式選取目標對象，例如選取來源或整個網路。

請注意，navigator.mediaDevices.setCaptureHandleConfig() 僅適用於安全瀏覽結構定義中的頂層主要頁框 (僅限 HTTPS)。

範例

如要玩遊戲，請在 Glitch 上執行範例。請務必查看原始碼。

試聽帶

部分示範請見：

特徵偵測

如要檢查系統是否支援 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 的體驗，

請與我們分享設計

拍攝帳號代碼是否不如預期運作？或是你還需要實現創意的方法或屬性嗎？對安全性模型有任何疑問或意見嗎？

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

無法導入嗎？

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

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

顯示支援

你打算使用拍攝帳號代碼嗎？您的公開支援服務可協助 Chrome 團隊優先開發特定功能，並說明其他瀏覽器廠商對於這些功能的支援有多重要。

請將 Twitter 訊息傳送給 @ChromiumDev，並告訴我們您使用何處及使用方式。

特別銘謝

感謝 Joe Medley 撰寫這篇文章。