הפעלה אוטומטית של 'תמונה בתוך תמונה' באפליקציות אינטרנט

François Beaufort

בעקבות המבוא האחרון של Document Picture-in-Picture API (ואפילו לפני), מפתחי אתרים רוצים יותר ויותר לפתוח אוטומטית חלון 'תמונה בתוך תמונה' כשהמשתמש מעביר את המיקוד מהכרטיסייה הנוכחית שלהם. התכונה הזו שימושית במיוחד באפליקציות אינטרנט לשיחות וידאו, כי היא מאפשרת למשתתפים לראות את המצגת ולנהל אינטראקציה עם המשתתפים בזמן אמת, בזמן שהם מציגים מסמך או משתמשים בכרטיסיות או בחלונות אחרים.

חלון עם תמונה בתוך תמונה נפתח ונסגר באופן אוטומטי כשהמשתמש עובר בין כרטיסיות.

מעבר אוטומטי למצב 'תמונה בתוך תמונה'

כדי לתמוך בתרחישים לדוגמה האלה של שיחות ועידה בווידאו, אפליקציות אינטרנט של Chrome 120 למחשב יכולות לעבור למצב 'תמונה בתוך תמונה' באופן אוטומטי, עם כמה הגבלות כדי להבטיח חוויית משתמש חיובית. אפליקציית אינטרנט עומדת בדרישות להפעלה אוטומטית של מצב 'תמונה בתוך תמונה' רק אם היא עומדת בכל התנאים הבאים:

• הוא רשם טיפול בפעולת סשן מדיה לפעולה "enterpictureinpicture".

• היא מתעדת באופן פעיל את המצלמה או את המיקרופון באמצעות getUserMedia.

• המשתמש מאפשר 'הפעלה אוטומטית של מצב תמונה בתוך תמונה' דרך הגדרת דפדפן שמופעלת כברירת מחדל.

הגדרה אוטומטית של 'תמונה בתוך תמונה' בחלונית המידע של האתר בדפדפן Chrome.

כשאפליקציית אינטרנט עומדת בדרישות, פונקציית ה-callback של טיפול הפעולות בסשן המדיה עבור הפעולה "enterpictureinpicture" מופעלת כשהמשתמש מעביר את המיקוד לכרטיסייה אחרת, ומאפשרת לפתוח חלון של 'תמונה בתוך תמונה' בלי תנועת משתמש.

מפתחי אתרים יכולים להשתמש ב-Picture-in-Picture API עבור <video> כדי לפתוח חלון מסוג תמונה בתוך תמונה מרכיב HTML‏ <video>, או ב-Document Picture-in-Picture API כדי לפתוח חלון שתמיד מופיע בחלק העליון של המסך, שאפשר לאכלס בתוכן HTML שרירותי. כשהחלון עם התמונה בתוך התמונה נפתח, הוא לא ממוקד, והוא נסגר באופן אוטומטי כשהדף שוב גלוי.

בדוגמה הבאה מוסבר איך לבקש גישה למצלמה של המשתמש. לאחר מכן, רושמים בבטחה בורר פעולות של סשן מדיה לפעולה "enterpictureinpicture" עם פונקציית קריאה חוזרת (callback) שפותחת חלון 'תמונה בתוך תמונה'. החלון הזה מכיל את שידור הווידאו של המצלמה של המשתמש עם 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.

פקדי המדיה בדפדפן Chrome, כאשר הסמן נמצא על אמצעי הבקרה של המשתמש במצב 'תמונה בתוך תמונה'.

כשלא מופעל רכיב HTML ‏<video> אלא רק אודיו, רישום של בורר הפעולות של סשן המדיה עבור "enterpictureinpicture" מורה לדפדפן שאפליקציית האינטרנט יודעת איך לטפל בכך, והיא תפעל לפתוח חלון 'תמונה בתוך תמונה' בעצמה.

הוא שימושי גם כשאפליקציית האינטרנט רוצה להשתמש ב-Document Picture-in-Picture API כדי לפתוח חלון בחלון במקום לאפשר לדפדפן לטפל בכך באמצעות Picture-in-Picture API עבור <video>.

הדוגמה הבאה מראה איך לרשום בבטחה טיפול בפעולה של סשן מדיה עבור הפעולה "enterpictureinpicture". פונקציית ה-callback פותחת חלון 'תמונה בתוך תמונה' באמצעות 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 או את הדוגמה של Video Media Session.

יצירת מעורבות ושיתוף משוב

אם יש לכם משוב או נתקלתם בבעיות, אתם יכולים לשתף אותם ב-crbug.com.

משאבים

• שינויים במפרט
• רשומת ChromeStatus
• הכוונה למשלוח

אימות חתימות

תודה ל-Tommy Steimel,‏ Ryan Flores,‏ Shimi Rahim,‏ Frank Liberato ו-Rachel Andrew על הביקורות שלהם.