Document Picture-In-Picture API API'sının (ve hatta öncesinde) yakın zamanda kullanıma sunulmasıyla web geliştiricileri, kullanıcı mevcut sekmesinden odağı değiştirdiğinde otomatik olarak pencere içinde pencere açabilme konusuna giderek daha fazla ilgi gösteriyor. Bu özellik, bir doküman sunarken veya başka sekme ya da pencereleri kullanırken sunucuların katılımcıları gerçek zamanlı olarak görmesine ve etkileşimde bulunmasına olanak sağladığı video konferans web uygulamaları için özellikle kullanışlıdır.
Otomatik olarak pencere içinde pencere moduna gir
Bu video konferans kullanım alanlarını desteklemek için Chrome 120 masaüstü web uygulamaları, olumlu bir kullanıcı deneyimi sağlamak amacıyla birkaç kısıtlamayla otomatik olarak pencere içinde pencere moduna girilebilir. Bir web uygulaması yalnızca aşağıdaki koşulların tamamını karşılıyorsa otomatik pencere içinde pencere özelliğine uygun olur:
"enterpictureinpicture"işlemi için bir medya oturumu işlemi işleyicisi kaydetmiştir.getUserMedia aracılığıyla kamera veya mikrofonu etkin bir şekilde yakalıyor.
Kullanıcı, varsayılan olarak etkinleştirilen bir tarayıcı ayarı üzerinden "otomatik pencere içinde pencere" özelliğine izin verir.
Bir web uygulaması uygun olduğunda, kullanıcı odağı başka bir sekmeye geçirerek kullanıcının hareketi olmadan pencere içinde pencere açmasına izin verdiğinde "enterpictureinpicture" işlemi için medya oturumu işlemi işleyici geri çağırma işlevi etkinleşir.
Web geliştiricileri, HTML <video> öğesinden pencere içinde pencere açmak üzere <video> için Resim API'sını veya rastgele HTML içeriğiyle doldurmak için her zaman üstte gösterilen bir pencere açmak üzere Document Picture-in-Picture API'yi kullanabilir. Pencere içinde pencere penceresi açıldığında odaklanmaz ve sayfa görünürlüğü tekrar görünür hale geldiğinde otomatik olarak kapanır.
Aşağıdaki örnekte, kullanıcının kamerasına nasıl erişim isteğinde bulunacağınız gösterilmektedir. Ardından, pencere içinde pencere açan bir geri çağırma işleviyle "enterpictureinpicture" işlemi için bir medya oturumu işlem işleyicisini güvenli bir şekilde kaydedin. Bu pencere, <video> için Pencere İçinde Pencere API'si ile birlikte kullanıcının kamera video akışını içerir.
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.");
}
Video Konferans Medya Oturumu örneğini deneyin.
Tarayıcı medya kontrolünden pencere içinde pencere moduna gir
"enterpictureinpicture" medya oturumu işlemi, kullanıcı Chrome tarayıcı kullanıcı arayüzündeki medya kontrolünü kullanarak pencere içinde pencere moduna girmek istediğinde de yararlı olur.
Oynatılan HTML <video> öğesi olmadığında yalnızca ses olduğunda, "enterpictureinpicture" için medya oturumu işlem işleyicisinin kaydedilmesi, tarayıcıya web uygulamasının bunu nasıl işleyeceğini bildiğini ve pencere içinde pencere penceresinin kendisini açar.
Bu, web uygulaması, tarayıcının <video> için Pencere İçinde Pencere API'si ile işlem yapmasına izin vermek yerine bir pencere içinde pencere açmak için Document Picture-in-Picture API'yi kullanmak istediğinde de yararlı olur.
Aşağıdaki örnekte, "enterpictureinpicture" işlemi için bir medya oturumu işlem işleyicisinin güvenli bir şekilde nasıl kaydedileceği gösterilmektedir. Kullanıcı, Chrome tarayıcı kullanıcı arayüzündeki medya denetimini kullanarak pencere içinde pencere moduna girdiğinde, geri çağırma işlevi Document Picture-In-Pencere API'si ile pencere içinde pencere açar.
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.");
}
Document Picture-in-Picture API VideoJS oynatıcı demosunu veya Video Media Oturumu örneğini deneyin.
Etkileşimde bulunun ve geri bildirim paylaşın
Geri bildirimde bulunmak veya herhangi bir sorunla karşılaşırsanız bunları crbug.com adresinden paylaşabilirsiniz.
Kaynaklar
Tasdik
Yorumları için Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato ve Rachel Andrew'a teşekkür ederiz.