Po ostatnim wprowadzeniu interfejsu Document Picture-in-Picture API (a nawet wcześniej) deweloperzy stron internetowych coraz bardziej interesują się automatycznym otwieraniem okna obrazu w obrazie, gdy użytkownik przenosi fokus z bieżącej karty. Jest to szczególnie przydatne w przypadku aplikacji internetowych do wideokonferencji, ponieważ pozwala prezenterom widzieć uczestników i wchodzić z nimi w interakcje w czasie rzeczywistym podczas prezentowania dokumentu lub korzystania z innych kart lub okien.
Automatyczne włączanie obrazu w obrazie
Aby obsługiwać te przypadki użycia wideokonferencji, od Chrome 120 aplikacje internetowe na komputery mogą automatycznie włączać obraz w obrazie, z kilkoma ograniczeniami, które mają zapewnić użytkownikom pozytywne wrażenia. Automatyczna funkcja obraz w obrazie jest dostępna tylko wtedy, gdy aplikacja internetowa spełnia wszystkie te warunki:
Zarejestrowano dla niego moduł obsługi działania sesji multimedialnej dla działania
"enterpictureinpicture".Aktywnie rejestruje obraz z kamery lub dźwięk z mikrofonu za pomocą funkcji getUserMedia.
Użytkownik zezwala na „automatyczny obraz w obrazie” za pomocą ustawienia przeglądarki włączonego domyślnie.
Gdy aplikacja internetowa spełnia wymagania, funkcja wywołania obsługi działania sesji multimedialnej dla działania "enterpictureinpicture" jest wywoływana, gdy użytkownik przełączy fokus na inną kartę, co pozwala na otwarcie okna obrazu w obrazie bez interakcji użytkownika.
Deweloperzy internetowi mogą użyć interfejsu Picture-in-Picture API for <video>, aby otworzyć okno typu obraz w obrazie z elementu HTML <video>, lub interfejsu Document Picture-in-Picture API, aby otworzyć okno zawsze na górze, które można wypełnić dowolnym treściami HTML. Okno obrazu w obrazie nie jest aktywne po otwarciu i zamyka się automatycznie, gdy strona znów staje się widoczna.
Ten przykład pokazuje, jak poprosić o dostęp do aparatu użytkownika. Następnie bezpiecznie zarejestruj w przypadku działania "enterpictureinpicture" moduł obsługi sesji multimediów za pomocą funkcji wywołania zwrotnego, która otwiera okno obrazu w obrazie. To okno zawiera strumień wideo z kamery użytkownika za pomocą interfejsu Picture-in-Picture API dla <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.");
}
Wypróbuj przykład sesji multimedialnej do rozmów wideo.
Włączanie obrazu w obrazie za pomocą elementów sterujących multimediami w przeglądarce
Działanie sesji multimediów "enterpictureinpicture" jest też przydatne, gdy użytkownik chce przejść do obrazu w obrazie za pomocą elementów sterujących multimediów w interfejsie przeglądarki Chrome.
Jeśli nie ma odtwarzanego elementu HTML <video>, ale tylko dźwięk, rejestrowanie modułu obsługi działania sesji multimedialnej dla "enterpictureinpicture" informuje przeglądarkę, że aplikacja internetowa wie, jak sobie z tym poradzić, i sama otworzy okno obrazu w oknie.
Jest to przydatne, gdy aplikacja internetowa chce użyć interfejsu Document Picture-in-Picture API, aby otworzyć okno Picture-in-Picture, zamiast pozwalać przeglądarce na obsługę tego okna za pomocą interfejsu Picture-in-Picture API for <video>.
Ten przykład pokazuje, jak bezpiecznie zarejestrować moduł obsługi działania sesji multimediów dla działania "enterpictureinpicture". Funkcja wywołania zwrotnego otwiera okno obrazu w obrazie za pomocą interfejsu API obrazu w obrazie dokumentu, gdy użytkownik włączy obraz w obrazie za pomocą elementów sterujących multimediami w interfejsie przeglądarki 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.");
}
Wypróbuj interfejs API dokumentu Picture-in-Picture w demonstracji odtwarzacza VideoJS lub przykładowej sesji multimediów wideo.
Angażowanie użytkowników i przesyłanie opinii
Jeśli chcesz podzielić się opinią lub napotkasz problemy, możesz to zrobić na stronie crbug.com.
Zasoby
Poświadczenia
Dziękujemy Tommy’emu Steimelowi, Ryanowi Floresowi, Shimiemu Rahimowi, Frankowi Liberato i Rachel Andrew za opinie.