画面共有の改善（Chrome 109）

François Beaufort

GitHub

Ead 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");
}

詳しくは、条件付きフォーカスによる画面共有の改善をご覧ください。

ローカル音声の再生を抑制する

同僚は一部屋に集まって、そのうちの 1 人がノートパソコンから専用のモニターとスピーカーを備えた会議室ソリューションでプレゼンテーションを行うのが一般的です。プレゼンターは通常、自分のノートパソコンをミュートし、外部スピーカーは音量が大きいものを使用します。これにより、音声が動画と同期されるようになります。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 に感謝します。