เบลอพื้นหลังของกล้อง

François Beaufort
François Beaufort
GitHub

การเบลอพื้นหลังเป็นฟังก์ชันยอดนิยมในแอปพลิเคชันการประชุมทางวิดีโอสมัยใหม่ ฟีเจอร์นี้จะแยกพื้นหลังออกจากบุคคลที่อยู่หน้ากล้องโดยอัตโนมัติ ซึ่งจะเบลอสภาพแวดล้อม พร้อมทั้งรักษาโฟกัสที่ตัวบุคคล

Background Blor API นำความสามารถในการปกปิดพื้นหลังมาสู่เว็บ API นี้ช่วยให้เว็บแอปขอให้ระบบปฏิบัติการนำเอฟเฟกต์การเบลอพื้นหลังไปใช้กับฟีดวิดีโอของกล้องได้อย่างมีประสิทธิภาพ ทำให้ไม่จำเป็นต้องใช้เอฟเฟกต์ราคาแพงด้วยตนเองผ่านเฟรมเวิร์กแมชชีนเลิร์นนิง เช่น TensorFlow.js, Mediapipe หรือโซลูชันในระบบคลาวด์ที่ต้องประมวลผลวิดีโอแต่ละเฟรมแยกกัน

รูปภาพที่เบลอพื้นหลังปิดอยู่
รูปภาพที่เบลอพื้นหลังปิดอยู่ (ซ้าย) และเปิด (ขวา)

เปิดใช้ API การเบลอพื้นหลัง

โดยค่าเริ่มต้น จะไม่มีการเปิดใช้ API การเบลอพื้นหลังใน Chrome แต่สามารถทดลองใช้ใน Chrome 114 ได้โดยเปิดใช้ฟังก์ชันการทำงานอย่างชัดเจน คุณสามารถเปิดใช้งานในเครื่องได้โดยการเปิดใช้ธง "ฟีเจอร์แพลตฟอร์มเว็บรุ่นทดลอง" ที่ 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 เพื่อขอให้ระบบปฏิบัติการสลับเอฟเฟกต์การเบลอพื้นหลังเป็นฟีดวิดีโอของกล้องได้ สัญญาที่ส่งกลับมาจะแก้ไขเมื่อสำเร็จ และปฏิเสธเมื่อมีข้อผิดพลาด

ข้อมูลโค้ดต่อไปนี้จะแสดงวิธีควบคุมการเบลอพื้นหลังของกล้องในอุปกรณ์สื่อที่ผู้ใช้ให้สิทธิ์เข้าถึง

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

การรองรับแพลตฟอร์ม

API การเบลอพื้นหลังพร้อมใช้งานใน Chrome 114 ใน ChromeOS, macOS และ Windows

ปัจจุบัน ChromeOS และ macOS อนุญาตให้คุณสังเกตการเปลี่ยนแปลงการเบลอพื้นหลังที่ผู้ใช้ทำได้ผ่าน UI ของระบบปฏิบัติการ เช่น Control Center ใน macOS เท่านั้น Windows ช่วยให้คุณสังเกตและควบคุมการเบลอพื้นหลังได้

ข้อมูลประชากร

คุณสลับการเบลอพื้นหลังและสังเกตการเปลี่ยนแปลงได้โดยเล่นตัวอย่างอย่างเป็นทางการ (ดังที่กล่าวมาแล้ว ความพร้อมใช้งานของฟีเจอร์ดังกล่าวจะขึ้นอยู่กับการสนับสนุนของแพลตฟอร์ม)

เว็บแอปที่สังเกตการเปลี่ยนแปลงการเบลอพื้นหลังของกล้อง

ความคิดเห็น

ความคิดเห็นของนักพัฒนาแอปมีความสำคัญมากในขั้นตอนนี้ ดังนั้นโปรดส่งปัญหาเกี่ยวกับ GitHub พร้อมคำแนะนำและคำถาม

เราอยากทราบความคิดเห็นของคุณว่าการแสดงพื้นหลังแบบเบลอเป็นค่าบูลีนเหมาะกับความต้องการของคุณไหม หรือแนวทางที่ละเอียดยิ่งขึ้น เช่น "เบา" "แรง" "ปิด" จะเหมาะสมกว่า แม้ว่าอาจเข้ากันไม่ได้กับสิ่งที่แสดงในระบบปฏิบัติการบางระบบก็ตาม

รูปภาพหลักโดย Ayo Ogunseinde