Com a recente introdução da API Document Picture-in-Picture (e até mesmo antes), os desenvolvedores da Web estão cada vez mais interessados em poder abrir automaticamente uma janela picture-in-picture quando o usuário muda o foco da guia atual. Isso é útil principalmente para apps da Web de videoconferência, que permitem que os apresentadores vejam e interajam com os participantes em tempo real enquanto apresentam um documento ou usam outras guias ou janelas.
Entrar no modo picture-in-picture automaticamente
Para oferecer suporte a esses casos de uso de videoconferência, os apps da Web para computador do Chrome 120 podem entrar automaticamente no modo picture-in-picture, com algumas restrições para garantir uma experiência do usuário positiva. Um app da Web só está qualificado para o picture-in-picture automático se atender a todas as condições a seguir:
Ele registrou um gerenciador de ação de sessão de mídia para a ação
"enterpictureinpicture".Ele está capturando ativamente a câmera ou o microfone via getUserMedia.
O usuário permite o "picture-in-picture automático" por meio de uma configuração do navegador ativada por padrão.
Quando um app da Web está qualificado, a função de callback do gerenciador de ações de sessão de mídia para a ação "enterpictureinpicture" é acionada quando o usuário muda o foco para outra guia, permitindo que ele abra uma janela picture-in-picture sem um gesto do usuário.
Os desenvolvedores da Web podem usar a API Picture-in-Picture para <vídeo> para abrir uma janela picture-in-picture a partir de um elemento HTML <video> ou a API Document Picture-in-Picture para abrir uma janela sempre ativada para preencher com conteúdo HTML arbitrário. A janela picture-in-picture não é focada quando aberta e fechada automaticamente quando a visibilidade da página se torna visível novamente.
O exemplo a seguir mostra como solicitar acesso à câmera do usuário. Em seguida, registre com segurança um gerenciador de ações de sessão de mídia para a ação "enterpictureinpicture" com uma função de callback que abre uma janela picture-in-picture. Essa janela contém o stream de vídeo da câmera do usuário com a API Picture-in-Picture para <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.");
}
Teste a amostra Sessão de mídia de videoconferência.
Entrar no modo picture-in-picture do controle de mídia do navegador
A ação da sessão de mídia "enterpictureinpicture" também é útil quando o usuário quer entrar no modo picture-in-picture usando o controle de mídia na interface do navegador Chrome.
Quando não há elemento HTML <video> sendo reproduzido, mas apenas áudio, o registro do gerenciador de ações de sessão de mídia para "enterpictureinpicture" informa ao navegador que o app da Web sabe como lidar com isso e vai abrir uma janela picture-in-picture.
Ela também é útil quando o app da Web quer usar a API Document Picture-in-Picture para abrir uma janela picture-in-picture em vez de permitir que o navegador processe isso com a API Picture-in-Picture para <vídeo>.
O exemplo a seguir demonstra como registrar com segurança um gerenciador de ações de sessão de mídia para a ação "enterpictureinpicture". A função de callback abre uma janela picture-in-picture com a API Document Picture-in-Picture quando o usuário entra no modo picture-in-picture usando o controle de mídia na interface do navegador 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.");
}
Teste a demonstração do player VideoJS da API Document Picture-in-Picture ou o exemplo de sessão de mídia de vídeo (links em inglês).
Interaja e compartilhe feedback
Se você tiver comentários ou encontrar algum problema, compartilhe-os em crbug.com.
Recursos
Agradecimentos
Agradecemos a Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato e Rachel Andrew pelas avaliações.