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

François Beaufort
François Beaufort
GitHub
Elad Alon

瀏覽器支援

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

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

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

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

範例 2：當擷取的表面算繪回擷取位置時，就會發生「鏡廳」效果。值得注意的是，如果使用者選擇擷取進行視訊會議通話的分頁，而視訊會議網頁應用程式會顯示本機預覽畫面，就會發生這種令人擔心的效果。使用 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 審查本文。