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