Chrome 中的屏幕共享改进 109

François Beaufort

GitHub

Elad Alon

GitHub

Web 应用已经可以使用 getDisplayMedia() 将标签页、窗口或屏幕捕获为 MediaStream。从 Chrome 109 开始，您可以利用以下改进：

• 屏幕共享开始后，条件聚焦可让捕获的 Web 应用控制浏览器是否聚焦捕获的标签页或窗口，或者是否让捕获的标签页保持活动状态。
• suppressLocalAudioPlayback 选项用于控制是否通过用户的本地扬声器播放在标签页中播放的音频。

条件聚焦

现在，借助条件对焦，Web 应用可以控制拍摄的标签页或窗口在拍摄开始时是否聚焦，或者拍摄页面是否应保持焦点。

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;
if (displaySurface === "browser") {
  // Focus the captured tab.
  controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface === "window") {
  // Do not move focus to the captured window.
  // Keep the capturing page focused.
  controller.setFocusBehavior("no-focus-change");
}

如需了解详情，请参阅使用条件焦点提升屏幕共享体验。

禁止播放本地音频

同事们常常会聚到房间里，通过笔记本电脑演示内容，而会议室内会议解决方案则配有专用显示器和扬声器。演示者通常会将自己的笔记本电脑静音，并使用通常音量较高的外部扬声器，这也可以确保音频与视频保持同步。使用 suppressLocalAudioPlayback 音频约束可以节省时间。如果设置为 true，则表示在录制开始时，浏览器应停止将音频中继到本地扬声器。此限制条件的默认值为 false。

// Prompt the user to share a tab, a window or a screen with audio.
// If successful, stop the captured audio from being played out over
// the local device’s speakers.
const stream = await navigator.mediaDevices.getDisplayMedia({
  audio: { suppressLocalAudioPlayback: true },
});
const [audioTrack] = stream.getAudioTracks();
const settings = audioTrack.getSettings();
console.log(settings.suppressLocalAudioPlayback); // true

截至撰写本文时，suppressLocalAudioPlayback 尚不支持 applyConstraints()。请参阅 bug 1381959。

致谢

主打图片：Brett Jordan

感谢 Rachel Andrew 对本文进行审核。