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

캡처 핸들로 탭 공유 개선

François Beaufort

Elad Alon

브라우저 지원

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

몇 가지 예를 통해 이러한 이점을 확인할 수 있습니다.

예 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만 해당)의 최상위 메인 프레임에서만 사용할 수 있습니다.

샘플

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

데모

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

특성 감지

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을 사용한 경험에 대해 듣고자 합니다.

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

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

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

구현에 문제가 있습니까?

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

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

지지 표시

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

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

유용한 링크

감사의 말씀

이 기사를 검토해 주신 Joe Medley에게 감사드립니다.