使用區域擷取功能提升分頁分享體驗

François Beaufort
François Beaufort
GitHub
Elad Alon

網路平台已允許網頁應用程式擷取目前分頁的視訊軌。於是現在開始支援「區域擷取」，這是裁剪這些視訊軌的機制。網頁應用程式會將目前分頁的部分內容指定為感興趣的區域，瀏覽器則會裁剪該區域以外的所有像素。

網頁應用程式先前可以「手動」裁剪影片軌。也就是說，網頁應用程式可以直接操控每個影格。這樣的成果並不穩定，成效不彰。區域拍攝功能可解決這些缺點。網頁應用程式就能指示瀏覽器代為執行工作。

關於區域擷取

您運用 Dynamic ContentTM 建立了網站，這是史上最棒的網頁應用程式，使用者絕對不停地使用這款應用程式，合作又不容小覷。接下來可能的做法是嵌入虛擬會議功能。因此決定採取這個做法。您與現有的視訊會議服務供應商合作，將他們的網頁應用程式嵌入為跨來源 iframe。視訊會議網頁應用程式可擷取目前分頁做為視訊軌，並傳送給遠端參與者。

瀏覽器視窗螢幕截圖，顯示網頁應用程式醒目顯示主要內容區域和跨來源 iframe。
主要內容區域以藍色顯示，跨來源 iframe 為紅色。

太快...你不真的想要將其他人的影片傳給他們，那你一定嗎？進一步裁剪該部分的邊框。但又如何？嵌入的 iframe 不會得知您提供的內容和位置，因此如果沒有幫助，就無法裁剪。理論上您可以傳送目標座標。不過，如果使用者調整視窗大小，會發生什麼事？要捲動可視區域嗎？要放大或縮小嗎？和頁面互動的方式會使版面配置變更？即使您將新的座標傳送到擷取的 iframe，時間問題仍可能可能導致某些影格遭到錯誤裁剪。

接著使用區域擷取功能您的網頁上有 Element，也許是包含主要內容的 <div>。例如 mainContentArea。您要讓視訊會議網頁應用程式擷取並分享此元素定界框所定義的遠端區域。因此從 mainContentArea 衍生 CropTarget。你已將這部 CropTarget 傳送至視訊會議網頁應用程式。使用這個 CropTarget 裁剪視訊軌後，該音軌的影格現在只會包含位於 mainContentArea 定界框內的像素。如果 mainContentArea 會變更大小、形狀或位置，視訊軌就會跟著播放，您不需要從任一網頁應用程式額外輸入內容。

讓我們再次執行這些步驟：

您可以在網頁應用程式中定義 CropTarget，方法是使用您選擇的元素做為輸入內容，藉此呼叫 CropTarget.fromElement()。

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

您將 CropTarget 傳遞至視訊會議網頁應用程式。

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

視訊會議網頁應用程式要求瀏覽器將音軌裁剪到 CropTarget 定義的區域，方法是在自拍照目標裝置上呼叫 cropTo()，然後使用主要網頁應用程式收到的裁剪目標。

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

呃，這樣就大功告成了。

深入探索

特徵偵測

如要檢查系統是否支援 CropTarget.fromElement()，請使用：

if ("CropTarget" in self && "fromElement" in CropTarget) {
  // Deriving a target is supported.
}

產生裁剪目標

現在聚焦在名為 mainContentArea 的元素。如要從該來源衍生 CropTarget，請呼叫 CropTarget.fromElement(mainContentArea)。如果成功，系統會用新的 CropTarget 物件解析傳回的 Promise。否則，如果計算出的 CropTarget 物件數量不合理，該物件就會遭拒。

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

與 Element 不同，CropTarget 物件是可序列化的物件。舉例來說，您可以使用 Window.postMessage() 將傳遞訊息傳送至其他文件。

裁剪

擷取分頁時，視訊軌會例項化為 BrowserCaptureMediaStreamTrack，也就是 MediaStreamTrack 的子類別。這個子類別會公開 cropTo()。呼叫 track.cropTo(cropTarget) 即可開始裁剪至 mainContentArea 的輪廓 (裁剪目標的元素來源元素)。

