캡처 핸들로 탭 공유 개선

François Beaufort
François Beaufort
GitHub
Elad Alon

브라우저 지원

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

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

다음은 이 혜택을 보여주는 몇 가지 예입니다.

예 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 코드를 삽입하는 등 캡처 웹 앱과 캡처된 웹 앱 간의 공동작업이 이론적으로 가능합니다. Capture Handle은 더 간단하고 안정적이며 안전한 메커니즘을 제공합니다. 또한 캡처된 웹 앱에서 출처 또는 전체 웹 중에서 잠재고객을 선택할 수 있습니다.

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

샘플

Glitch에서 샘플을 실행하여 캡처 핸들을 사용할 수 있습니다. 소스 코드를 확인해야 합니다.

데모

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

기능 감지

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

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

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

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

다음 단계

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

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

의견

Chrome팀과 웹 표준 커뮤니티는 Capture Handle 사용 경험에 관한 의견을 듣고자 합니다.

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

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

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

구현에 문제가 있나요?

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

응원하기

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

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

감사의 말씀

이 도움말을 검토해 주신 조 미들리님께 감사드립니다.