Wraz z niedawnym wprowadzeniem interfejsu Document Picture-in-Picture API (a nawet wcześniej) deweloperzy stron internetowych są coraz bardziej zainteresowani możliwością automatycznego otwierania okna obrazu w obrazie, gdy użytkownik przełączy zaznaczenie na bieżącej karcie. Jest to szczególnie przydatne w przypadku aplikacji internetowych do rozmów wideo, ponieważ dzięki nim osoba prowadząca może zobaczyć uczestników spotkania i wchodzić z nimi w interakcję w czasie rzeczywistym podczas prezentowania dokumentu lub używania innych kart bądź okien.
Włączaj automatycznie obraz w obrazie
Aby obsługiwać te przypadki użycia rozmów wideo, aplikacje internetowe Chrome 120 na komputerach mogą automatycznie włączać tryb „obraz w obrazie” (z kilkoma ograniczeniami), aby zapewnić wygodę użytkownikom. Aplikacja internetowa może włączyć automatyczny obraz w obrazie tylko wtedy, gdy spełnia wszystkie te warunki:
Zarejestrował moduł obsługi działania sesji multimediów dla działania
"enterpictureinpicture".Aktywnie przechwytuje obraz z kamery lub mikrofonu przez metodę getUserMedia.
Użytkownik zezwala na używanie „automatycznego obrazu w obrazie” w ustawieniach przeglądarki, które są domyślnie włączone.
Gdy aplikacja internetowa spełnia wymagania, funkcja wywołania zwrotnego modułu obsługi sesji multimediów dla działania "enterpictureinpicture" jest uruchamiana, gdy użytkownik przełączy się na inną kartę, co pozwala otworzyć okno obrazu w obrazie bez gestu użytkownika.
Programiści stron internetowych mogą użyć interfejsu Picture-in-Picture API for <video>, aby otworzyć okno obrazu w obrazie z elementu HTML <video>, lub interfejsu Document Picture-in-Picture API, aby otworzyć okno zawsze na górze, które będzie zawierać dowolne treści HTML. Okno obraz w obrazie nie jest zaznaczone po otwarciu i automatycznie zamykane, gdy widoczność strony znów stanie się widoczna.
Z przykładu poniżej dowiesz się, jak poprosić o dostęp do aparatu użytkownika. Następnie możesz bezpiecznie zarejestrować moduł obsługi akcji w sesji multimedialnej dla działania "enterpictureinpicture" za pomocą funkcji wywołania zwrotnego, która otwiera okno obrazu w obrazie. To okno zawiera strumień wideo z kamery użytkownika korzystającej z interfejsu Picture-in-Picture API w przypadku <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.");
}
Skorzystaj z przykładowego sesji multimedialnej w wideokonferencji.
Włącz obraz w obrazie za pomocą sterowania multimediami w przeglądarce
Działanie w ramach sesji multimedialnej "enterpictureinpicture" jest też przydatne, gdy użytkownik chce włączyć obraz w obrazie za pomocą sterowania multimediami w interfejsie przeglądarki Chrome.
Gdy nie ma odtwarzanego elementu HTML <video>, a tylko dźwięk, zarejestrowanie modułu obsługi sesji multimediów dla "enterpictureinpicture" informuje przeglądarkę, że aplikacja internetowa wie, jak to zrobić, i będzie otwierać okno obrazu w obrazie.
Jest to też przydatne, gdy aplikacja internetowa chce używać interfejsu Document Picture-in-Picture API do otwierania okna obrazu w obrazie, zamiast zezwalać przeglądarce na obsługę tego interfejsu za pomocą interfejsu Picture-in-Picture API dla <video>.
Z przykładu poniżej dowiesz się, jak bezpiecznie zarejestrować moduł obsługi sesji multimedialnych dla działania "enterpictureinpicture". Funkcja wywołania zwrotnego otwiera okno obrazu w obrazie z interfejsem Document Picture-in-Picture API, gdy użytkownik włączy tryb obraz w obrazie przy użyciu 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 prezentację odtwarzacza VideoJS lub przykładową sesję multimediów wideo interfejsu Document Picture-in-Picture API.
Angażuj i dziel się opiniami
Jeśli masz jakieś uwagi lub napotkasz jakieś problemy, możesz podzielić się nimi na stronie crbug.com.
Zasoby
Poświadczenia
Dziękujemy Tommy'em Steimelowi, Ryanowi Floresowi, Shimi Rahim, Frankowi Liberato i Rachel Andrew za ich recenzje.