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

François Beaufort
François Beaufort
GitHub
Elad Alon

Screen Capture API를 사용하면 웹 플랫폼에서 탭, 창, 화면을 이미 공유할 수 있습니다. 즉, getDisplayMedia()를 사용하면 사용자가 미디어 스트림으로 캡처할 화면 또는 화면의 일부 (예: 창)를 선택할 수 있습니다. 그런 다음 이 스트림을 네트워크를 통해 녹화하거나 다른 사용자와 공유할 수 있습니다. 최근 개인 정보를 더 효과적으로 보호하고 의도치 않은 개인 정보 공유를 방지하기 위해 API가 변경되었습니다.

다음은 개인 정보 보호 화면 공유에 사용할 수 있는 컨트롤 목록입니다.

  • displaySurface 옵션은 웹 앱이 특정 디스플레이 표시 경로 유형 (탭, 창 또는 화면)을 제공하는 것을 선호함을 나타낼 수 있습니다.
  • monitorTypeSurfaces 옵션을 사용하면 사용자가 전체 화면을 공유하지 못하도록 할 수 있습니다.
  • surfaceSwitching 옵션은 Chrome에서 사용자가 공유 탭 간에 동적으로 전환할 수 있는지 여부를 나타냅니다.
  • selfBrowserSurface 옵션을 사용하면 사용자가 현재 탭을 공유하지 못하도록 할 수 있습니다. 이렇게 하면 '거울의 방' 효과를 방지할 수 있습니다.
  • systemAudio 옵션을 사용하면 Chrome에서 사용자에게 관련성 높은 오디오 캡처만 제공할 수 있습니다.

getDisplayMedia()의 변경사항

getDisplayMedia()가 다음과 같이 변경되었습니다.

displaySurface 옵션

창이나 화면 공유에 가장 적합한 특수한 사용자 여정이 있는 웹 앱은 Chrome에 미디어 선택 도구에서 창이나 화면을 더 눈에 띄게 표시해 달라고 요청할 수 있습니다. 제품 순서는 변경되지 않지만 관련 창이 미리 선택됩니다.

displaySurface 옵션의 값은 다음과 같습니다.

  • "browser": 탭
  • "window": Windows용
  • "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()를 호출하는 모든 웹 앱에서 사용할 수 있습니다.

여러 탭 공유 간에 동적으로 전환하는 데 사용되는 버튼의 스크린샷
Chrome의 '대신 이 탭 공유' 버튼

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()를 사용하면 동영상과 함께 오디오를 캡처할 수 있습니다. 하지만 모든 오디오가 동일한 것은 아닙니다. 화상 회의 웹 앱을 고려하세요. - 사용자가 다른 탭을 공유하는 경우 오디오도 캡처하는 것이 좋습니다. - 반면 시스템 오디오에는 원격 참여자의 자체 오디오가 포함되며 원격 참여자에게 다시 전송해서는 안 됩니다.

향후 캡처에서 일부 오디오 소스를 제외할 수 있습니다. 하지만 지금은 화상 회의 웹 앱에서 시스템 오디오를 캡처하지 않는 것이 가장 좋습니다. 이전에는 사용자가 선택한 디스플레이 표시 경로를 확인하고 화면 공유를 선택한 경우 오디오 트랙을 중지하여 이를 실행할 수 있었습니다. 하지만 이로 인해 시스템 오디오를 공유하기 위해 체크박스를 명시적으로 선택했는데 원격 참여자가 오디오가 수신되지 않는다고 말하는 경우 일부 사용자가 혼란스러워하는 사소한 문제가 발생합니다.

탭 오디오 공유가 포함된 미디어 선택 도구의 스크린샷
탭 오디오 공유는 'Chrome 탭' 창에서는 제공되지만 '전체 화면' 창에서는 제공되지 않습니다.

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

브라우저 지원

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 지원되지 않음
  • Safari: 지원되지 않음

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

브라우저 지원

  • Chrome: 119
  • Edge: 119.
  • Firefox: 지원되지 않음
  • Safari: 지원되지 않음

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

의견

Chrome팀과 웹 표준 커뮤니티에서는 화면 공유 컨트롤 사용 경험에 관한 의견을 받고자 합니다.

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

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

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

구현에 문제가 있나요?

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

  • https://new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보와 재현을 위한 간단한 안내를 포함해야 합니다. Glitch는 코드를 공유하는 데 적합합니다.

응원하기

이러한 화면 공유 컨트롤을 사용하시겠어요? 공개적으로 지원하면 Chrome팀에서 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

@ChromiumDev에 트윗을 보내 사용 중이신 위치와 방법을 알려주세요.

감사의 말씀

검토해 주신 레이첼 앤드류님, 감사합니다.