การเบลอพื้นหลังเป็นฟังก์ชันยอดนิยมในแอปพลิเคชันการประชุมทางวิดีโอสมัยใหม่ โดยระบบจะแยกพื้นหลังออกจากบุคคลที่อยู่หน้ากล้องโดยอัตโนมัติ ทำให้สภาพแวดล้อมเบลอไปขณะที่ยังคงโฟกัสที่บุคคลนั้น
Background Blur API นำความสามารถในการปกปิดพื้นหลังมาสู่เว็บ API นี้ช่วยให้เว็บแอปสามารถขอให้ระบบปฏิบัติการใช้เอฟเฟกต์เบลอพื้นหลังกับฟีดวิดีโอของกล้องได้อย่างมีประสิทธิภาพ ซึ่งจะช่วยประหยัดค่าใช้จ่ายในการใช้เอฟเฟกต์ด้วยตนเองผ่านเฟรมเวิร์กแมชชีนเลิร์นนิง เช่น TensorFlow.js, Mediapipe หรือโซลูชันระบบคลาวด์ ซึ่งต้องประมวลผลเฟรมวิดีโอแต่ละเฟรมแยกกัน
เปิดใช้ API การเบลอพื้นหลัง
โดยค่าเริ่มต้น จะไม่มีการเปิดใช้ API การเบลอพื้นหลังใน Chrome แต่สามารถทดสอบใน Chrome 114 ได้โดยการเปิดใช้ฟังก์ชันการทำงานอย่างชัดแจ้ง คุณเปิดใช้งานในเครื่องได้โดยเปิดใช้Flag "ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง" ที่ chrome://flags/#enable-experimental-web-platform-features
หากต้องการเปิดใช้ฟีเจอร์นี้สำหรับผู้เข้าชมแอปทุกคน การทดลองใช้เวอร์ชันต้นทางกำลังดำเนินอยู่และจะสิ้นสุดใน Chrome 117 (3 พฤศจิกายน 2023) หากต้องการเข้าร่วมการทดลองใช้ ให้ลงชื่อสมัครใช้และรวมองค์ประกอบเมตาพร้อมโทเค็นการทดลองต้นทางในส่วนหัว HTML หรือ HTTP ดูข้อมูลเพิ่มเติมได้ที่เริ่มต้นใช้งานช่วงทดลองใช้จากต้นทาง
ดูการเปลี่ยนแปลงการเบลอพื้นหลัง
การตั้งค่าบูลีน backgroundBlur ใน MediaStreamTrack ช่วยให้คุณทราบว่าระบบปฏิบัติการใช้การเบลอพื้นหลังในอุปกรณ์สื่อหรือไม่ นอกจากนี้ เมื่อผู้ใช้เปิดหรือปิดการเบลอพื้นหลังผ่านสิ่งอํานวยความสะดวกของระบบปฏิบัติการ ระบบจะเรียกเหตุการณ์ "configurationchange" ใน MediaStreamTrack
ข้อมูลโค้ดต่อไปนี้แสดงวิธีตรวจสอบการเปลี่ยนแปลงการเบลอพื้นหลังในอุปกรณ์สื่อที่ผู้ใช้ให้สิทธิ์เข้าถึง
// 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"}`);
}
});
เปิด/ปิดการเบลอพื้นหลัง
ความสามารถของอาร์เรย์ backgroundBlur ใน MediaStreamTrack ช่วยให้คุณทราบว่าคุณสามารถควบคุมการเบลอพื้นหลังในอุปกรณ์สื่อได้หรือไม่ หากไม่มีการกำหนดค่าหรือมีค่าเพียงค่าเดียว ([true] หรือ [false]) คุณจะควบคุมการเบลอพื้นหลังของกล้องไม่ได้ หากมี 2 ค่า คุณจะใช้เมธอด applyConstraints() ใน MediaStreamTrack เพื่อขอให้ระบบปฏิบัติการสลับเอฟเฟกต์การเบลอพื้นหลังกับฟีดวิดีโอของกล้องได้ 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 พร้อมใช้งานใน Chrome 114 บน ChromeOS, macOS และ Windows
ปัจจุบัน ChromeOS และ macOS ให้คุณดูการเปลี่ยนแปลงเบลอพื้นหลังที่ผู้ใช้ทำผ่าน UI ของระบบปฏิบัติการได้เท่านั้น เช่น ศูนย์ควบคุมใน macOS Windows ช่วยให้คุณสังเกตและควบคุมการเบลอพื้นหลังได้
สาธิต
คุณสลับการเปิด/ปิดการเบลอพื้นหลังและสังเกตการเปลี่ยนแปลงได้โดยเล่นกับตัวอย่างอย่างเป็นทางการ (ดังที่ได้กล่าวไว้ก่อนหน้านี้ ความพร้อมใช้งานของฟีเจอร์เหล่านั้นขึ้นอยู่กับการรองรับของแพลตฟอร์ม)
ความคิดเห็น
ความคิดเห็นของนักพัฒนาแอปมีความสำคัญอย่างยิ่งในขั้นตอนนี้ ดังนั้นโปรดแจ้งปัญหาใน GitHub พร้อมคำแนะนำและคำถาม
เราอยากทราบความคิดเห็นของคุณว่าการแสดงผลเบลอพื้นหลังเป็นค่าบูลีนตรงกับความต้องการของคุณหรือไม่ หรือแนวทางที่ละเอียดยิ่งขึ้น เช่น "อ่อน" "เข้ม" "ปิด" จะเหมาะสมกว่า แม้ว่าอาจใช้ไม่ได้กับสิ่งที่แสดงในระบบปฏิบัติการบางระบบก็ตาม