Chrome 109의 화면 공유 개선

프랑수아 보포르

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님께 감사드립니다.