Làm mờ nền máy ảnh

François Beaufort
François Beaufort
GitHub

Làm mờ nền là một chức năng phổ biến trong các ứng dụng hội nghị truyền hình hiện đại. Tính năng này tự động phân biệt hậu cảnh với người đứng trước máy ảnh, làm mờ môi trường xung quanh trong khi vẫn duy trì sự tập trung vào cá nhân.

API Làm mờ nền mang đến khả năng che giấu nền cho web. API này giúp các ứng dụng web có thể yêu cầu hệ điều hành áp dụng hiệu quả hiệu ứng làm mờ nền cho nguồn cấp dữ liệu video của máy ảnh. Nhờ vậy, bạn không cần phải tốn kém khi áp dụng hiệu ứng theo cách thủ công thông qua các khung máy học như TensorFlow.js, Mediapipe hoặc các giải pháp trên đám mây vốn yêu cầu phải xử lý riêng từng khung hình video.

Ảnh đang bật và tắt tính năng làm mờ nền.
Ảnh đã tắt tính năng làm mờ nền (bên trái) và bật (bên phải).

Bật API Làm mờ nền

API Làm mờ nền không được bật trong Chrome theo mặc định, nhưng bạn có thể thử nghiệm API này trong Chrome 114 bằng cách bật chức năng này một cách rõ ràng. Bạn có thể kích hoạt tính năng này cục bộ bằng cách bật cờ "Tính năng nền tảng web thử nghiệm" tại chrome://flags/#enable-experimental-web-platform-features.

Để kích hoạt tính năng này cho mọi khách truy cập ứng dụng của bạn, chúng tôi hiện đang triển khai một bản dùng thử theo nguyên gốc và sẽ kết thúc trong Chrome 117 (ngày 3 tháng 11 năm 2023). Để tham gia dùng thử, hãy đăng ký và thêm một phần tử meta có mã thông báo bản dùng thử theo nguyên gốc vào tiêu đề HTML hoặc HTTP. Để biết thêm thông tin, hãy tham khảo bài đăng Bắt đầu dùng bản dùng thử theo nguyên gốc.

Quan sát những thay đổi về độ mờ của nền

Việc cài đặt boolean backgroundBlur trên MediaStreamTrack cho phép bạn biết liệu hệ điều hành có áp dụng chế độ làm mờ nền trên thiết bị đa phương tiện hay không. Ngoài ra, khi người dùng bật hoặc tắt tính năng làm mờ nền thông qua một thuộc tính tương tác của hệ điều hành, sự kiện "configurationchange" sẽ được kích hoạt trên MediaStreamTrack.

Đoạn mã sau đây minh hoạ cách theo dõi các thay đổi đối với tính năng làm mờ nền trên thiết bị đa phương tiện mà người dùng đã cấp quyền truy cập.

// 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"}`);
  }
});

Bật/tắt chế độ làm mờ nền

Khả năng mảng backgroundBlur trên MediaStreamTrack cho biết liệu bạn có thể kiểm soát chế độ làm mờ nền trên thiết bị đa phương tiện hay không. Nếu giá trị này không xác định hoặc chỉ chứa một giá trị ([true] hoặc [false]), thì bạn không thể kiểm soát chế độ làm mờ nền của camera. Nếu hiệu ứng này có chứa hai giá trị, bạn có thể dùng phương thức applyConstraints() trên MediaStreamTrack để yêu cầu hệ điều hành chuyển đổi hiệu ứng làm mờ nền thành nguồn cấp dữ liệu video của máy ảnh. Lời hứa được trả về sẽ được giải quyết khi thành công và từ chối khi có lỗi.

Đoạn mã sau đây minh hoạ cách kiểm soát chế độ làm mờ nền máy ảnh trên một thiết bị đa phương tiện mà người dùng đã cấp quyền truy cập.

// 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"}`);
}

Hỗ trợ nền tảng

API Làm mờ nền hiện có trong Chrome 114 trên ChromeOS, macOS và Windows.

ChromeOS và macOS hiện chỉ cho phép bạn quan sát các thay đổi về hiệu ứng làm mờ nền mà người dùng có thể thực hiện thông qua giao diện người dùng của hệ điều hành, chẳng hạn như Trung tâm kiểm soát trong macOS. Windows cho phép bạn quan sát và kiểm soát tính năng làm mờ nền.

Bản minh hoạ

Bạn có thể bật/tắt chế độ làm mờ nền và quan sát các thay đổi bằng cách phát với mẫu chính thức. (Như đã đề cập trước đó, khả năng sử dụng các tính năng đó phụ thuộc vào sự hỗ trợ của nền tảng.)

Một ứng dụng web quan sát các thay đổi về hiệu ứng làm mờ nền của máy ảnh.

Ý kiến phản hồi

Ý kiến phản hồi của nhà phát triển thực sự quan trọng ở giai đoạn này, vì vậy, vui lòng gửi vấn đề lên GitHub kèm theo đề xuất và câu hỏi.

Chúng tôi muốn biết suy nghĩ của bạn về việc liệu việc hiển thị làm mờ nền dưới dạng giá trị boolean có phù hợp với nhu cầu của bạn hay không hoặc liệu phương pháp chi tiết hơn như "nhẹ", "mạnh", "tắt" có phù hợp hơn không, ngay cả khi nó có thể không tương thích với những gì hiển thị trên tất cả các hệ điều hành.

Hình ảnh chính của Ayo Ogunseinde.