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

François Beaufort

Elad Alon

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

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

關於區域擷取

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

安全性和隱私權

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

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

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

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

示範

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

瀏覽器支援

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

後續步驟

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

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

意見回饋

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

請提供設計相關資訊

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

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

導入時發生問題？

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

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

顯示支援

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

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

實用連結

• 規格
• 說明
• TAG 審查
• Chromium 錯誤
• ChromeStatus.com 項目

特別銘謝

感謝 Joe Medley 撰寫這篇文章。