تعتيم الخلفية هي وظيفة رائجة في تطبيقات مؤتمرات الفيديو الحديثة. ويميز هذا التأثير تلقائيًا بين الخلفية والشخص الذي يظهر أمام الكاميرا، ما يؤدي إلى تمويه الأجسام المحيطة مع الحفاظ على التركيز على الشخص.
توفّر واجهة برمجة التطبيقات Background Blur API إمكانات إخفاء الخلفية على الويب. تتيح واجهة برمجة التطبيقات هذه لتطبيقات الويب طلب تطبيق نظام التشغيل لتأثير تمويه الخلفية بكفاءة على خلاصة فيديو الكاميرا. ويؤدي ذلك إلى التخلص من الحاجة إلى تطبيق التأثير يدويًا من خلال إطارات عمل التعلم الآلي، مثل TensorFlow.js أو Mediapipe أو الحلول المستندة إلى السحابة الإلكترونية، والتي تتطلّب معالجة كل إطار فيديو بشكلٍ فردي.
تفعيل واجهة برمجة التطبيقات Background Blur API
لا تكون واجهة برمجة التطبيقات Background Blur API مفعّلة تلقائيًا في Chrome، ولكن يمكن تجربتها في الإصدار 114 من Chrome من خلال تفعيل الوظيفة صراحةً. يمكنك تفعيلها على الجهاز من خلال تفعيل علامة "ميزات قاعدة الويب التجريبية" في chrome://flags/#enable-experimental-web-platform-features.
لتفعيل هذه الميزة لجميع زوّار تطبيقك، يجري حاليًا إصدار تجريبي من الميزة ومن المقرر أن ينتهي في الإصدار 117 من Chrome (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])، لا يمكنك التحكّم في تمويه خلفية الكاميرا. إذا كانت تحتوي على قيمتَين، يمكنك استخدام طريقة 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"}`);
}
دعم المنصة
تتوفّر واجهة برمجة التطبيقات Background Blur API في الإصدار 114 من Chrome على ChromeOS وmacOS وWindows.
لا يتيح لك نظاما التشغيل ChromeOS وmacOS حاليًا سوى مراقبة التغييرات في التمويه في الخلفية التي يمكن للمستخدم إجراؤها من خلال واجهة مستخدم نظام التشغيل، مثل "مركز التحكّم" في macOS. يتيح لك نظام التشغيل Windows مراقبة ميزة "تمويه الخلفية" والتحكّم فيها.
عرض توضيحي
يمكنك تفعيل ميزة تمويه الخلفية ومراقبة التغييرات من خلال استخدام العيّنة الرسمية. (كما ذكرنا سابقًا، يعتمد توفّر هذه الميزات على توافق المنصة).
ملاحظات
إنّ ملاحظات المطوّرين مهمة جدًا في هذه المرحلة، لذا يُرجى الإبلاغ عن المشاكل على GitHub مع تضمين اقتراحات وأسئلة.
يسرّنا معرفة رأيك حول ما إذا كان عرض تمويه الخلفية كقيمة منطقية يتناسب مع احتياجاتك، أو حول اتّباع نهج أكثر دقة، مثل "خفيف" أو "قوي" أو "إيقاف"، حتى لو كان غير متوافق مع المحتوى المعروض في جميع أنظمة التشغيل.