瀏覽器支援
- 102
- 102
- x
- x
網路平台現在附有擷取控制代碼的機制,可協助擷取及擷取網頁應用程式之間的協作。擷取控點可讓網頁應用程式擷取符合人體工學,且能放心識別擷取的網頁應用程式 (如果擷取的網頁應用程式已選擇啟用)。
以下提供幾個例子,說明這項功能的優點。
範例 1:如果視訊會議網頁應用程式擷取簡報網頁應用程式,視訊會議網頁應用程式會向使用者顯示用於瀏覽簡報的控制選項。由於這些控制選項會直接嵌入視訊會議網頁應用程式,使用者不必在視訊會議分頁和畫面上顯示的分頁之間反覆切換。隨著這次的負擔增加,使用者現在可以更將重心放在簡報傳遞上。
範例 2:將拍攝的表面算繪回拍攝位置,就會產生「鏡面鏡子」效果。值得注意的是,如果使用者選擇擷取進行視訊會議的分頁,且視訊會議網頁應用程式顯示的是本機預覽畫面,就會發生這種突發效應。使用擷取控點時,系統可偵測及減輕自我拍攝問題,例如網頁應用程式隱藏本機預覽。
關於擷取控點
拍攝控點由兩個相輔點組成:
- 擷取的網頁應用程式可以選擇透過
navigator.mediaDevices.setCaptureHandleConfig()
向部分來源公開特定資訊。 - 擷取網頁應用程式之後,即可在
MediaStreamTrack
物件上使用getCaptureHandle()
讀取這項資訊。
擷取的側邊
網頁應用程式可能會公開資訊,以便擷取網頁應用程式。方法是透過包含以下成員的選用物件呼叫 navigator.mediaDevices.setCaptureHandleConfig()
:
handle
:可以是長度上限為 1,024 個字元的任何字串。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 團隊和網路標準社群想瞭解你的擷取控點使用體驗。
介紹設計
是否有關於拍攝帳號代碼的問題,且無法如預期運作?還是缺少實作提案所需的方法或屬性?對安全模型有任何疑問或意見嗎?
- 在 GitHub 存放區中提交規格問題,或是在現有問題中新增想法。
執行時遇到問題嗎?
您在導入 Chrome 時發現錯誤嗎?還是實作方式與規格不同?
- 前往 https://new.crbug.com 回報錯誤。請務必盡可能提供詳細資訊,並且提供重現問題的簡單操作說明。Glitch 適合用於分享快速簡便的重新提交內容。
顯示支援服務
您打算使用拍攝帳號代碼嗎?您的公開支援團隊可以協助 Chrome 團隊決定各項功能的優先順序,並向其他瀏覽器供應商瞭解支援這些功能的重要性。
請發文至 @ChromiumDev,讓我們知道您的位置和使用方式。
實用連結
特別銘謝
感謝 Joe Medley 閱讀這篇文章。