이 페이지는 Cloud Translation API를 통해 번역되었습니다.

캡처 핸들로 탭 공유 개선

프랑수아 보포르

GitHub

Elad Alon

GitHub

브라우저 지원

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

몇 가지 예를 통해 알 수 있습니다.

예 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에서 샘플을 실행하여 Capture Handle을 사용해 볼 수 있습니다. 소스 코드를 확인해야 합니다.

데모

일부 데모는 다음 위치에서 이용할 수 있습니다.

특징 감지

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

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

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

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

다음 단계

다음은 가까운 미래에 웹 화면 공유 기능을 개선해줄 기능들에 대한 간략한 설명입니다.

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

의견

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

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

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

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

구현에 문제가 있나요?

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

https://new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보와 간단한 재현 안내를 포함해 주세요. Glitch는 쉽고 빠르게 재현을 공유하는 데 효과적입니다.

지원 표시

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

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

유용한 링크

감사의 말씀

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