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 nền 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ì tiêu điểm trên người đó.
API Làm mờ nền mang đến các tính năng che khuất nền cho web. API này cho phép các ứng dụng web yêu cầu hệ điều hành áp dụng hiệu ứng làm mờ nền một cách hiệu quả cho nguồn cấp dữ liệu video của máy ảnh. Nhờ đó, bạn không cần phải tự áp dụng hiệu ứng này theo cách tốn kém thông qua các khung học máy như TensorFlow.js, Mediapipe hoặc các giải pháp dựa trên đám mây, vốn yêu cầu xử lý từng khung hình video riêng lẻ.
Bật Background Blur API
Theo mặc định, API Làm mờ nền không được bật trong Chrome, nhưng bạn có thể thử nghiệm API này trong Chrome 114 bằng cách bật rõ ràng chức năng này. Bạn có thể kích hoạt tính năng này trên máy bằng cách bật cờ "Tính năng thử nghiệm của nền tảng web" tại chrome://flags/#enable-experimental-web-platform-features.
Để bật tính năng này cho tất cả khách truy cập vào ứng dụng của bạn, chúng tôi đang tiến hành một thử nghiệm theo nguyên gốc và dự kiến sẽ kết thúc thử nghiệm này 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 dùng thử theo nguyên gốc trong tiêu đề HTML hoặc HTTP. Để biết thêm thông tin, hãy tham khảo bài viết Bắt đầu thử nghiệm nguồn gốc.
Quan sát các thay đổi về độ mờ của nền
Chế độ 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 hiệu ứng 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 tính năng 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 hiệu ứng làm mờ nền 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;
// 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 tính năng làm mờ nền
Chức năng mảng backgroundBlur trên MediaStreamTrack cho phép bạn biết liệu bạn có thể kiểm soát độ mờ của nền trên thiết bị truyền thông hay không. Nếu thuộc tính này không xác định hoặc chỉ chứa một giá trị ([true] hoặc [false]), bạn không thể kiểm soát độ mờ nền của máy ảnh. Nếu thuộc tính này chứa hai giá trị, bạn có thể sử dụng phương thức applyConstraints() trên MediaStreamTrack để yêu cầu hệ điều hành bật/tắt hiệu ứng làm mờ nền cho nguồn cấp dữ liệu video của máy ảnh. Lời hứa được trả về sẽ giải quyết khi thành công và từ chối nếu xảy ra lỗi.
Đoạn mã sau đây minh hoạ cách kiểm soát độ mờ của nền camera 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 có trong Chrome 114 trên ChromeOS, macOS và Windows.
Hiện tại, ChromeOS và macOS chỉ cho phép bạn quan sát những 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ư Control Center (Trung tâm điều khiển) trong macOS. Windows cho phép bạn quan sát và kiểm soát hiệu ứng làm mờ nền.
Bản minh hoạ
Bạn có thể bật/tắt tính năng làm mờ nền và quan sát các thay đổi bằng cách chơi với mẫu chính thức. (Như đã đề cập trước đó, việc có các tính năng đó hay không phụ thuộc vào việc nền tảng có hỗ trợ hay không.)
Phản hồi
Ý kiến phản hồi của nhà phát triển rất quan trọng trong giai đoạn này, vì vậy hãy gửi vấn đề trên GitHub kèm theo đề xuất và câu hỏi.
Chúng tôi muốn biết ý kiến của bạn về việc hiển thị độ 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 một phương pháp chi tiết hơn như "nhẹ", "mạnh", "tắt" có phù hợp hơn hay không, ngay cả khi phương pháp này có thể không tương thích với những gì hiển thị trên tất cả hệ điều hành.