Chrome 中的屏幕共享改进 109

François Beaufort

Elad Alon

网页应用已经可以使用 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。

致谢

感谢 Rachel Andrew 审核此文档。