发布时间：2025 年 10 月 28 日，上次更新时间：2022 年 6 月 21 日
Web 平台已允许 Web 应用捕获当前标签页的视频轨道。现在，它随附了区域捕获功能，可用于剪裁这些视频轨道。Web 应用将当前标签页的一部分指定为感兴趣的区域，浏览器会裁剪该区域之外的所有像素。
以前，Web 应用可以“手动”剪裁视频轨道。也就是说，Web 应用可以直接操纵每个帧。这种方法既不稳健，也不高效。区域捕获可以解决这些缺点。现在，Web 应用可以指示浏览器代表其执行工作。
区域捕获功能简介
您已经创建了一个包含 Dynamic Content™ 的网站。这是有史以来最好的 Web 应用，用户根本停不下来，而且经常会协同使用。下一步可能是嵌入虚拟会议功能。您决定采用这种方式。您与现有的视频会议服务提供商合作，将他们的 Web 应用嵌入为跨源 iframe。视频会议 Web 应用会将当前标签页捕获为视频轨道，并将其传输给远程参会者。
别急…您肯定不想将用户自己的视频再传回给他们，对吧？最好将该部分裁剪掉。但如何实现呢？嵌入的 iframe 不知道您展示的内容是什么以及展示的位置，因此在没有帮助的情况下无法进行裁剪。从理论上讲，您可以传递预期坐标。但如果用户调整窗口大小，会发生什么情况？滚动视口？放大或缩小？以产生布局变化的方式与网页互动？即使您将新坐标发送到捕获 iframe，时间安排问题仍可能会导致一些画面裁剪错误。
那么，我们来使用区域截图功能。您的网页上有一个 Element（可能是 <div>），其中包含主要内容。我们将其命名为 mainContentArea。您希望视频会议 Web 应用远程捕获并分享此元素的边界框所定义的区域。因此，您从 mainContentArea 派生出 CropTarget。您将此 CropTarget 传递给视频会议 Web 应用。使用此 CropTarget 裁剪视频轨道后，该轨道上的帧现在仅包含 mainContentArea 的边界框内的像素。如果 mainContentArea 更改大小、形状或位置，视频轨道会随之变化，而无需来自任一 Web 应用的任何额外输入。
我们再来回顾一下这些步骤：
您可以通过调用 CropTarget.fromElement() 并将所选元素作为输入，在 Web 应用中定义 CropTarget。
// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
您将 CropTarget 传递给视频会议 Web 应用。
// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.