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 様、ありがとうございます。