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

François Beaufort
François Beaufort
GitHub
Elad Alon

網路平台已允許網頁應用程式擷取目前分頁的影片軌跡。這項功能現在已提供區域擷取功能，可用來裁剪這些影片音軌。網頁應用程式會將目前分頁的部分內容指定為感興趣的區域，瀏覽器就會裁剪該區域以外的所有像素。

網頁應用程式先前可以「手動」裁剪影片音軌，也就是說，網頁應用程式可以直接操作每個影格。這既不穩健也不順暢。區域擷取功能可解決這些缺點。網頁應用程式現在可以指示瀏覽器代為執行工作。

關於區域擷取

您已使用 Dynamic Content™ 建立網站，這是有史以來最佳的網頁應用程式，使用者會不斷使用，而且經常是協同合作。下一步可能會是嵌入虛擬會議功能。您決定採用這個選項。您與現有的視訊會議服務供應商合作，將他們的網路應用程式嵌入為跨來源 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.

Et voilà! 大功告成。

深入探索

特徵偵測

如要檢查是否支援 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 的輪廓 (即 cropTarget 衍生的元素)。

如果成功，系統會保證所有後續的影片影格都包含位於 mainContentArea 邊界框內的像素，並解決承諾。

如果失敗，則會拒絕承諾。發生這種情況的原因如下：

  • 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 的安全性和隱私權規定與簡單裁剪不同。

區域擷取和元素層級擷取 API 的不同結果。
區域擷取功能在遮蔽內容下的行為。

安全性和隱私權

區域擷取功能可讓已觀察分頁中所有像素的網頁應用程式，自行移除部分像素。這項做法顯然安全無虞，因為無法取得任何新資訊。

您可以使用區域擷取功能，限制傳送給遠端參與者的資訊。舉例來說，你可能想分享部分投影片，但不想分享講者備註。

瀏覽器視窗的螢幕截圖，其中包含投影片和演講者備忘稿。
含有投影片和演講者備忘稿的網路應用程式。
遠端共用備忘稿的做法極不建議。提示區域擷取。

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

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

示範

您可以在 Glitch 上執行範例，體驗區域擷取功能。請務必查看原始碼。

瀏覽器支援

瀏覽器支援

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

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

後續步驟

以下預覽近期推出的功能，協助你在網路上分享螢幕畫面：

  • 區域擷取功能將支援擷取其他分頁。
  • Conditional Focus 可讓擷取的網頁應用程式指示瀏覽器將焦點切換至擷取的顯示介面，或避免焦點發生變更。
  • 可能會提供 元素層級 Capture API。

意見回饋

Chrome 團隊和網路標準社群希望瞭解你使用區域擷取功能的體驗。

請提供設計相關資訊

有任何區域擷取功能無法正常運作嗎？或者，您是否缺少實作想法所需的方法或屬性？您對安全性模型有疑問或意見嗎？

  • 在 GitHub 存放區中提出規格問題，或在現有問題中加入您的想法。

導入時發生問題？

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

  • 請前往 https://new.crbug.com 提交錯誤。請務必提供盡可能多的詳細資料，以及重現問題的簡單操作說明。Glitch 可讓您輕鬆快速地分享重現內容。

顯示支援

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

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

特別銘謝

感謝 Joe Medley 審查本文。