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