Con la recente introduzione dell'API Document Picture in picture (e anche prima), gli sviluppatori web sono sempre più interessati a poter aprire automaticamente una finestra Picture in picture quando l'utente cambia lo stato attivo dalla scheda corrente. Ciò è particolarmente utile per le app web di videoconferenza, in cui consente ai presentatori di vedere e interagire con i partecipanti in tempo reale mentre presentano un documento o utilizzano altre schede o finestre.
Attiva automaticamente la modalità Picture in picture
Per supportare questi casi d'uso di videoconferenza, le app web per desktop di Chrome 120 possono attivare automaticamente la modalità Picture in picture, con alcune limitazioni per garantire un'esperienza utente positiva. Un'app web è idonea per la modalità Picture in picture automatica solo se soddisfa tutte le seguenti condizioni:
È stato registrato un gestore dell'azione della sessione multimediale per l'azione
"enterpictureinpicture".Sta acquisendo attivamente la fotocamera o il microfono tramite getUserMedia.
L'utente consente la modalità "Picture in picture automatica" tramite un'impostazione del browser attivata per impostazione predefinita.
Quando un'app web è idonea, la funzione di callback del gestore delle azioni della sessione multimediale per l'azione "enterpictureinpicture" viene attivata quando l'utente sposta lo stato attivo su un'altra scheda, consentendo all'utente di aprire una finestra Picture in picture senza alcun gesto dell'utente.
Gli sviluppatori web possono utilizzare l'API Picture-in-Picture per <video> per aprire una finestra Picture in picture da un elemento <video> HTML oppure l'API Document Picture-in-Picture per aprire una finestra sempre in primo piano per completare i contenuti HTML arbitrari. La finestra Picture in picture non è attiva quando viene aperta e si chiude automaticamente quando la visibilità della pagina diventa di nuovo visibile.
L'esempio seguente mostra come richiedere l'accesso alla videocamera dell'utente. Quindi, registra in modo sicuro un gestore delle azioni della sessione multimediale per l'azione "enterpictureinpicture" con una funzione di callback che apra una finestra Picture in picture. Questa finestra contiene lo stream video della videocamera dell'utente con l'API Picture in picture per <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.");
}
Prova l'esempio di Sessione multimediale per videoconferenze.
Attiva la modalità Picture in picture dal controllo multimediale del browser
L'azione della sessione multimediale "enterpictureinpicture" è utile anche quando l'utente vuole attivare la modalità Picture in picture utilizzando il controllo multimediale nella UI del browser Chrome.
Se non è presente alcun elemento HTML <video> in riproduzione ma solo audio, la registrazione del gestore delle azioni della sessione multimediale per "enterpictureinpicture" indica al browser che l'app web sa come gestirlo e si occuperà di aprire una finestra Picture in picture.
È utile anche quando l'app web vuole utilizzare l'API Document Picture-in-Picture per aprire una finestra Picture in picture anziché consentire al browser di gestirla con l'API Picture in picture per <video>.
L'esempio seguente mostra come registrare in modo sicuro un gestore delle azioni di una sessione multimediale per l'azione "enterpictureinpicture". La funzione di callback apre una finestra Picture in picture con l'API Document Picture-in-Picture quando l'utente accede a Picture in picture utilizzando il controllo multimediale nell'interfaccia utente del browser 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.");
}
Prova la demo del player VideoJS o l'esempio di sessione multimediale video dell'API Document Picture-in-Picture.
Interagisci e condividi feedback
Se hai feedback o problemi, puoi condividerli all'indirizzo crbug.com.
Risorse
Riconoscimenti
Grazie a Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato e Rachel Andrew per le loro recensioni.