Tengo un lienzo que se representa en un video a través video.srcObject = canvas.captureSteam()
Luego, ese video se convierte en el elemento activo de imagen en imagen usando video.requestPictureInPicture()
Me gustaría agregar algo de interactividad a la ventana flotante (por ejemplo, un botón en el que se puede hacer clic representado en el lienzo).
¿Hay alguna manera de obtener eventos del mouse en la ventana flotante? Todo lo que realmente necesito es la posición del mouse y el botón del mouse hacia arriba/abajo.
He intentado usar addEventListener en PictureInPictureWindow que se devuelve de requestPictureInPicture pero parece que el único evento que puede pasar es resize el tamaño
Entonces, para mi caso de uso, esto fue para una aplicación de videoconferencia. Solo necesitaba silenciar audio y video y un botón para colgar; resulta que estos se implementan en la API de MediaSession .
Agregar lo siguiente hizo silenciar/activar audio, silenciar/activar video y un botón para colgar que se muestra en la ventana de imagen en imagen al pasar el mouse:
navigator.mediaSession.setActionHandler('togglemicrophone', toggleAudioMuted); navigator.mediaSession.setActionHandler('togglecamera', toggleVideoMuted); navigator.mediaSession.setActionHandler('hangup', hangup); navigator.mediaSession.setMicrophoneActive y navigator.mediaSession.setCameraActive también se pueden usar para sincronizar el estado silenciado/no silenciado con la ventana de imagen en imagen.
Se pueden encontrar más detalles aquí: https://w3c.github.io/mediasession/#the-mediasession-interface
Y aquí: https://developer.mozilla.org/en-US/docs/Web/API/MediaSession