Chrome 109 改善分享螢幕畫面功能

François Beaufort

GitHub

Elad Alon

GitHub

網頁應用程式目前已可使用 getDisplayMedia()，擷取分頁、視窗或畫面做為 MediaStream。Chrome 109 版本提供下列改善項目：

• 開始分享螢幕畫面時，條件式焦點可讓擷取網頁應用程式控制瀏覽器是否聚焦於擷取的分頁或視窗，或者擷取分頁是否保持運作。
• suppressLocalAudioPlayback 選項可控制是否要透過本機揚聲器播放分頁中播放的音訊。

條件式重點

網頁應用程式現在可以使用條件式聚焦功能，控制在開始擷取時是否要聚焦於已擷取的分頁或視窗，或者擷取頁面是否應持續聚焦。

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() 搭配使用。請參閱 錯誤 1381959。

特別銘謝

主頁橫幅由 Brett Jordan 提供。

感謝 Rachel Andrew 協助審查這篇文章。