画面共有の改善（Chrome 109）

François Beaufort

Elad Alon

ウェブアプリはすでに 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 をご覧ください。

謝辞

このドキュメントの確認にご協力いただいた Rachel Andrew 様、ありがとうございます。