Chrome 109의 화면 공유 개선

François Beaufort
François Beaufort
GitHub
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");
}

자세한 내용은 조건부 포커스를 사용한 더 나은 화면 공유를 참고하세요.

로컬 오디오 재생 억제

동료들은 보통 회의실에 모여서 노트북을 통해 전용 모니터와 스피커가 있는 회의실 내 회의 솔루션으로 발표하는 경우가 많습니다. 발표자는 일반적으로 자신의 노트북을 음소거하고 더 큰 소리를 내는 외부 스피커를 사용합니다. 이렇게 하면 오디오가 동영상과 동기화됩니다. 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에게 감사드립니다.