Seit der Einführung der Picture-in-Picture API für Dokumente (und auch schon vorher) sind Webentwickler zunehmend daran interessiert, automatisch ein Bild-im-Bild-Fenster öffnen zu können, wenn der Nutzer den Fokus von seinem aktuellen Tab ändert. Dies ist besonders bei Webanwendungen für Videokonferenzen nützlich, da Vortragende die Teilnehmer in Echtzeit sehen und mit ihnen interagieren können, während sie ein Dokument präsentieren oder andere Tabs oder Fenster verwenden.
Bild-im-Bild-Modus automatisch aktivieren
Um diese Anwendungsfälle für Videokonferenzen zu unterstützen, können Desktop-Web-Apps ab Chrome 120 automatisch den Bild-im-Bild-Modus aktivieren. Es gelten jedoch einige Einschränkungen, um eine positive Nutzererfahrung zu gewährleisten. Eine Web-App kann nur dann für den automatischen Bild im Bild verwendet werden, wenn alle der folgenden Bedingungen erfüllt sind:
Es wurde ein Handler für die Aktion „media session“ für die Aktion
"enterpictureinpicture"registriert.Es werden über getUserMedia aktiv Kamera oder Mikrofon erfasst.
Der Nutzer erlaubt den „automatischen Bild-im-Bild-Modus“ über eine standardmäßig aktivierte Browsereinstellung.
Wenn eine Web-App die Voraussetzungen erfüllt, wird die Rückruffunktion des Action-Handlers für die Mediensitzung für die Aktion "enterpictureinpicture" ausgelöst, wenn der Nutzer den Fokus auf einen anderen Tab legt. So kann ein Bild-im-Bild-Fenster ohne Nutzergeste geöffnet werden.
Webentwickler können entweder die Picture-in-Picture-API für <video> verwenden, um ein Bild-im-Bild-Fenster über ein HTML-<video>-Element zu öffnen, oder die Document Picture-in-Picture API, um ein Always-on-Top-Fenster zu öffnen, in das beliebige HTML-Inhalte eingefügt werden. Das Bild-im-Bild-Fenster ist beim Öffnen nicht im Fokus und wird automatisch geschlossen, wenn die Seitensichtbarkeit wieder sichtbar wird.
Im folgenden Beispiel wird gezeigt, wie Sie Zugriff auf die Kamera des Nutzers anfordern. Registrieren Sie dann einen Media-Session-Aktions-Handler für die Aktion "enterpictureinpicture" mit einer Callback-Funktion, die ein Bild-im-Bild-Fenster öffnet. Dieses Fenster enthält den Videostream der Nutzerkamera mit der Picture-in-Picture API für <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.");
}
Testen Sie das Beispiel Videokonferenz-Mediensitzung.
Bild im Bild über die Mediensteuerung des Browsers aktivieren
Die Mediensitzungsaktion "enterpictureinpicture" ist auch nützlich, wenn der Nutzer über die Mediensteuerung in der Benutzeroberfläche des Chrome-Browsers den Modus „Bild im Bild“ aktivieren möchte.
Wenn kein HTML-<video>-Element wiedergegeben wird, sondern nur Audio, wird dem Browser durch die Registrierung des Media-Session-Aktions-Handlers für "enterpictureinpicture" mitgeteilt, dass die Webanwendung damit umgehen kann und selbst ein Bild-im-Bild-Fenster öffnet.
Sie ist auch nützlich, wenn die Webanwendung die Picture-in-Picture API für Dokumente zum Öffnen eines Picture-in-Picture-Fensters verwenden möchte, anstatt den Browser die Verarbeitung mit der Picture-in-Picture API für <video> vornehmen zu lassen.
Das folgende Beispiel zeigt, wie ein sicherer Handler für die Aktion „Media Session“ für die Aktion "enterpictureinpicture" registriert wird. Die Rückruffunktion öffnet ein Bild-im-Bild-Fenster mit der Document Picture-in-Picture API, wenn der Nutzer über die Mediensteuerung in der Chrome-Browseroberfläche den Bild-im-Bild-Modus aktiviert.
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.");
}
Probieren Sie die VideoJS-Player-Demo der Document Picture-in-Picture API oder das Beispiel für die Video Media Session aus.
Mit Nutzern interagieren und Feedback geben
Wenn Sie Feedback haben oder auf Probleme stoßen, können Sie uns dies unter crbug.com mitteilen.
Ressourcen
Danksagung
Vielen Dank an Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato und Rachel Andrew für ihre Rezensionen.