배경 흐리게 처리는 최신 화상 회의 애플리케이션에서 인기 있는 기능입니다. 이 기능은 카메라 앞에 있는 사람과 배경을 자동으로 구분하므로 대상에게 초점을 맞추면서 주변을 흐리게 처리합니다.
Background Blur API는 웹에 배경 숨김 기능을 제공합니다. 이 API를 사용하면 웹 앱이 운영체제에 카메라의 동영상 피드에 배경 흐리게 처리 효과를 효율적으로 적용하도록 요청할 수 있습니다. 이렇게 하면 TensorFlow.js, Mediapipe와 같은 머신러닝 프레임워크 또는 각 동영상 프레임을 개별적으로 처리해야 하는 클라우드 기반 솔루션을 통해 효과를 수동으로 적용하는 데 드는 비용이 절감됩니다.
Background Blur API 사용 설정
기본적으로 Background Blur API는 Chrome에서 사용 설정되지 않지만 이 기능을 명시적으로 사용 설정하여 Chrome 114에서 실험해 볼 수 있습니다. chrome://flags/#enable-experimental-web-platform-features에서 '실험용 웹 플랫폼 기능' 플래그를 사용 설정하여 로컬에서 활성화할 수 있습니다.
앱의 모든 방문자에게 이 기능을 사용 설정하기 위해 출처 무료 체험판이 진행 중이며 Chrome 117 (2023년 11월 3일)에서 종료될 예정입니다. 무료 체험판에 참여하려면 가입한 후 HTML 또는 HTTP 헤더에 오리진 무료 체험판 토큰이 포함된 메타 요소를 포함하세요. 자세한 내용은 출처 무료 체험판 시작하기를 참고하세요.
배경 블러 변화 관찰
MediaStreamTrack의 backgroundBlur 불리언 설정을 사용하면 운영체제가 미디어 기기에 배경 흐리게 처리를 적용하는지 알 수 있습니다. 또한 사용자가 운영체제 어포던스를 통해 배경 흐리게 처리를 켜거나 끌 때 MediaStreamTrack에서 "configurationchange" 이벤트가 실행됩니다.
다음 코드 스니펫은 사용자가 액세스 권한을 부여한 미디어 기기에서 배경 흐리게 처리 변경사항을 모니터링하는 방법을 보여줍니다.
// Prompt the user to grant access to a camera.
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
// Show camera video feed to the user (optional).
document.querySelector("video").srcObject = stream;
// Read current background blur value.
const [track] = stream.getVideoTracks();
let { backgroundBlur } = track.getSettings();
console.log(`Background blur is ${backgroundBlur ? "ON" : "OFF"}`);
// Listen to background blur changes.
track.addEventListener("configurationchange", () => {
if (backgroundBlur !== track.getSettings().backgroundBlur) {
backgroundBlur = track.getSettings().backgroundBlur;
console.log(`Background blur is now ${backgroundBlur ? "ON" : "OFF"}`);
}
});
배경 블러 전환
MediaStreamTrack의 backgroundBlur 배열 기능을 사용하면 미디어 기기에서 배경 흐리게 처리를 제어할 수 있는지 알 수 있습니다. 정의되지 않거나 하나의 값 ([true] 또는 [false])만 포함하는 경우 카메라 배경 흐리게 처리를 제어할 수 없습니다. 값이 두 개 포함된 경우 MediaStreamTrack에서 applyConstraints() 메서드를 사용하여 운영체제에 카메라의 동영상 피드에 배경 흐리게 처리 효과를 전환하도록 요청할 수 있습니다. 반환된 프로미스는 성공하면 해결되고 오류가 발생하면 거부됩니다.
다음 코드 스니펫은 사용자가 액세스 권한을 부여한 미디어 기기에서 카메라 배경 흐리게 처리를 제어하는 방법을 보여줍니다.
// Prompt the user to grant access to a camera.
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
// Show camera video feed to the user (optional).
document.querySelector("video").srcObject = stream;
// Check whether the user can toggle background blur in the web app.
// If not, note that you may still want to apply it through a fallback
// software solution.
const [track] = stream.getVideoTracks();
if (track.getCapabilities().backgroundBlur?.length === 2) {
const button = document.querySelector("button");
button.addEventListener("click", toggleBackgroundBlurButtonClick);
button.disabled = false;
}
async function toggleBackgroundBlurButtonClick() {
const constraints = {
backgroundBlur: !track.getSettings().backgroundBlur,
};
// Request operating system to toggle background blur.
await track.applyConstraints(constraints);
const newSettings = track.getSettings();
log(`Background blur is now ${newSettings.backgroundBlur ? "ON" : "OFF"}`);
}
플랫폼 지원
Background Blur API는 ChromeOS, macOS, Windows의 Chrome 114에서 사용할 수 있습니다.
현재 ChromeOS 및 macOS에서는 사용자가 macOS의 제어 센터와 같은 운영체제 UI를 통해 변경할 수 있는 배경 흐리게 처리 변경사항만 관찰할 수 있습니다. Windows를 사용하면 배경 블러를 관찰하고 제어할 수 있습니다.
데모
공식 샘플을 사용해 배경 블러를 전환하고 변경사항을 관찰할 수 있습니다. 앞서 언급한 것처럼 이러한 기능의 사용 가능 여부는 플랫폼의 지원에 따라 다릅니다.
의견
이 단계에서는 개발자 의견이 매우 중요하므로 제안사항과 질문이 있으면 GitHub에서 문제를 제출해 주세요.
배경 흐리게 처리를 불리언 값으로 노출하는 것이 개발자의 요구사항에 적합한지, 아니면 '밝음', '강함', '꺼짐'과 같은 더 세분화된 접근 방식이 더 적합한지 의견을 보내주세요. 이 접근 방식은 모든 운영체제에 노출되는 것과 호환되지 않을 수 있습니다.