بعد طرح واجهة برمجة التطبيقات Document Picture-in-Picture API مؤخرًا (وحتى قبل ذلك)، أصبح مطوّرو تطبيقات الويب مهتمين بشكل متزايد بإمكانية فتح نافذة ضمن النافذة تلقائيًا عندما يغيّر المستخدم التركيز من علامة التبويب الحالية. وهذا مفيد بشكل خاص لتطبيقات الويب الخاصة باجتماعات الفيديو، حيث تتيح لمقدّمي العروض رؤية المشاركين والتفاعل معهم في الوقت الفعلي أثناء تقديم مستند أو استخدام علامات تبويب أو نوافذ أخرى.
فتح النوافذ في وضع "نافذة ضمن النافذة" تلقائيًا
لدعم حالات استخدام عقد اجتماعات الفيديو هذه، يمكن لتطبيقات الويب على أجهزة الكمبيوتر المكتبي بدءًا من الإصدار 120 من Chrome الدخول تلقائيًا في وضع "نافذة ضمن النافذة"، مع بعض القيود لضمان تجربة مستخدم إيجابية. لا يكون تطبيق الويب مؤهَّلاً لاستخدام ميزة "نافذة ضمن النافذة" تلقائيًا إلا إذا استوفى جميع الشروط التالية:
تم تسجيل معالج إجراء جلسة وسائط للإجراء
"enterpictureinpicture".يتم التقاط الكاميرا أو الميكروفون بشكل نشط باستخدام getUserMedia.
يسمح المستخدم بفتح النوافذ في وضع "نافذة ضمن النافذة" تلقائيًا من خلال إعدادات المتصفِّح التي تكون مفعَّلة تلقائيًا.
عندما يكون تطبيق الويب مؤهَّلاً، يتم تشغيل دالّة رد الاتصال لمعالِج إجراءات جلسة الوسائط لإجراء "enterpictureinpicture" عندما ينتقل المستخدم إلى علامة تبويب أخرى، ما يسمح له بفتح نافذة ضمن النافذة بدون إجراء تفاعلي من المستخدم.
يمكن لمطوّري تطبيقات الويب استخدام Picture-in-Picture API for <video> لفتح نافذة "نافذة ضمن النافذة" من عنصر <video> في HTML، أو Document Picture-in-Picture API لفتح نافذة تظهر دائمًا في المقدّمة وتتم تعبئتها بمحتوى HTML عشوائي. لا يتم التركيز على نافذة "نافذة ضمن النافذة" عند فتحها، ويتم إغلاقها تلقائيًا عندما تصبح الصفحة مرئية مرة أخرى.
يوضّح المثال التالي كيفية طلب الوصول إلى كاميرا المستخدم. بعد ذلك، سجِّل بأمان معالج إجراءات جلسة الوسائط للإجراء "enterpictureinpicture" باستخدام دالّة رد الاتصال التي تفتح نافذة ضمن النافذة. تحتوي هذه النافذة على بث فيديو كاميرا المستخدم مع واجهة برمجة التطبيقات "نافذة ضمن النافذة" لـ <video>.
const video = document.querySelector("video");
// Request access to the user's camera.
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
video.srcObject = stream;
});
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", () => {
video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
جرِّب نموذج جلسة وسائط اجتماع الفيديو.
الدخول في وضع "نافذة ضمن النافذة" من أداة التحكّم في الوسائط في المتصفّح
يكون إجراء جلسة الوسائط "enterpictureinpicture" مفيدًا أيضًا عندما يريد المستخدم الدخول إلى وضع "نافذة ضمن النافذة" باستخدام أدوات التحكّم في الوسائط في واجهة مستخدم متصفّح Chrome.
عندما لا يكون هناك عنصر HTML <video> قيد التشغيل ولكن يتم تشغيل الصوت فقط، فإنّ تسجيل معالج إجراءات جلسة الوسائط لـ "enterpictureinpicture" يخبر المتصفّح بأنّ تطبيق الويب يعرف كيفية التعامل معه وسيهتم بفتح نافذة ضمن النافذة بنفسه.
ويكون مفيدًا أيضًا عندما يريد تطبيق الويب استخدام Document Picture-in-Picture API لفتح نافذة ضمن النافذة بدلاً من السماح للمتصفّح بمعالجتها باستخدام Picture-in-Picture API لـ <video>.
يوضّح المثال التالي كيفية تسجيل معالج إجراءات جلسة الوسائط بأمان للإجراء "enterpictureinpicture". تفتح دالّة رد الاتصال نافذة ضمن النافذة باستخدام Document Picture-in-Picture API عندما يدخل المستخدم في وضع "نافذة ضمن النافذة" باستخدام أدوات التحكّم في الوسائط في واجهة مستخدم متصفّح Chrome.
try {
// Use the Document Picture-in-Picture API when entering
// picture-in-picture from browser media control.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
const pipWindow = await documentPictureInPicture.requestWindow();
// Populate HTML content and handle closing window...
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
جرِّب النسخة التجريبية من مشغّل VideoJS أو نموذج جلسة وسائط الفيديو في واجهة Document Picture-in-Picture API.
التفاعل ومشاركة الملاحظات
إذا كانت لديك ملاحظات أو واجهت أي مشاكل، يمكنك مشاركتها على crbug.com.
الموارد
كلمة شكر
نشكر "تومي ستايمل" و"رايان فلوريس" و"شيمي رحيم" و"فرانك ليبيراتو" و"رايتشل أندرو" على مراجعاتهم.