웹 플랫폼에서는 이미 웹 앱이 현재 탭의 동영상 트랙을 캡처할 수 있도록 허용합니다. 이제 동영상 트랙을 자르는 메커니즘인 지역 캡처가 함께 제공됩니다. 웹 앱은 현재 탭의 일부를 관심 영역으로 지정하고 브라우저는 이 영역 밖의 모든 픽셀을 자릅니다.
이전에는 웹 앱에서 동영상 트랙을 '수동으로' 자를 수 있었습니다. 즉, 웹 앱이 모든 프레임을 직접 조작할 수 있었습니다. 이 방식은 강력하지도, 성능이 우수하지도 않았습니다. 지역 캡처는 이러한 단점을 해결합니다. 이제 웹 앱이 브라우저를 대신하여 작업을 실행하도록 지시할 수 있습니다.
영역 캡처 정보
Dynamic ContentTM로 웹사이트를 만드셨군요. 최고의 웹 앱이며, 많은 사람들이 함께 사용하기 때문에 쉬울 수 없습니다. 다음 단계는 가상 회의 기능을 삽입하는 것입니다. 그것으로 하기로 결정합니다. 웹 앱을 교차 출처 iframe으로 삽입하여 기존 화상 회의 서비스 제공업체와 협력합니다. 화상 회의 웹 앱에서 현재 탭을 화상 트랙으로 캡처하여 원격 참여자에게 전송합니다.
그렇게 하면 안 돼요... 사람들의 동영상을 그들에게 다시 전송하고 싶지는 않을 것입니다. 해당 부분을 잘라내 사용하는 것이 좋습니다. 어떻게? 삽입된 iframe은 사용자가 노출하는 콘텐츠와 위치를 알 수 없으므로 몇 가지 도움 없이는 잘릴 수 없습니다. 이론적으로 원하는 좌표를 전달할 수 있습니다. 하지만 사용자가 창 크기를 조절하면 어떻게 될까요? 표시 영역을 스크롤할까요? 확대 또는 축소하시겠습니까? 레이아웃이 변경되는 방식으로 페이지와 상호작용합니까? 캡처된 iframe에 새 좌표를 보내도 타이밍 문제로 인해 일부 프레임이 잘못 잘릴 수 있습니다.
그럼 지역 캡처를 사용하겠습니다. 페이지에 기본 콘텐츠를 포함하는 Element(<div>일 수 있음)이 있습니다. 이름을 mainContentArea로 지정하겠습니다. 화상 회의 웹 앱에서 이 요소의 경계 상자로 정의된 영역을 원격으로 캡처하고 공유하도록 하려고 합니다. 따라서 mainContentArea에서 CropTarget를 얻습니다. 이 CropTarget을 화상 회의 웹 앱에 전달합니다. 이 CropTarget를 사용하여 동영상 트랙을 자른 후에 해당 트랙의 프레임은 mainContentArea의 경계 상자 내에 있는 픽셀로만 구성됩니다. mainContentArea에서 크기, 모양 또는 위치를 변경하면 웹 앱에서 추가로 입력할 필요 없이 동영상 트랙이 계속 재생됩니다.
아래 단계를 다시 한 번 살펴보겠습니다.
원하는 요소를 입력으로 사용하여 CropTarget.fromElement()를 호출하여 웹 앱에서 CropTarget을 정의합니다.
// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
화상 회의 웹 앱에 CropTarget을 전달합니다.
// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);
화상 회의 웹 앱이 기본 웹 앱에서 수신한 자르기 타겟으로 셀프 캡처 동영상 트랙에서 cropTo()를 호출하여 CropTarget에서 정의한 영역으로 트랙을 자르도록 브라우저에 요청합니다.
// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();
// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);
// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.
그러셨군요. 완료되었습니다.
자세히 알아보기
특징 감지
CropTarget.fromElement()가 지원되는지 확인하려면 다음을 사용하세요.
if ("CropTarget" in self && "fromElement" in CropTarget) {
// Deriving a target is supported.
}
CropTarget 파생
mainContentArea라는 요소에 집중해 보겠습니다. 여기에서 CropTarget를 가져오려면 CropTarget.fromElement(mainContentArea)를 호출합니다. 성공하면 반환된 프로미스는 새 CropTarget 객체로 확인됩니다. 그렇지 않은 경우 부당한 개수의 CropTarget 객체를 발급한 경우 거부됩니다.
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
Element와 달리 CropTarget 객체는 직렬화가 가능합니다. 예를 들어 Window.postMessage()를 사용하여 다른 문서에 전달할 수 있습니다.
자르기
탭 캡처 시 동영상 트랙은 MediaStreamTrack의 서브클래스인 BrowserCaptureMediaStreamTrack로 인스턴스화됩니다. 이 서브클래스는 cropTo()를 노출합니다. track.cropTo(cropTarget)를 호출하여 mainContentArea (cropTarget이 파생된 요소)의 윤곽으로 자르기를 시작합니다.
성공하면 프로미스는 모든 후속 동영상 프레임이 mainContentArea의 경계 상자 내에 있는 픽셀로 구성된다는 보장이 있을 때 해결됩니다.
실패하면 프로미스가 거부됩니다. 다음과 같은 경우에 발생합니다.
CropTarget이(가) 다른 탭에서 발급되었습니다. (잠시만 기다려 주세요.)CropTarget이(가) 더 이상 존재하지 않는 요소에서 파생되었습니다.- 트랙에 복제가 있습니다. (문제 1509418)
- 현재 트랙이 자체 캡처 동영상 트랙이 아닙니다. 아래를 참조하세요.
cropTo() 메서드는 자체 캡처를 위해서가 아니라 모든 탭 캡처 동영상 트랙에 노출됩니다. 따라서 트랙을 자르기 전에 사용자가 현재 탭을 선택했는지 확인하는 것이 좋습니다. Capture Handle을 사용하면 됩니다. preferCurrentTab를 사용하여 사용자가 자체 캡처를 하도록 브라우저에 요청할 수도 있습니다.
// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);
잘리지 않은 상태로 되돌리려면 null로 cropTo()를 호출합니다.
// Stop cropping.
await track.cropTo(null);
콘텐츠를 가림
지역 캡처의 경우 Z-색인이 아닌 대상의 위치와 크기만 설정합니다. 타겟을 가리는 픽셀이 캡처됩니다. 대상에서 가려진 부분은 캡처되지 않습니다.
이는 지역 캡처가 기본적으로 잘리는 결과입니다. 향후 자체 API가 될 한 가지 대안은 요소 수준 캡처입니다. 즉, 오클루전과 관계없이 타겟과 연결된 픽셀만 캡처합니다. 이러한 API에는 간단한 자르기와 보안 및 개인 정보 보호 요구사항이 다릅니다.
보안 및 개인 정보 보호
Region Capture를 사용하면 이미 탭의 모든 픽셀을 관찰하고 있는 웹 앱이 이러한 픽셀 중 일부를 자발적으로 삭제할 수 있습니다. 새로운 정보를 얻을 수 없으므로 완전히 안전합니다.
지역 캡처를 사용하면 원격 참여자에게 전송되는 정보를 제한할 수 있습니다. 예를 들어 발표자 노트가 아닌 일부 슬라이드만 공유할 수 있습니다.
메모를 원격으로 공유하는 것은 매우 바람직하지 않습니다. Cue Region Capture를 사용합니다.
로컬에서 Region Capture가 보안을 보장하지 않습니다. 트랙을 다른 문서에 전달할 때 수신하는 문서는 계속 트랙을 자르고 캡처된 탭의 모든 픽셀에 액세스할 수 있습니다.
Chrome에서 캡처된 탭의 가장자리 주위에 파란색 테두리를 그립니다. 자를 때 Chrome에서는 일반적으로 잘린 대상 주위에 파란색 테두리를 그립니다.
데모
Glitch에서 데모를 실행하여 지역 캡처를 사용해 볼 수 있습니다. 소스 코드를 확인해야 합니다.
브라우저 지원
브라우저 지원
- 104
- 104
- x
- x
지역 캡처는 데스크톱의 Chrome 104에서만 사용할 수 있습니다.
다음 단계
다음은 가까운 미래에 웹 화면 공유 기능을 개선해 줄 기능들에 대한 살짝 미리보기입니다.
- 지역 캡처는 다른 탭의 캡처를 지원합니다.
- 조건부 포커스를 사용하면 캡처된 웹 앱이 브라우저에서 캡처된 디스플레이 표면으로 포커스를 전환하거나 이러한 포커스 변경을 피하도록 지시할 수 있습니다.
- Element-level Capture API가 제공될 수 있습니다.
의견
Chrome팀과 웹 표준 커뮤니티는 귀하의 Region Capture 사용 경험에 대해 듣고자 합니다.
디자인에 대해 알려주세요.
Region Capture에서 예상한 대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안 모델에 대한 질문이나 의견이 있으신가요?
- GitHub 저장소에서 사양 문제를 제출하거나 기존 문제에 대한 의견을 추가하세요.
구현에 문제가 있나요?
Chrome 구현과 관련된 버그를 발견했나요? 아니면 구현이 사양과 다른가요?
- https://new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보와 간단한 재현 안내를 포함해 주세요. Glitch는 쉽고 빠르게 재현을 공유하는 데 효과적입니다.
지원 표시
지역 캡처를 사용할 계획인가요? 공개 지원을 통해 Chrome팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 알려줍니다.
@ChromiumDev로 트윗을 보내어 어디서 어떻게 사용하고 있는지 알려주세요.
유용한 링크
감사의 말씀
이 도움말을 검토해 주신 Joe Medley님께 감사드립니다.