이미 Screen Capture API를 사용하여 웹 플랫폼에서 탭, 창, 화면을 공유하는 기능이 지원되고 있습니다. 간단히 말해 getDisplayMedia()
를 사용하면 사용자가 미디어 스트림으로 캡처할 화면 또는 화면의 일부 (예: 창)를 선택할 수 있습니다. 그런 다음 스트림을 녹화하거나 네트워크를 통해 다른 사용자와 공유할 수 있습니다. 이 도움말에서는 개인 정보를 더욱 안전하게 보호하고 개인 정보가 실수로 공유되는 일을 방지하기 위해 최근 API에 관한 몇 가지 변경사항을 소개합니다.
다음은 개인 정보를 보호하는 화면 공유에 사용할 수 있는 관리 기능입니다.
displaySurface
옵션은 웹 앱이 특정 디스플레이 표면 유형 (탭, 창, 화면)을 제공하는 것을 선호함을 나타낼 수 있습니다.monitorTypeSurfaces
옵션을 사용하여 사용자가 전체 화면을 공유하지 못하게 할 수 있습니다.surfaceSwitching
옵션은 Chrome에서 사용자가 공유 탭 간에 동적으로 전환하도록 허용해야 하는지를 나타냅니다.selfBrowserSurface
옵션을 사용하여 사용자가 현재 탭을 공유하지 못하도록 할 수 있습니다. 이렇게 하면 '거울의 전당' 효과를 방지할 수 있습니다.systemAudio
옵션을 사용하면 Chrome에서 사용자에게 관련된 오디오 캡처만 제공할 수 있습니다.
getDisplayMedia()
의 변경사항
getDisplayMedia()
에 다음과 같은 변경사항이 적용되었습니다.
displaySurface
옵션
창이나 화면을 공유할 때 가장 잘 작동하는 특수한 사용자 경험을 갖춘 웹 앱은 여전히 미디어 선택 도구에서 창이나 화면을 더 눈에 띄게 표시하도록 Chrome에 요청할 수 있습니다. 오퍼의 순서는 변경되지 않지만 관련 창이 미리 선택됩니다.
displaySurface
옵션의 값은 다음과 같습니다.
- 탭의 경우
"browser"
- Windows의 경우
"window"
- 화면의
"monitor"
const stream = await navigator.mediaDevices.getDisplayMedia({
// Pre-select the "Window" pane in the media picker.
video: { displaySurface: "window" },
});
특정 창이나 화면을 미리 선택하는 옵션은 제공되지 않습니다. 이는 웹 앱이 사용자에게 너무 많은 권한을 부여하도록 설계된 것입니다.
monitorTypeSurfaces
옵션
직원 오류를 통해 회사의 개인 정보가 유출되지 않도록 보호하기 위해 이제 화상 회의 웹 앱에서 monitorTypeSurfaces
를 "exclude"
로 설정할 수 있습니다. 그러면 Chrome에서 미디어 선택 도구의 화면이 제외됩니다. 포함하려면 "include"
로 설정합니다. 현재 monitorTypeSurfaces
의 기본값은 "include"
이지만 기본값은 향후 변경될 수 있으므로 웹 앱에서는 명시적으로 설정하는 것이 좋습니다.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
// Remove the "Entire Screen" pane in the media picker.
monitorTypeSurfaces: "exclude",
});
명시적 monitorTypeSurfaces: "exclude"
는 displaySurface: "monitor"
와 상호 배타적입니다.
surfaceSwitching
옵션
전체 화면을 공유하는 이유 중 하나는 세션 중에 여러 표시 경로를 원활하게 공유하기 위해 전환하고 싶기 때문입니다. 이 문제를 해결하기 위해 Chrome에서는 이제 사용자가 여러 탭 공유 간에 동적으로 전환할 수 있는 버튼을 노출합니다. 이전에는 이 '탭 공유하기' 버튼이 이전에 Chrome 확장 프로그램에서 제공되었으며 이제 getDisplayMedia()
를 호출하는 모든 웹 앱에서 사용할 수 있습니다.
surfaceSwitching
가 "include"
로 설정되면 브라우저에서 해당 버튼을 노출합니다. "exclude"
로 설정하면 사용자에게 이 버튼이 표시되지 않습니다. 시간이 지남에 따라 Chrome에서 기본값을 변경할 수도 있으므로 웹 앱에서는 명시적 값을 설정하는 것이 좋습니다.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
// Ask Chrome to expose browser-level UX elements that allow
// the user to switch the underlying track at any time,
// initiated by the user and without prior action by the web app.
surfaceSwitching: "include"
});
selfBrowserSurface
옵션
화상 회의 시나리오에서 사용자가 화상 회의 탭 자체를 선택하는 실수를 하는 경우가 종종 있습니다. 이로 인해 '거울의 방' 효과, 하울링, 일반적인 혼란이 발생합니다.
화상 회의 웹 앱에서 사용자를 본인으로부터 보호하기 위해 이제 selfBrowserSurface
을 "exclude"
(으)로 설정할 수 있습니다. 그러면 Chrome에서 사용자에게 제공되는 탭 목록에서 현재 탭을 제외합니다. 포함하려면 "include"
로 설정합니다. 현재 selfBrowserSurface
의 기본값은 "exclude"
이지만 기본값은 향후 변경될 수 있으므로 웹 앱에서는 명시적으로 설정하는 것이 좋습니다.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
selfBrowserSurface: "exclude" // Avoid 🦶🔫.
});
명시적 selfBrowserSurface: "exclude"
는 preferCurrentTab: true
와 상호 배타적입니다.
systemAudio
옵션
getDisplayMedia()
를 사용하면 동영상과 함께 오디오를 캡처할 수 있습니다. 하지만 모든 오디오가 동일하게 만들어진 것은 아닙니다. 다음과 같은 화상 회의 웹 앱을 고려해 보세요.
- 사용자가 다른 탭을 공유하는 경우 오디오를 캡처하는 것도 적합합니다.
- 반면 시스템 오디오에는 원격 참여자의 오디오가 포함되므로 해당 참여자에게 다시 전송해서는 안 됩니다.
향후 캡처에서 일부 오디오 소스를 제외할 수 있습니다. 하지만 지금은 화상 회의 웹 앱에서 시스템 오디오를 캡처하지 않는 것이 가장 좋습니다. 이전에는 사용자가 선택한 디스플레이 표면을 확인하고 화면 공유를 선택한 경우 오디오 트랙을 중지하는 방식으로 실행할 수 있었습니다. 하지만 일부 사용자가 시스템 오디오 공유를 위해 체크박스를 명시적으로 선택한 다음 원격 참여자에게 오디오가 수신되지 않는다는 메시지를 받으면 혼란스러워하는 사소한 문제가 발생합니다.
systemAudio
를 "exclude"
로 설정하면 웹 앱에서 혼합된 신호로 사용자를 혼란스럽게 하지 않을 수 있습니다. Chrome은 탭과 창을 따라 오디오를 캡처하지만 화면 옆에서는 캡처하지 않습니다.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true, // Ask to capture audio; caveat follows.
systemAudio: "exclude" // Do not offer to capture *system* audio.
});
현재 systemAudio
의 기본값은 "include"
이지만 기본값은 향후 변경될 수 있으므로 웹 앱에서는 명시적으로 설정하는 것이 좋습니다.
데모
Glitch에서 데모를 실행하여 이러한 화면 공유 컨트롤을 사용해 볼 수 있습니다. 소스 코드를 확인해야 합니다.
브라우저 지원
displaySurface
,surfaceSwitching
,selfBrowserSurface
는 데스크톱용 Chrome 107에서 사용할 수 있습니다.
브라우저 지원
- 105
- 105
- x
- x
systemAudio
버전은 데스크톱 Chrome 105에서 사용할 수 있습니다.
브라우저 지원
- 119
- 119
- x
- x
monitorTypeSurfaces
앱은 데스크톱용 Chrome 119에서 사용할 수 있습니다.
의견
Chrome팀과 웹 표준 커뮤니티는 이러한 화면 공유 제어 기능을 사용한 사용자의 경험에 대해 듣고자 합니다.
디자인에 대해 알려주세요.
화면 공유 제어에 예상대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안 모델에 대한 질문이나 의견이 있으신가요?
- GitHub 저장소에서 사양 문제를 제출하거나 기존 문제에 대한 의견을 추가하세요.
구현에 문제가 있나요?
Chrome 구현과 관련된 버그를 발견했나요? 아니면 구현이 사양과 다른가요?
- https://new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보와 간단한 재현 안내를 포함해 주세요. Glitch는 코드 공유에 적합합니다.
지원 표시
이러한 화면 공유 컨트롤을 사용할 계획이신가요? 공개 지원을 통해 Chrome팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 알려줍니다.
@ChromiumDev로 트윗을 보내어 어디서 어떻게 사용하고 있는지 알려주세요.
유용한 링크
- 사양
displaySurface
설명monitorTypeSurfaces
설명surfaceSwitching
설명selfBrowserSurface
설명systemAudio
설명- TAG 검토
감사의 말씀
히어로 이미지: John Schnobrich
이 도움말을 검토해 주신 Rachel Andrew님께 감사드립니다.