브라우저 지원
- 102
- 102
- x
- x
이제 웹 플랫폼에 캡처 및 캡처된 웹 앱 간의 공동작업을 지원하는 메커니즘인 캡처 핸들이 함께 제공됩니다. 캡처 핸들을 사용하면 캡처된 웹 앱에서 캡처된 웹 앱을 인체 공학적이고 자신 있게 식별할 수 있습니다(캡처된 웹 앱이 선택된 경우).
몇 가지 예를 통해 알 수 있습니다.
예 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님께 감사드립니다.