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

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.

呃，大功告成。

深入探索

特徵偵測

如要確認是否支援 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 的輪廓 (產生 rimTarget 的元素)。

如果成功，系統會保證所有後續的影片影格都包含位於 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 的安全性和隱私權要求與簡單的裁剪方式不同，

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

安全性和隱私權

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

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

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

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

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

示範

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

瀏覽器支援

瀏覽器支援

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

區域擷取功能僅適用於 Chrome 104 桌面版。

後續步驟

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

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

意見回饋

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

請提供設計相關資訊

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

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

無法導入嗎？

您發現 Chrome 實作錯誤嗎？或者實作方式與規格不同？

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

顯示支援

您是否打算使用區域擷取功能？您的公開支援服務可幫助 Chrome 團隊優先開發特定功能，並讓其他瀏覽器廠商瞭解支援這些功能的重要性。

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

特別銘謝

感謝 Joe Medley 審查本文。