对相机背景进行模糊处理

François Beaufort
François Beaufort
GitHub

背景虚化是现代视频会议应用中的热门功能。它会自动区分背景和摄像头前方的人，在保持焦点的同时对周围环境进行模糊处理。

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 平台功能”标志即可。

为了向应用的所有访问者启用源试用，我们目前正在进行源试用，并且该试用将在 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"}`);
}

平台支持

ChromeOS、macOS 和 Windows 上的 Chrome 114 中提供了背景模糊处理 API。

ChromeOS 和 macOS 目前仅允许您观察用户可通过其操作系统界面（例如 macOS 中的控制中心）做出的背景模糊处理更改。您可以通过窗口观察和控制背景模糊处理。

演示

您可以参考官方示例来切换背景虚化效果并观察变化。（如前所述，这些功能的可用性取决于相应平台的支持。）

一个 Web 应用观察相机背景模糊变化。

反馈

在此阶段，开发者的反馈非常重要，欢迎在 GitHub 上提交问题，并附上相关建议和问题。

我们非常期待听到您对以下各方面的想法：以布尔值形式公开背景模糊处理是否符合您的需求，或者“浅色”“强”或“停用”等更精细的方法（即使它可能与所有操作系统上公开的内容都不兼容）是否更为合适。

主打图片由 Ayo Ogunseinde 提供。