캡처 핸들로 탭 공유 개선

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 구현에서 버그를 발견했나요? 아니면 구현이 사양과 다른가요?

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

응원하기

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

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

감사의 말씀

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