개인 정보 보호 화면 공유 제어

이미 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에서 사용할 수 있습니다.

• systemAudio 버전은 데스크톱 Chrome 105에서 사용할 수 있습니다.

• monitorTypeSurfaces 앱은 데스크톱용 Chrome 119에서 사용할 수 있습니다.

의견

Chrome팀과 웹 표준 커뮤니티는 이러한 화면 공유 제어 기능을 사용한 사용자의 경험에 대해 듣고자 합니다.

디자인에 대해 알려주세요.

화면 공유 제어에 예상대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안 모델에 대한 질문이나 의견이 있으신가요?

• GitHub 저장소에서 사양 문제를 제출하거나 기존 문제에 대한 의견을 추가하세요.

구현에 문제가 있나요?

Chrome 구현과 관련된 버그를 발견했나요? 아니면 구현이 사양과 다른가요?

• https://new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보와 간단한 재현 안내를 포함해 주세요. Glitch는 코드 공유에 적합합니다.

지원 표시

이러한 화면 공유 컨트롤을 사용할 계획이신가요? 공개 지원을 통해 Chrome팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 알려줍니다.

@ChromiumDev로 트윗을 보내어 어디서 어떻게 사용하고 있는지 알려주세요.

유용한 링크

• 사양
• displaySurface 설명
• monitorTypeSurfaces 설명
• surfaceSwitching 설명
• selfBrowserSurface 설명
• systemAudio 설명
• TAG 검토

감사의 말씀

히어로 이미지: John Schnobrich

이 도움말을 검토해 주신 Rachel Andrew님께 감사드립니다.