將相機背景模糊處理

François Beaufort
François Beaufort
GitHub

背景模糊效果是現代視訊會議應用程式中很受歡迎的功能。這個模式會自動區分背景與相機前拍攝的人物，將周遭環境模糊處理，同時讓拍攝主體保持對焦。

Background Blur API 能為網頁帶來背景隱藏功能。這個 API 可讓網頁應用程式要求作業系統有效率地將背景模糊效果套用至攝影機的視訊畫面。有了 TensorFlow.js、Mediapipe 或雲端解決方案等機器學習架構，就不必逐一處理每個影片影格，因此你不需耗費大量成本手動套用效果。

關閉/開啟背景模糊效果的相片。
關閉背景模糊效果的相片 (左) 和 (右)。

啟用 Background Blur API

Chrome 預設不會啟用 Background Blur API，但你可以在 Chrome 114 中明確啟用這項功能，藉此進行實驗。您可以在 chrome://flags/#enable-experimental-web-platform-features 啟用「實驗功能 Web Platform 功能」旗標，在本機啟用該功能。

為了讓您應用程式的所有使用者皆能使用這項服務，來源試用目前正在進行中，將在 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 目前只能讓您觀察使用者可以透過作業系統 UI (例如 macOS 的控制中心) 進行的背景模糊變更。Windows 可讓你觀察及控制背景模糊效果。

操作示範

你可以播放官方範例來切換背景模糊效果並觀察變更。(如前所述，這些功能是否可用，取決於相關平台的支援)。

可觀察相機背景模糊效果的網頁應用程式。

意見回饋：

在這個階段，開發人員的意見十分重要，因此請前往 GitHub 回報問題，並提供建議和問題。

我們想瞭解是否將背景模糊效果公開當做布林值，或是以「淺色」、「高」、「關閉」等更精細的方法 (即使可能並非與所有作業系統公開的內容相容) 來比較，歡迎與我們分享。

主頁橫幅由 Ayo Ogunseinde 提供。