分享四个屏幕共享API，实现Web屏幕共享

屏幕共享已成为许多 Web 应用程序的重要组成部分，因为它可以实现远程协作和支持。虽然大多数开发者都熟悉用于屏幕共享的标准 WebRTC API，但还有其他不太为人所知的 API，它们提供了额外的功能和控制。在这篇博文中，我们将探讨这些屏幕共享 API 中的四个，并提供代码片段以帮助你开始使用。虽然这些API目前只限于谷歌浏览器，但它们肯定是非常有趣的玩法!

1 Region Capture API

Region Capture API 仅能捕获用户屏幕的一部分，而不是整个屏幕。如果想要捕获特定区域（例如特定应用程序窗口或网页的一部分），这将很有用。以下是如何使用 Region Capture API 的示例：

通过调用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.contentWindow.postMessage(cropTarget);

视频会议Web应用程序要求浏览器通过在自捕获视频轨道上调用cropTo()，将轨道裁剪到由CropTarget定义的区域，并将从主网络应用中收到的裁剪目标。

// 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.

即将推出的一个非常酷的隐私功能是三维裁剪（有一个z-index）：

遮挡和遮挡的内容

对于区域捕捉，只有目标的位置和大小是重要的，而不是z-index。遮挡目标的像素将被捕获，而目标的遮挡部分将不被捕获。

这是区域捕捉本质上是裁剪的一个必然结果。一个替代方案是元素级捕捉，也就是只捕捉与目标相关的像素，而不考虑遮挡物。这样的 API 有一套不同于简单剪裁的安全和隐私要求。

谷歌浏览器的示例：https://region-capture-demo.glitch.me/

2 Capture Handle API

Capture Handle API 为捕获网页提供了一种与被捕获网页通信的方式。它使诸如使用视频通话本身的控件在幻灯片之间进行导航成为可能，而不是在视频通话和演示网页之间不断切换。

Captured side

Web 应用程序可以将信息公开给可能捕获的 Web 应用程序。navigator.mediaDevices.setCaptureHandleConfig()它通过调用由以下成员组成的可选对象来实现：

• handle: 可以是最多 1024 个字符的任何字符串。
• exposeOrigin：如果true，捕获的网络应用程序的来源可能会暴露给捕获的网络应用程序。
• permittedOrigins：有效值是 (i) 空数组，(ii) 包含单个 item 的数组"*"，或 (iii) 来源数组。如果permittedOrigins由单个项目组成"*"，则CaptureHandle所有捕获网络应用程序都可以观察到。否则，只能观察到捕获起源于permittedOrigins.

以下示例展示了如何将随机生成的 UUID 作为句柄和来源公开给任何捕获 Web 应用程序。

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

Capturing side

捕获的 Web 应用程序持有一个视频 MediaStreamTrack，并可以通过对该 MediaStreamTrack 调用getCaptureHandle() 来读取捕获手柄信息。如果没有捕获句柄，或者捕获的网络应用程序不允许读取它，则该调用返回空。如果有捕获句柄，并且捕获的网络应用程序被添加到 permittedOrigins，这个调用将返回一个具有以下成员的对象：

• handle: 由捕获的网络应用程序设置的字符串值navigator.mediaDevices.setCaptureHandleConfig()。
• origin: 如果exposeOrigin被设置为 “true”，则为捕获的网络应用程序的起源。否则，它不被定义。

以下示例显示如何从视频轨道读取捕获句柄信息。

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

CaptureHandle通过侦听对象"capturehandlechange"上的事件来监视更改MediaStreamTrack。变化发生在：

• 捕获的网络应用调用navigator.mediaDevices.setCaptureHandleConfig().
• 跨文档导航发生在捕获的 Web 应用程序中。

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

谷歌浏览器的示例：https://capture-handle.glitch.me/

3 Screen Sharing Controls API

Screen Sharing Controls API 提供了一种自定义屏幕共享 UI 的方法。可以使用此 API 创建自己的自定义屏幕共享控件或修改浏览器提供的默认控件。以下是如何使用屏幕共享控件 API 的示例：

displaySurface

具有专门用户旅程的 Web 应用，在共享窗口或屏幕时效果最好，仍然可以要求 Chrome 在媒体选择器中更突出地提供窗口或屏幕。提供的顺序保持不变，但相关窗格会被预选。

该选项的值为displaySurface：

• "browser" for tabs.
• "window" for windows.
• "monitor" for screens.

const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});

surfaceSwitching

如果surfaceSwitching设置为"include"，浏览器将显示所述按钮。如果设置为"exclude"，它将避免向用户显示该按钮。

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Ask Chrome to expose browser-level UX elements that allow
  // the user to switch the underlying track at any time,
  // initiated by the user and without prior action by the web app.
  surfaceSwitching: "include"
});

selfBrowserSurface

为了保护用户免受自身伤害，视频会议 Web 应用程序现在可以设置selfBrowserSurface为"exclude". 然后，Chrome 将从提供给用户的选项卡列表中排除当前选项卡。要包含它，请将其设置为"include"

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});

4 Conditional Focus API

Conditional Focus API 提供了一种方法来仅捕获活动窗口或应用程序，而不是捕获整个屏幕或屏幕区域。如果您想捕获用户当前正在与之交互的窗口而忽略其他窗口或桌面，这将很有用。以下是如何使用条件焦点 API 的示例：

首先，创建控制器：

const controller = new CaptureController();

// Prompt the user to share a tab, a window or a screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;

然后你可以有条件地设置焦点行为：

// Retain focus if capturing a tab dialed to example.com.
// Focus anything else.
const origin = track.getCaptureHandle().origin;
if (displaySurface == "browser" && origin == "<https://dyte.io>") {
  controller.setFocusBehavior("no-focus-change");
} else if (displaySurface != "monitor") {
  controller.setFocusBehavior("focus-captured-surface");
}

你可以在承诺解析前任意调用 setFocusBehavior()，或者在承诺解析后最多调用一次。最后一次调用会覆盖之前所有的调用。

更确切地说：

• getDisplayMedia()返回的承诺是在一个微任务上解决的。在该微任务完成后调用setFocusBehavior()会抛出错误。
• 在捕获开始后超过一秒钟再调用 setFocusBehavior()是不可行的。

谷歌浏览器的示例：https://conditional-focus.glitch.me/

结论

这些鲜为人知的屏幕共享 API 提供了在某些情况下非常有用的附加功能和控制。我们希望这篇博文能帮助您发现在 Web 应用程序中实现屏幕共享的新方法。有关这些 API 的更多信息，请查看Chrome 开发者文档。

推荐阅读：

Web端浏览器怎么实现屏幕共享? Web端屏幕共享实践

Android实现屏幕共享功能