Depuis le récent lancement de l'API Document Picture-in-picture (et même avant), les développeurs Web s'intéressent de plus en plus à la possibilité d'ouvrir automatiquement une fenêtre Picture-in-picture lorsque l'utilisateur déplace le curseur de l'onglet actif. Cette fonctionnalité est particulièrement utile pour les applications Web de visioconférence, qui permettent aux présentateurs de voir les participants et d'interagir avec eux en temps réel tout en présentant un document, ou en utilisant d'autres onglets ou fenêtres.
Passer en Picture-in-picture automatiquement
Pour répondre à ces cas d'utilisation de la visioconférence, les applications Web pour ordinateur de Chrome 120 peuvent passer automatiquement en Picture-in-picture, avec quelques restrictions pour garantir une expérience utilisateur positive. Une application Web n'est éligible à la fonctionnalité Picture-in-picture automatique que si elle remplit toutes les conditions suivantes:
Il a enregistré un gestionnaire d'action de session multimédia pour l'action
"enterpictureinpicture".L'appareil photo ou le micro sont capturés activement via getUserMedia.
L'utilisateur autorise la fonctionnalité Picture-in-picture automatique via un paramètre du navigateur activé par défaut.
Lorsqu'une application Web est éligible, la fonction de rappel du gestionnaire d'actions de la session multimédia pour l'action "enterpictureinpicture" est déclenchée lorsque l'utilisateur passe à un autre onglet, ce qui lui permet d'ouvrir une fenêtre Picture-in-picture sans geste de l'utilisateur.
Les développeurs Web peuvent utiliser l'API Picture-in-picture pour <vidéo> afin d'ouvrir une fenêtre Picture-in-picture à partir d'un élément <video> HTML, ou l'API Document Picture-in-picture pour ouvrir une fenêtre en superposition permanente contenant du contenu HTML arbitraire. La fenêtre Picture-in-picture n'est pas sélectionnée lorsqu'elle est ouverte, mais elle se ferme automatiquement lorsque la visibilité de la page redevient visible.
L'exemple suivant vous montre comment demander l'accès à l'appareil photo de l'utilisateur. Ensuite, enregistrez en toute sécurité un gestionnaire d'actions de session multimédia pour l'action "enterpictureinpicture" avec une fonction de rappel qui ouvre une fenêtre Picture-in-picture. Cette fenêtre contient le flux vidéo de la caméra de l'utilisateur avec l'API Picture-in-picture pour <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.");
}
Essayez l'exemple de session multimédia de visioconférence.
Activer le mode Picture-in-picture depuis les commandes multimédias du navigateur
L'action de session multimédia "enterpictureinpicture" est également utile lorsque l'utilisateur souhaite passer en mode Picture-in-picture à l'aide des commandes multimédias de l'interface utilisateur du navigateur Chrome.
Lorsqu'aucun élément HTML <video> n'est lu, mais seulement de l'audio, l'enregistrement du gestionnaire d'actions de la session multimédia pour "enterpictureinpicture" indique au navigateur que l'application Web sait comment le gérer et va ouvrir une fenêtre Picture-in-picture.
Elle est également utile lorsque l'application Web souhaite utiliser l'API Document Picture-in-picture pour ouvrir une fenêtre Picture-in-picture, au lieu de laisser le navigateur la gérer à l'aide de l'API Picture-in-picture pour <vidéo>.
L'exemple suivant montre comment enregistrer de manière sécurisée un gestionnaire d'actions de session multimédia pour l'action "enterpictureinpicture". La fonction de rappel ouvre une fenêtre Picture-in-picture avec l'API Document Picture-in-picture lorsque l'utilisateur y accède à l'aide de la commande multimédia de l'interface utilisateur du navigateur 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.");
}
Essayez la démo du lecteur VideoJS de l'API Document Picture-in-picture ou l'exemple de session Video Media.
Interagir et donner votre avis
Si vous avez des commentaires ou rencontrez des problèmes, n'hésitez pas à les envoyer sur crbug.com.
Ressources
Remerciements
Merci à Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato et Rachel Andrew pour leurs avis.