瀏覽器支援
網站平台現已支援擷取控點,這項機制有助於在擷取及擷取網頁應用程式之間進行協作。擷取控點可讓擷取網頁應用程式,以工作方式正確辨識擷取的網頁應用程式。(如果擷取的網頁應用程式已啟用)。
請透過幾個例子說明優點。
範例 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 撰寫這篇文章。