캡처 핸들로 탭 공유 개선

François Beaufort
François Beaufort
GitHub
Elad Alon

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: not supported.
  • Safari: not supported.

이제 웹 플랫폼에는 캡처 및 캡처된 웹 앱 간의 공동작업을 지원하는 메커니즘인 캡처 핸들이 제공됩니다. 캡처 핸들을 사용하면 캡처하는 웹 앱이 인체공학적으로 자신 있게 캡처된 웹 앱을 식별할 수 있습니다(캡처된 웹 앱이 선택한 경우).

몇 가지 예시를 통해 이점을 설명합니다.

예 1: 화상 회의 웹 앱이 프레젠테이션 웹 앱을 캡처하는 경우 화상 회의 웹 앱은 슬라이드 간에 이동할 수 있는 컨트롤을 사용자에게 노출할 수 있습니다. 컨트롤이 화상 회의 웹 앱에 직접 삽입되어 있으므로 사용자가 화상 회의 탭과 발표 탭 간에 반복적으로 전환할 필요가 없습니다. 이 부담이 사라지면 사용자는 이제 프레젠테이션 전달에 더 집중할 수 있습니다.

예 2: 캡처된 표면이 캡처되는 위치로 다시 렌더링되면 '거울의 방' 효과가 발생합니다. 특히 사용자가 화상 회의 통화가 진행 중인 탭을 캡처하도록 선택하고 화상 회의 웹 앱이 로컬 미리보기를 렌더링하는 경우 이 문제가 발생합니다. 캡처 핸들을 사용하면 웹 앱이 로컬 미리보기를 억제하는 등 자체 캡처를 감지하고 완화할 수 있습니다.

거울의 방 효과 그림

캡처 핸들 정보

캡처 핸들은 두 가지 상호 보완적인 부분으로 구성됩니다.

  • 캡처된 웹 앱은 navigator.mediaDevices.setCaptureHandleConfig()를 사용하여 일부 출처에 특정 정보를 노출하도록 선택할 수 있습니다.
  • 캡처하는 웹 앱은 MediaStreamTrack 객체에서 getCaptureHandle()를 사용하여 해당 정보를 읽을 수 있습니다.

캡처된 측면

웹 앱은 캡처하려는 웹 앱에 정보를 노출할 수 있습니다. 이렇게 하려면 다음 멤버로 구성된 선택적 객체와 함께 navigator.mediaDevices.setCaptureHandleConfig()를 호출합니다.

  • handle: 최대 1,024자의 문자열일 수 있습니다.
  • exposeOrigin: true인 경우 캡처된 웹 앱의 출처가 캡처 웹 앱에 노출될 수 있습니다.
  • permittedOrigins: 유효한 값은 (i) 빈 배열, (ii) 단일 항목 "*"이 있는 배열, (iii) 출처 배열입니다. permittedOrigins가 단일 항목 "*"로 구성된 경우 모든 캡처 웹 앱에서 CaptureHandle를 관찰할 수 있습니다. 그렇지 않으면 원본이 permittedOrigins에 있는 캡처 웹 앱에만 관찰할 수 있습니다.

다음 예에서는 임의로 생성된 UUID를 핸들 및 캡처하는 웹 앱의 출처로 노출하는 방법을 보여줍니다.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

캡처된 웹 앱은 캡처되고 있는지 알지 못합니다. 단, 캡처하는 웹 앱이 CaptureHandle 정보를 사용하여 캡처된 웹 앱과 통신하는 경우 (예: 작업자를 통한 메시지 또는 공유 클라우드 인프라 사용)는 예외입니다.

캡처 측

캡처 웹 앱은 동영상 MediaStreamTrack를 보유하며 해당 MediaStreamTrack에서 getCaptureHandle()를 호출하여 캡처 핸들 정보를 읽을 수 있습니다. 이 호출은 캡처 핸들을 사용할 수 없거나 캡처 웹 앱이 이를 읽을 수 없는 경우 null를 반환합니다. 캡처 핸들을 사용할 수 있고 캡처 웹 앱이 permittedOrigins에 추가되면 이 호출은 다음 구성원이 있는 객체를 반환합니다.

  • handle: navigator.mediaDevices.setCaptureHandleConfig()로 캡처된 웹 앱에 의해 설정된 문자열 값입니다.
  • origin: exposeOrigin이 true로 설정된 경우 캡처된 웹 앱의 출처입니다. 그렇지 않으면 정의되지 않습니다.

다음 예에서는 동영상 트랙에서 캡처 핸들 정보를 읽는 방법을 보여줍니다.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

MediaStreamTrack 객체에서 "capturehandlechange" 이벤트를 수신 대기하여 CaptureHandle 변경사항을 모니터링합니다. 다음과 같은 경우에 변경사항이 적용됩니다.

  • 캡처된 웹 앱이 navigator.mediaDevices.setCaptureHandleConfig()을 호출합니다.
  • 캡처된 웹 앱에서 교차 문서 탐색이 발생합니다.
videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

보안 및 개인 정보 보호

캡처하는 웹 앱과 캡처된 웹 앱 간의 공동작업은 이론적으로 오늘날 캡처된 웹 앱에 '매직 픽셀'을 삽입하거나 동영상 스트림에 QR 코드를 삽입하는 등의 방법으로 가능합니다. 캡처 핸들은 더 간단하고 안정적이며 안전한 메커니즘을 제공합니다. 또한 캡처된 웹 앱이 출처 또는 전체 웹 중에서 잠재고객을 선택할 수 있습니다.

navigator.mediaDevices.setCaptureHandleConfig()는 보안 탐색 컨텍스트 (HTTPS만 해당)의 최상위 기본 프레임에서만 사용할 수 있습니다.

샘플

샘플을 실행하여 캡처 핸들을 사용해 볼 수 있습니다.

데모

일부 데모는 다음에서 확인할 수 있습니다.

기능 감지

getCaptureHandle()가 지원되는지 확인하려면 다음을 사용하세요.

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

navigator.mediaDevices.setCaptureHandleConfig()가 지원되는지 확인하려면 다음을 사용하세요.

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

다음 단계

웹에서 화면 공유를 개선하기 위해 가까운 시일 내에 제공될 예정인 기능을 미리 살펴보세요.

  • 영역 캡처를 사용하면 현재 탭의 디스플레이 캡처에서 파생된 동영상 트랙을 자를 수 있습니다.
  • 조건부 포커스를 사용하면 캡처 웹 앱이 브라우저에 캡처된 디스플레이 표면으로 포커스를 전환하거나 이러한 포커스 변경을 방지하도록 지시할 수 있습니다.

의견

Chrome팀과 웹 표준 커뮤니티는 캡처 핸들 사용 경험에 관한 의견을 듣고 싶습니다.

디자인에 대한 정보 제공

캡처 핸들이 예상대로 작동하지 않는 부분이 있나요? 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안 모델에 관해 궁금한 점이나 의견이 있으신가요?

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

구현에 문제가 있나요?

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

지원 표시

캡처 핸들을 사용할 계획인가요? 공개적인 지원은 Chrome팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

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

감사의 말씀

이 도움말을 검토해 주신 Joe Medley에게 감사드립니다.