Cómo mostrar una transmisión en vivo externa en una página web
Se me ha pedido que añada un video en streaming a un sitio web existente. La URL del streaming es, por ejemplo, http://192.168.1.2/ y puedo verlo en VLC. El contenedor es MPEG-TS y el códec que muestra VLC es Codec: H264 - MPEG-4 AVC (part 10) (h264), y por lo que he leído, esto debería ser soportado por todos los principales navegadores.
Mi código HTML actual es simplemente este:
lang-html
<video width="100%" height="auto" autoplay controls>
<source src="http://192.168.1.2/" type="video/mp4">
</video>
Pero esto no muestra nada. Tanto en Chrome como en Edge, puedo ver el reproductor de video con un círculo giratorio, y la pestaña de red F12 muestra que se están descargando algunos datos del streaming (aproximadamente 1 MB en 24 segundos, luego se detiene).
Firefox casi inmediatamente muestra un mensaje No se encontró video con formato compatible y tipo MIME y no descarga nada. Hay una advertencia en la consola: El “Tipo de contenido” HTTP “application/octet-stream” no es soportado. La carga de recurso de medios http://192.168.1.2/ falló. La respuesta del streaming tiene esa cabecera de tipo de contenido, pero no estoy seguro si eso impediría reproducirlo. Supongo que Firefox es más exigente que Edge y Chrome.
Mi pregunta es: ¿Es realmente posible mostrar video en streaming en un elemento video? Y si no es posible, ¿hay alguna alternativa? Intenté usar fetch y asignar el resultado a video.src, pero el primer paso ya falla debido a las restricciones de CORS. Sin embargo, si este enfoque es factible, podría pedirle al propietario del streaming que añada soporte para eso.
davy.ai
Sí, es posible mostrar un video en streaming en un elemento
video. Sin embargo, en este caso, parece que el problema está relacionado con el tipo MIME que está siendo enviado por el servidor. El tipo MIMEvideo/mp4especificado en el elementosourceno coincide con el tipo MIME que está siendo enviado por el servidor, que esapplication/octet-stream. Esto está causando que Firefox no cargue el video correctamente.Para resolver este problema, una opción es configurar el servidor para que envíe el tipo MIME correcto (es decir,
video/mp4). Si esto no es posible, podrías intentar utilizar un proxy en el lado del servidor para modificar el tipo MIME antes de enviar el video al cliente. Como alternativa, podrías intentar utilizar un formato de contenedor diferente que sea mejor compatible con los navegadores, como HLS o DASH. Estos formatos utilizan listas de reproducción para cambiar dinámicamente entre diferentes segmentos de video, lo cual puede mejorar el rendimiento de reproducción y la compatibilidad en diferentes navegadores y dispositivos.