Automatyczny obraz w obrazie w aplikacjach internetowych

François Beaufort

Po ostatnim wprowadzeniu interfejsu Document Picture-in-Picture API (a nawet wcześniej) deweloperzy coraz częściej 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.

Okno obrazu w obrazie otwiera się i zamyka automatycznie, gdy użytkownik przełącza karty.

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".

• Przechwytuje aktywnie obraz z kamery lub mikrofonu przez getUserMedia.

• Użytkownik zezwala na „automatyczny obraz w obrazie” za pomocą ustawienia przeglądarki włączonego domyślnie.

Automatyczne ustawienie obrazu w obrazie w panelu informacji o stronie w przeglądarce Chrome.

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 kodem HTML. Okno obrazu w obrazie nie jest aktywne po otwarciu i zamyka się automatycznie, gdy strona znowu 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.");
}

Skorzystaj z przykładu Wideokonferencji Media Session.

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.

Element sterujący multimediami w przeglądarce Chrome z kursorem na elementach sterujących obrazu w obrazie.

Jeśli nie ma odtwarzanego elementu HTML <video>, ale tylko dźwięk, rejestrowanie w przypadku "enterpictureinpicture" modułu obsługi działania sesji multimedialnej informuje przeglądarkę, że aplikacja internetowa wie, jak sobie z tym poradzić, i sama otworzy okno obrazu w obrazie.

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>.

Przykład poniżej pokazuje, jak bezpiecznie zarejestrować moduł obsługi 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 prezentację odtwarzacza VideoJS w Document Picture-in-Picture API lub przykładową sesję wideo Media Session.

Uzyskiwanie opinii i ich udostępnianie

Jeśli chcesz podzielić się opinią lub napotkasz problemy, możesz to zrobić na stronie crbug.com.

Zasoby

• Zmiany specyfikacji
• Wpis w ChromeStatus
• Zamiar wysyłki

Poświadczenia

Dziękujemy Tommy’emu Steimelowi, Ryanowi Floresowi, Shimiemu Rahimowi, Frankowi Liberato i Rachel Andrew za opinie.