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.
![Zrzut ekranu pokazujący automatyczne ustawienie obrazu w obrazie w panelu informacji o witrynie w przeglądarce Chrome.](https://developer.chrome.com/static/blog/automatic-picture-in-picture/image/screenshot-the-automatic-3468f808b933b.jpg?authuser=9&hl=pl)
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.
![Zrzut ekranu przedstawiający sterowanie multimediami w przeglądarce Chrome z kursorem wskazującym tryb użytkownika w trybie obraz w obrazie.](https://developer.chrome.com/static/blog/automatic-picture-in-picture/image/screenshot-media-control-d6fa5f9aa2d8b.jpg?authuser=9&hl=pl)
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.