캡처 핸들로 탭 공유 개선

François Beaufort
François Beaufort
GitHub
Elad Alon

브라우저 지원

  • Chrome: 102 <ph type="x-smartling-placeholder">
  • Edge: 102. <ph type="x-smartling-placeholder">
  • Firefox: 지원되지 않음 <ph type="x-smartling-placeholder">
  • Safari: 지원되지 않음 <ph type="x-smartling-placeholder">

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

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

예 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에서 샘플을 실행하여 캡처 핸들을 사용해 볼 수 있습니다. CANNOT TRANSLATE 소스 코드를 확인하세요.

데모

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

특성 감지

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에게 감사드립니다.