瀏覽器支援
- 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 閱讀這篇文章。