Screen Capture API를 사용하면 사용자가 미디어 스트림으로 캡처할 탭이나 창, 화면을 선택할 수 있습니다. 그런 다음 스트림을 녹화하거나 네트워크를 통해 다른 사용자와 공유할 수 있습니다. 이 문서에서는 웹 앱에서 캡처가 시작될 때 캡처된 탭이나 창에 포커스를 두거나 캡처 페이지에 포커스를 유지할지 여부를 제어하는 메커니즘인 조건부 포커스를 소개합니다.
브라우저 지원
조건부 포커스는 Chrome 109부터 사용할 수 있습니다.
배경
웹 앱에서 탭 또는 창 캡처를 시작하면 브라우저는 캡처된 노출 영역을 맨 앞으로 가져올지 아니면 캡처 페이지에 포커스를 두어야 하는지를 결정해야 합니다. 답변은 getDisplayMedia()를 호출하는 이유와 사용자가 선택하는 표면에 따라 다릅니다.
가상의 화상 회의 웹 앱이 있다고 가정해 보겠습니다. track.getSettings().displaySurface을 읽고 핸들 캡처를 확인하면 화상 회의 웹 앱이 사용자가 공유하기로 선택한 내용을 이해할 수 있습니다. 다음 안내를 따르세요.
- 캡처된 탭이나 창을 원격으로 제어할 수 있는 경우 화상 회의에 초점을 맞춥니다.
- 그렇지 않으면 캡처된 탭이나 창에 포커스를 맞춥니다.
위의 예에서 슬라이드 자료를 공유하는 경우 화상 회의 웹 앱이 포커스를 유지하여 사용자가 슬라이드를 원격으로 넘길 수 있습니다. 하지만 사용자가 텍스트 편집기를 공유하기로 선택한 경우 화상 회의 웹 앱은 캡처된 탭이나 창으로 포커스를 즉시 전환합니다.
Conditional Focus API 사용
CaptureController를 인스턴스화하여 getDisplayMedia()에 전달합니다. 반환된 getDiplayMedia()가 해결된 직후에 setFocusBehavior()를 호출하여 캡처된 탭이나 창에 포커스를 둘지 여부를 제어할 수 있습니다. 이 작업은 사용자가 탭 또는 창을 공유한 경우에만 수행할 수 있습니다.
const controller = new CaptureController();
// Prompt the user to share a tab, a window or a screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;
if (displaySurface == "browser") {
// Focus the captured tab.
controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface == "window") {
// Do not move focus to the captured window.
// Keep the capturing page focused.
controller.setFocusBehavior("focus-capturing-application");
}
포커스 여부를 결정할 때 Capture Handle을 고려할 수 있습니다.
// Retain focus if capturing a tab dialed to example.com.
// Focus anything else.
const origin = track.getCaptureHandle().origin;
if (displaySurface == "browser" && origin == "https://example.com") {
controller.setFocusBehavior("focus-capturing-application");
} else if (displaySurface != "monitor") {
controller.setFocusBehavior("focus-captured-surface");
}
getDisplayMedia()를 호출하기 전에 포커스를 둘지 결정할 수도 있습니다.
// Focus the captured tab or window when capture starts.
const controller = new CaptureController();
controller.setFocusBehavior("focus-captured-surface");
// Prompt the user to share their screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
setFocusBehavior()는 프로미스가 결정되기 전에 임의의 여러 번 또는 프로미스가 결정된 직후에 최대 한 번 호출할 수 있습니다. 마지막 호출이 모든 이전 호출을 재정의합니다.
더 정확하게 말하자면 다음과 같습니다.
- 반환된 getDisplayMedia() 프로미스는 마이크로태스크에서 결정됩니다. 마이크로 태스크가 완료된 후 setFocusBehavior()를 호출하면 오류가 발생합니다.
- 캡처 시작 후 1초 이상 setFocusBehavior()을 호출하면 작동하지 않습니다.
즉, 다음 스니펫 모두 실패하게 됩니다.
// Prompt the user to share their screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
// Too late, because it follows the completion of the task
// on which the getDisplayMedia() promise resolved.
// This will throw.
setTimeout(() => {
controller.setFocusBehavior("focus-captured-surface");
});
// Prompt the user to share their screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
const start = new Date();
while (new Date() - start <= 1000) {
// Idle for ≈1s.
}
// Because too much time has elapsed, the browser will have
// already decided whether to focus.
// This fails silently.
controller.setFocusBehavior("focus-captured-surface");
다음과 같은 경우에도 setFocusBehavior()를 호출하면 발생합니다.
getDisplayMedia()에서 반환한 스트림의 동영상 트랙이 'live'가 아닌 경우- 사용자가 탭이나 창이 아닌 화면을 공유한 경우
getDisplayMedia()가 반환된 프로미스가 해결된 후
샘플
Glitch에서 데모를 실행하여 조건부 포커스를 사용해 볼 수 있습니다. 소스 코드를 확인해야 합니다.
특징 감지
CaptureController.setFocusBehavior()가 지원되는지 확인하려면 다음을 사용하세요.
if (
"CaptureController" in window &&
"setFocusBehavior" in CaptureController.prototype
) {
// CaptureController.setFocusBehavior() is supported.
}
의견
Chrome팀과 웹 표준 커뮤니티는 여러분의 Conditional Focus 사용 경험에 관한 의견을 듣고자 합니다.
디자인에 대해 알려주세요.
조건부 초점에서 기대한 대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안 모델에 대한 질문이나 의견이 있으신가요?
- GitHub 저장소에서 사양 문제를 제출하거나 기존 문제에 대한 의견을 추가하세요.
구현에 문제가 있나요?
Chrome 구현과 관련된 버그를 발견했나요? 아니면 구현이 사양과 다른가요?
- https://new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보와 간단한 재현 안내를 포함해 주세요. Glitch는 코드 공유에 적합합니다.
지원 표시
조건부 포커스를 사용할 계획인가요? 공개 지원을 통해 Chrome팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 알려줍니다.
@ChromiumDev로 트윗을 보내어 어디서 어떻게 사용하고 있는지 알려주세요.
유용한 링크
감사의 말씀
히어로 이미지: Elena Taranenko
이 도움말을 검토해 주신 Rachel Andrew님께 감사드립니다.