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