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 zu öffnen, wenn der Nutzer den Fokus von seinem aktuellen Tab ändert. Das ist besonders nützlich für Webanwendungen für Videokonferenzen, bei denen die Teilnehmer in Echtzeit gesehen und angesprochen werden können, während ein Dokument präsentiert oder andere Tabs oder Fenster verwendet werden.
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 Webanwendung kann nur dann automatisch in den Bild-im-Bild-Modus versetzt werden, wenn sie alle folgenden Bedingungen erfüllt:
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 Bild-im-Bild-API für <video> verwenden, um ein Bild-im-Bild-Fenster über ein HTML-<video>-Element zu öffnen, oder die Bild-im-Bild-API für Dokumente, um ein immer sichtbares Fenster zu öffnen, das mit beliebigen HTML-Inhalten gefüllt werden kann. Das Bild-im-Bild-Fenster ist beim Öffnen nicht im Fokus und wird automatisch geschlossen, wenn die Seite 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 Kameravideostream des Nutzers 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-Modus ü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 weiß, wie damit umgegangen werden soll, und das Bild-im-Bild-Fenster selbst öffnet.
Sie ist auch nützlich, wenn die Webanwendung die Document Picture-in-Picture API zum Öffnen eines Bild-im-Bild-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.");
}
Testen Sie die VideoJS-Player-Demo für die Picture-in-Picture API von Google Docs oder das Beispiel für die Video Media Session.
Mit Nutzern interagieren und Feedback geben
Wenn Sie Feedback haben oder Probleme auftreten, können Sie sich unter crbug.com an uns wenden.
Ressourcen
Danksagung
Vielen Dank an Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato und Rachel Andrew für ihre Rezensionen.