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

François Beaufort
François Beaufort

瀏覽器支援

  • 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 上執行範例。請務必查看原始碼

示範

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

特徵偵測

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

請提供設計相關資訊

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

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

導入時發生問題?

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

  • 請前往 https://new.crbug.com 提交錯誤。請務必提供盡可能多的詳細資料,以及重現問題的簡單操作說明。Glitch 有便捷的報復工具,

顯示支援

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

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

特別銘謝

感謝 Joe Medley 審查本文。