如果成功，就能解析 Promise，但保證所有後續影片影格均包含 mainContentArea 定界框內的像素。

如果失敗，Promise 就會遭到拒絕。可能原因如下：

  • CropTarget 已在另一個分頁中建立。(目前還需另外推出，敬請期待！)
  • CropTarget 衍生自已不存在的元素。
  • 音軌有複製作業。(詳情請參閱問題 1509418)。
  • 目前的曲目無法自行擷取視訊軌；請參閱下文。

所有分頁擷取視訊軌都會揭露 cropTo() 方法，而不只是用於自行拍攝。因此，建議您在裁剪音軌前，先檢查使用者是否選取了目前的分頁。可以使用「擷取控點」完成此操作。也可以要求瀏覽器使用 preferCurrentTab 提醒使用者自行擷取。

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

如要還原為未裁剪的狀態，請使用 null 呼叫 cropTo()。

// Stop cropping.
await track.cropTo(null);

遭遮蓋和遭到遮蔽的內容

針對區域擷取，請僅代表目標的位置和大小，不會影響 z-index。系統將擷取遮住目標的像素。系統不會擷取目標中被遮住的部分。

這是區域拍攝功能的涵蓋部分，本來就會經過裁剪。未來的 API 會是「元素層級擷取」也就是說，請只擷取與目標相關的像素，無論遮蔽程度為何。這類 API 的安全性和隱私權要求與簡單的裁剪方式不同，

顯示區域擷取和元素層級 Capture API 不同結果的圖片。
區域擷取含有遭遮蔽內容的行為。

安全性和隱私權

「區域擷取」功能可讓已觀察分頁中所有像素的網頁應用程式，主動移除其中幾個像素。這項機制安全無虞，因為無法取得新資訊。

區域擷取功能可用於限制傳送給遠端參與者的資訊。舉例來說，您可能想要分享幾張投影片，但不想分享演講者備忘稿。

包含投影片和演講者備忘稿的瀏覽器視窗螢幕截圖。
一款含有投影片和演講者備忘稿的網頁應用程式。
我們非常不想要遠端共用備忘稿。提示區域擷取。

請注意，本機擷取功能不會提供任何安全性保證。將軌跡交遞給其他文件時，接收的文件仍可取消裁剪軌跡，並取得擷取的所有分頁像素。

Chrome 會在已擷取的分頁邊緣周圍繪製藍色框線。裁剪時，Chrome 通常會繪製裁剪目標周圍的藍色邊框。

示範

你可以在 Glitch 上執行示範，體驗區域擷取功能。成為 請務必檢查原始碼。

瀏覽器支援

瀏覽器支援

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

區域擷取功能僅適用於電腦版 Chrome 104。

後續步驟

以下搶先預告日後將推出哪些功能，改善網頁版的螢幕畫面分享功能：

  • 區域擷取功能可擷取其他分頁的內容。
  • 條件聚焦可讓擷取的網頁應用程式指示瀏覽器將焦點切換至擷取的螢幕介面，或避免這類焦點變更。
  • 您可以提供Element-level Capture API。

意見回饋

Chrome 團隊和網路標準社群想瞭解您使用「區域擷取」功能的經驗。

請與我們分享設計

區域擷取功能是否未如預期運作？或是你還需要實現創意的方法或屬性嗎？對安全性模型有任何疑問或意見嗎？

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

無法導入嗎？

您發現 Chrome 實作錯誤嗎？還是採用與規格不同？

  • 前往 https://new.crbug.com 回報錯誤。請盡可能提供所有細節，並提供重現重現說明的簡單操作說明。Glitch 有便捷的報復工具，

顯示支援

您是否打算使用區域擷取功能？您的公開支援服務可協助 Chrome 團隊優先開發特定功能，並說明其他瀏覽器廠商對於這些功能的支援有多重要。

請將 Twitter 訊息傳送給 @ChromiumDev，並告訴我們您使用何處及使用方式。

特別銘謝

感謝 Joe Medley 撰寫這篇文章。