Mit der kürzlichen Einführung der Document Picture-in-Picture API (und sogar früher) interessieren sich Webentwickler immer mehr dafür, ein Bild-im-Bild-Fenster automatisch öffnen zu können, wenn der Nutzer vom aktuellen Tab aus den Fokus wechselt. Das ist besonders bei Webanwendungen für Videokonferenzen nützlich, in denen Vortragende die Teilnehmer in Echtzeit sehen und mit ihnen interagieren können, während ein Dokument präsentiert oder andere Tabs oder Fenster verwendet werden.
Bild im Bild automatisch aktivieren
Um diese Anwendungsfälle für Videokonferenzen zu unterstützen, kann in Chrome 120 für Desktop-Web-Apps automatisch der Bild-im-Bild-Modus aktiviert werden. Es gelten allerdings einige Einschränkungen, um eine positive Nutzererfahrung zu gewährleisten. Eine Web-App ist nur dann für den automatischen Bild-im-Bild-Modus geeignet, wenn sie alle der folgenden Bedingungen erfüllt:
Für die Aktion
"enterpictureinpicture"wurde ein Handler für Mediensitzungsaktionen registriert.Er nimmt die Kamera oder das Mikrofon aktiv über getUserMedia auf.
Der Nutzer lässt die Funktion „Automatischer Bild im Bild“ über eine standardmäßig aktivierte Browsereinstellung zu.
Wenn eine Web-App infrage kommt, wird die Callback-Funktion des Media Session Action Handlers für die Aktion "enterpictureinpicture" ausgelöst, wenn der Nutzer den Fokus auf einen anderen Tab wechselt. Dadurch 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 aus einem HTML-<video>-Element zu öffnen, oder die Document Picture-in-Picture API, um ein Always-On-Fenster zu öffnen, in dem beliebige HTML-Inhalte angezeigt werden. Das Bild-im-Bild-Fenster ist beim Öffnen nicht fokussiert und wird automatisch geschlossen, wenn die Seite wieder sichtbar wird.
Das folgende Beispiel zeigt, wie Sie den Zugriff auf die Kamera des Nutzers anfordern. Registrieren Sie dann auf sichere Weise einen Handler für Mediensitzungsaktionen für die Aktion "enterpictureinpicture" mit einer Callback-Funktion, die ein Bild-im-Bild-Fenster öffnet. Dieses Fenster enthält den Videostream der Kamera 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.");
}
Versuchen Sie es mit dem Beispiel Video Conferencing Media Session.
Bild im Bild über die Mediensteuerung des Browsers aktivieren
Die Mediensitzungsaktion "enterpictureinpicture" ist auch nützlich, wenn der Nutzer über die Mediensteuerung auf der Benutzeroberfläche des Chrome-Browsers den Bild-im-Bild-Modus aktivieren möchte.
Wenn kein HTML-<video>-Element, sondern nur Audio wiedergegeben wird, teilt das Registrieren des Mediensitzungs-Aktions-Handlers für "enterpictureinpicture" dem Browser mit, dass die Web-App weiß, wie das Element zu verarbeiten ist, und dass sie selbst ein Bild-im-Bild-Fenster öffnet.
Dies ist auch nützlich, wenn die Web-App die Document Picture-in-Picture API verwenden möchte, um ein Bild-im-Bild-Fenster zu öffnen, anstatt es den Browser mit der Bild-im-Bild-API für <video> verarbeiten zu lassen.
Das folgende Beispiel zeigt, wie ein Aktions-Handler für Mediensitzungen sicher für die Aktion "enterpictureinpicture" registriert wird. Die Callback-Funktion öffnet ein Bild-im-Bild-Fenster mit der Dokument-Bild-im-Bild-API, wenn der Nutzer über das Mediensteuerelement auf der Benutzeroberfläche des Chrome-Browsers 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 eine Videomedien-Session aus.
Reagieren und Feedback geben
Falls du Feedback hast oder Probleme auftreten, kannst du sie unter crbug.com einreichen.
Ressourcen
Danksagung
Wir danken Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato und Rachel Andrew für ihre Rezensionen.