網路平台已允許網頁應用程式擷取目前分頁的影片軌。這項工具現在附有 Region Capture，可用來裁剪這些影片軌道。網頁應用程式會將目前分頁的一部分指定為感興趣的區域，且瀏覽器會裁剪該區域以外的所有像素。
網頁應用程式先前可以「手動」裁剪視訊軌。也就是說，網頁應用程式可以直接操控每個影格。但這並不完善，成效也不夠好。區域擷取功能可以解決這些缺點。網頁應用程式現在可以指示瀏覽器代為執行工作。
關於區域擷取
因此，您使用 Dynamic ContentTM 建立網站。這是史上最出色的網頁應用程式，一般人心不已地停止使用，而且通常可以協同合作。建議採取的下一步是嵌入虛擬會議功能。你決定採用這種說法，您與現有的視訊會議服務供應商合作，將他們的網頁應用程式嵌入為跨來源 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);
視訊會議網頁應用程式中使用主要網頁應用程式接收的裁剪目標，在自行拍攝的視訊軌上呼叫 cropTo()，要求瀏覽器將音軌裁剪至 CropTarget 定義的區域。
// 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.
}
取得 CropTarget
接下來，我們會聚焦在名為 mainContentArea 的元素。若要取得 CropTarget 它，請呼叫 CropTarget.fromElement(mainContentArea)。如果成功，傳回的 Promise 會使用新的 CropTarget 物件解決。否則，假如您遇到了不合理的 CropTarget 物件數量，則會遭到拒絕。
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
與 Element 不同，CropTarget 物件可序列化。舉例來說，您可以使用 Window.postMessage() 傳遞至其他文件。
裁剪
擷取分頁時，視訊軌會執行個體化為 BrowserCaptureMediaStreamTrack，這是 MediaStreamTrack 的子類別。這個子類別會公開 cropTo()。呼叫 track.cropTo(cropTarget) 以開始裁剪為 mainContentArea 的輪廓 (裁切目標的來源元素)。
如果成功，系統就會在保證之後所有影格皆包含位於 mainContentArea 定界框的像素時，才能夠解決 Promise。
如果失敗，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，也就是元素層級擷取功能；也就是說，系統只會擷取與目標相關聯的像素 (無論是否遮蔽)。這類 API 的安全性和隱私權要求與簡單裁剪不同。
安全性和隱私權
區域擷取功能可讓已觀察分頁所有像素的網頁應用程式主動移除部分像素。由於無法獲取新資訊，因此資料安全。
區域擷取功能可用於限制傳送給遠端參與者的資訊。舉例來說，您可能只想分享幾張投影片，但不想分享演講者備忘稿。
遠端分享筆記是非常不理想的做法。提示區域擷取。
請注意，區域擷取功能不會在本機提供任何安全保證。將軌跡交給其他文件時，接收文件仍可取消裁剪軌跡，並取得擷取分頁上的所有像素像素。
Chrome 會在已擷取的分頁邊緣加上藍色邊框。裁剪時，Chrome 通常會在裁剪的目標周圍繪製藍色邊框。
示範模式
你可以在 Glitch 上執行示範，使用區域擷取功能玩遊戲。請務必查看原始碼。
瀏覽器支援
瀏覽器支援
- 104
- 104
- x
- x
「區域擷取」功能僅適用於電腦版 Chrome 104。
後續步驟
以下簡單介紹近期即將推出的功能，如何改善網路上的螢幕畫面分享功能：
- 區域擷取功能支援擷取其他分頁的內容。
- 條件式焦點可讓擷取網頁應用程式指示瀏覽器將焦點切換到擷取的顯示介面，或避免這類焦點變更。
- 您可以提供元素層級擷取 API。
意見回饋：
Chrome 團隊和網路標準社群想瞭解你的區域擷取功能使用體驗。
介紹設計
哪些區域擷取功能無法正常運作？還是缺少實作提案所需的方法或屬性？對安全模型有任何疑問或意見嗎？
- 在 GitHub 存放區中提交規格問題，或是在現有問題中新增想法。
執行時遇到問題嗎？
您在導入 Chrome 時發現錯誤嗎？還是實作方式與規格不同？
- 前往 https://new.crbug.com 回報錯誤。請務必盡可能提供詳細資訊，並且提供重現問題的簡單操作說明。Glitch 適合用於分享快速簡便的重新提交內容。
顯示支援服務
您打算使用區域拍攝功能嗎？您的公開支援團隊可以協助 Chrome 團隊決定各項功能的優先順序，並向其他瀏覽器供應商瞭解支援這些功能的重要性。
請發文至 @ChromiumDev，讓我們知道您的位置和使用方式。
實用連結
特別銘謝
感謝 Joe Medley 閱讀這篇文章。