지역 캡처로 탭 공유 개선

François Beaufort

Elad Alon

웹 플랫폼은 이미 웹 앱이 현재 탭의 동영상 트랙을 캡처하도록 허용합니다. 이제 동영상 트랙을 자르는 메커니즘인 지역 캡처가 함께 제공됩니다. 웹 앱은 현재 탭의 일부를 관심 영역으로 지정하고 브라우저가 이 영역 밖의 모든 픽셀을 자릅니다.

이전에는 웹 앱에서 동영상 트랙을 '수동으로' 자를 수 있었습니다. 즉, 웹 앱은 모든 단일 프레임을 직접 조작할 수 있습니다. 강력하지도, 성능이 좋지도 않았습니다. 지역 캡처는 이러한 단점을 해결합니다. 이제 웹 앱이 브라우저를 대신하여 작업을 수행하도록 브라우저에 지시할 수 있습니다.

지역 캡처 정보

Dynamic ContentTM로 웹사이트를 만들었습니다. 최고의 웹 앱으로, 사용자들이 공동작업으로 사용을 멈출 수 없을 때가 많습니다. 다음 단계는 가상 회의 기능을 삽입하는 것입니다. 그걸로 하기로 결정합니다. 기존 화상 회의 서비스 제공업체와 협력하여 해당 업체의 웹 앱을 교차 출처 iframe으로 삽입합니다. 화상 회의 웹 앱은 현재 탭을 동영상 트랙으로 캡처하여 원격 참여자에게 전송합니다.

</ph> <ph type="x-smartling-placeholder">

너무 빨리도 안 돼요... 사람들이 만든 동영상을 그냥 돌려보내고 싶지는 않은 것 같아요. 이 부분은 잘라내는 것이 좋습니다. 어떻게? 삽입된 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.
}

자르기 타겟 도출

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() 메서드는 자체 캡처뿐만 아니라 모든 탭 캡처 동영상 트랙에 노출됩니다. 따라서 트랙을 자르기 전에 사용자가 현재 탭을 선택했는지 확인하는 것이 좋습니다. 이 작업은 캡처 핸들을 사용하여 실행할 수 있습니다. preferCurrentTab를 사용하여 사용자가 셀프 캡처로 이동하도록 브라우저에 요청할 수도 있습니다.

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

잘리지 않은 상태로 되돌리려면 null로 cropTo()를 호출합니다.

// Stop cropping.
await track.cropTo(null);

가림 및 가려진 콘텐츠

지역 캡처의 경우 z-index이 아닌 타겟의 위치와 크기만 고려합니다. 대상을 가리는 픽셀이 캡처됩니다. 대상에서 가려진 부분은 캡처되지 않습니다.

이는 Region Capture에서 기본적으로 잘리는 결과입니다. 한 가지 대안은 요소 수준 캡처이며 향후에 자체 API가 될 것입니다. 즉, 오클루전에 상관없이 타겟과 관련된 픽셀만 캡처합니다. 이러한 API는 단순한 자르기와는 다른 보안 및 개인 정보 보호 요구사항이 있습니다.

</ph> <ph type="x-smartling-placeholder">

보안 및 개인 정보 보호

지역 캡처를 사용하면 탭의 모든 픽셀을 이미 관찰하고 있는 웹 앱에서 이러한 픽셀 중 일부를 자발적으로 삭제할 수 있습니다. 새로운 정보를 얻을 수 없기 때문에 기본적으로 안전합니다.

지역 캡처를 사용하면 원격 참여자에게 전송되는 정보를 제한할 수 있습니다. 예를 들어 일부 슬라이드는 공유하고 발표자 노트는 공유하지 않을 수 있습니다.

</ph> <ph type="x-smartling-placeholder">

로컬에서 지역 캡처를 사용해도 보안이 보장되지는 않습니다. 트랙을 다른 문서로 전달할 때도 수신 문서는 트랙 자르기를 취소하고 캡처된 모든 탭의 픽셀에 액세스할 수 있습니다.

Chrome에서 캡처된 탭의 가장자리 주위에 파란색 테두리를 그립니다. 자를 때 일반적으로 Chrome은 잘린 대상 주위에 파란색 테두리를 그립니다.

데모

Glitch에서 데모를 실행하여 리전 캡처를 사용해 볼 수 있습니다. CANNOT TRANSLATE 소스 코드를 확인하세요.

브라우저 지원

지역 캡처는 데스크톱의 Chrome 104부터 사용할 수 있습니다.

다음 단계

다음은 웹 화면 공유 기능을 개선하기 위한 가까운 미래에 대한 간단한 맛보기입니다.

• 지역 캡처는 다른 탭의 캡처를 지원합니다.
• 조건부 포커스를 사용하면 캡처된 웹 앱이 브라우저에 포커스를 캡처된 디스플레이 표면으로 전환하거나 이러한 포커스 변경을 방지하도록 지시할 수 있습니다.
• Element-level Capture API가 제공될 수 있습니다.

의견

Chrome팀과 웹 표준 커뮤니티는 Region Capture에 관한 여러분의 경험을 듣고자 합니다.

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

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

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

구현에 문제가 있습니까?

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

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

지지 표시

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

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

유용한 링크

• 사양
• 설명 자료
• TAG 검토
• Chromium 버그
• ChromeStatus.com 항목

감사의 말씀

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