배경 블러는 최신 화상 회의 애플리케이션에서 널리 사용되는 기능입니다. 카메라 앞에 있는 사람과 배경을 자동으로 구별하여 주변을 흐리게 처리하면서 개인에 초점을 맞춥니다.
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에서 문제를 제출해 주세요.
배경 블러를 부울 값으로 노출하는 것이 요구사항에 맞는지, 또는 모든 운영체제에서 노출되는 것과 호환되지 않더라도 '가벼움', '강함', '꺼짐'과 같은 보다 세분화된 접근 방식이 더 적합할지에 대한 의견을 기다리고 있습니다.
유용한 링크
히어로 이미지: Ayo Ogunseinde