بعد الإطلاق الأخير لواجهة برمجة التطبيقات Document Picture-in-Picture API (وحتى قبل ذلك)، أصبح مطوّرو الويب مهتمين بشكل متزايد بإمكانية فتح نافذة "نافذة ضمن النافذة" تلقائيًا عندما ينقل المستخدم التركيز من علامته التبويب الحالية. ويُعدّ ذلك مفيدًا بشكل خاص لتطبيقات الويب التي تتيح عقد اجتماعات الفيديو، حيث تسمح للمقدّمين برؤية المشاركين والتفاعل معهم في الوقت الفعلي أثناء عرض مستند أو استخدام علامات تبويب أو نوافذ أخرى.
فتح النوافذ في وضع "نافذة ضمن النافذة" تلقائيًا
لدعم حالات استخدام مؤتمرات الفيديو هذه، يمكن لتطبيقات الويب المتوافقة مع أجهزة الكمبيوتر المكتبي من الإصدار 120 من Chrome استخدام وضع "نافذة ضمن النافذة" تلقائيًا، مع بعض القيود لضمان تجربة إيجابية للمستخدم. لا يكون تطبيق الويب مؤهَّلاً لاستخدام ميزة "نافذة ضمن النافذة" التلقائية إلا إذا كان يستوفي جميع الشروط التالية:
سجّلت معالِج إجراء جلسة الوسائط للإجراء
"enterpictureinpicture".يُسجّل التطبيق بيانات الكاميرا أو الميكروفون بشكل نشط من خلال getUserMedia.
يسمح المستخدم بفتح النوافذ في وضع "نافذة ضمن النافذة" تلقائيًا من خلال إعداد متصفّح مفعّل تلقائيًا.
عندما يكون تطبيق الويب مؤهلاً، يتم تشغيل وظيفة الاستدعاء لمعالج إجراءات جلسة الوسائط للإجراء "enterpictureinpicture" عندما ينقل المستخدم التركيز إلى علامة تبويب أخرى، ما يتيح له فتح نافذة "صورة في صورة" بدون إيماءة من المستخدم.
يمكن لمطوّري الويب استخدام Picture-in-Picture API لعنصر <video> لفتح نافذة "صورة في صورة" من عنصر HTML <video>، أو استخدام Document Picture-in-Picture API لفتح نافذة دائمًا في المقدّمة لملء محتوى HTML عشوائي. لا يتم التركيز على نافذة "صورة في صورة" عند فتحها ويتم إغلاقها تلقائيًا عندما تصبح الصفحة مرئية مرة أخرى.
يوضّح لك المثال التالي كيفية طلب الوصول إلى كاميرا المستخدم. بعد ذلك، سجِّل بأمان معالِجًا لإجراءات جلسة الوسائط للإجراء "enterpictureinpicture" باستخدام دالة استدعاء تفتح نافذة "نافذة ضمن النافذة". تحتوي هذه النافذة على بث فيديو الكاميرا الخاص بالمستخدم مع واجهة برمجة التطبيقات Picture-in-Picture API لعنصر <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 أو نموذج جلسة وسائط الفيديو في واجهة برمجة التطبيقات "صورة في صورة" للمستندات.
التفاعل مع الملاحظات ومشاركتها
إذا كانت لديك ملاحظات أو واجهت أي مشاكل، يمكنك مشاركتها على crbug.com.
الموارد
خدمات الإقرار
نشكر "تومي ستيمل" و"ريان فلورس" و"شيمي راشد" و"فرانك ليبيراتو" و"راما أندرو" على مراجعاتهم.