تعتيم الخلفية هي وظيفة رائجة في تطبيقات اجتماعات الفيديو الحديثة. ويميز هذا التأثير تلقائيًا بين الخلفية والشخص الذي يظهر أمام الكاميرا، ما يؤدي إلى تمويه الأجواء المحيطة مع الحفاظ على التركيز على الشخص.
توفّر واجهة برمجة التطبيقات 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 مع تضمين اقتراحات وأسئلة.
نودّ معرفة رأيك في ما إذا كان عرض تمويه الخلفية كقيمة منطقية يناسب احتياجاتك، أو ما إذا كان من الأفضل استخدام نهج أكثر دقة مثل "خفيف" أو "قوي" أو "غير مفعّل"، حتى إذا كان قد لا يكون متوافقًا مع ما يتم عرضه على جميع أنظمة التشغيل.