背景虚化是现代视频会议应用中常见的功能。它可以自动区分背景与镜头前的人，同时模糊处理周围环境，同时始终突出人物。
Background Blur API 为 Web 带来了背景隐藏功能。借助此 API，Web 应用可以请求操作系统高效地将背景虚化效果应用于摄像头的视频画面。这样一来，便无需通过 TensorFlow.js、Mediapipe 等机器学习框架或需要单独处理每个视频帧的云端解决方案来手动应用特效，从而避免了高昂的费用。
启用 Background Blur API
默认情况下，Chrome 中未启用 Background Blur API，但您可以通过明确启用该功能在 Chrome 114 中对其进行实验。您可以在 chrome://flags/#enable-experimental-web-platform-features 中启用“实验性 Web 平台功能”标志，以在本地激活此 API。
为了面向应用的所有访问者启用该功能，我们正在开展源代码试用，该试用将在 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() 方法，以请求操作系统将背景模糊处理效果切换为相机的视频画面。返回的 promise 会在成功时解析，并在出现错误时拒绝。
以下代码段展示了如何控制用户已授予访问权限的媒体设备上的相机背景虚化效果。
// 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 中的控制中心）执行的背景模糊处理更改。借助 Windows，您可以观察和控制背景虚化效果。
演示
您可以通过玩弄官方示例来切换背景虚化效果并观察变化。（如前所述，这些功能的可用性取决于平台的支持。）
反馈
在此阶段，开发者反馈非常重要，因此请在 GitHub 上提交问题，提供建议和问题。
我们非常期待听取您的意见，了解以布尔值的形式公开背景虚化效果是否符合您的需求，或者更精细的方法（例如“轻度”“强度”“关闭”）是否更合适，即使它可能不适用于所有操作系统上公开的内容。