tag - streaming html5

Transmisión en vivo HTML5 (8)

Para la escuela necesito configurar un sitio de transmisión en vivo HTML5. Tienen un reproductor flash que han estado usando pero ahora quieren que use HTML5 en su lugar. ¿Cómo puedo hacer esto? Intenté usar la etiqueta de video pero no puedo hacer que funcione. A continuación se muestra el código que tengo. ¿Podría alguien apuntarme en la dirección correcta?

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Deltion Live Streaming</title> <script language="javascript" type="text/javascript" src="../swfobject.js"></script> </head> <body> <video id="movie" width="460" height="306" preload autoplay> <source src="rtmp://fl2.sz.xlcdn.com:80/sz=Deltion_College=lb1" type=''video/mp4; codecs="avc1.42E01E, mp4a.40.2"''>  </video> </body> </html>

En este momento solo funcionará en algunos navegadores y, por lo que puedo ver, no se ha vinculado realmente a un archivo, por lo que eso explicaría por qué no se está reproduciendo.

pero como quieres una transmisión en vivo (con la que no he probado)

Echa un vistazo a Streaming a través de RTSP o RTP en HTML5

y http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/25-HTML5-Video-Resources-You-Might-Have-Missed-74010.aspx

En primer lugar, necesita configurar un servidor de transmisión de medios. Puedes usar Wowza, red5 o nginx-rtmp-module . Lea la documentación y la configuración del sistema operativo que desee. Todos los motores son compatibles con HLS (protocolo Http Live Stream desarrollado por Apple). Usted debe leer la documentación para la configuración. Ejemplo con nginx-rtmp-module:

rtmp { server { listen 1935; # Listen on standard RTMP port chunk_size 4000; application show { live on; # Turn on HLS hls on; hls_path /mnt/hls/; hls_fragment 3; hls_playlist_length 60; # disable consuming the stream from nginx as rtmp deny play all; } } } server { listen 8080; location /hls { # Disable cache add_header Cache-Control no-cache; # CORS setup add_header ''Access-Control-Allow-Origin'' ''*'' always; add_header ''Access-Control-Expose-Headers'' ''Content-Length,Content-Range''; add_header ''Access-Control-Allow-Headers'' ''Range''; # allow CORS preflight requests if ($request_method = ''OPTIONS'') { add_header ''Access-Control-Allow-Origin'' ''*''; add_header ''Access-Control-Allow-Headers'' ''Range''; add_header ''Access-Control-Max-Age'' 1728000; add_header ''Content-Type'' ''text/plain charset=UTF-8''; add_header ''Content-Length'' 0; return 204; } types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } root /mnt/; } }

Después de que el servidor fue configurado y la configuración fue exitosa. debe utilizar algún software de codificador rtmp (OBS, wirecast ...) para iniciar la transmisión como youtube o twitchtv.

En el lado del cliente (navegador en su caso) puede usar Videojs o JWplayer para reproducir video para el usuario final. Puedes hacer algo como a continuación para Videojs:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Live Streaming</title> <link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet"> <script src="//vjs.zencdn.net/5.8/video.min.js"></script> </head> <body> <video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none"> <source src="http://localhost:8080/hls/stream.m3u8" type="application/x-mpegURL" /> </video> <script> var player = videojs(''#player''); </script> </body> </html>

No es necesario agregar otros complementos como flash (porque usamos HLS no rtmp). Este reproductor puede funcionar bien en varios navegadores sin flash.

La transmisión en vivo en HTML5 es posible a través del uso de Media Source Extensions (MSE), el estándar W3C relativamente nuevo: https://www.w3.org/TR/media-source/ MSE es una extensión de la etiqueta <video> de HTML5. ; El javascript en la página web puede obtener segmentos de audio / video del servidor y enviarlos a MSE para su reproducción. El mecanismo de recuperación se puede realizar a través de solicitudes HTTP (MPEG-DASH) o a través de WebSockets. A partir de septiembre de 2016, todos los principales navegadores en todos los dispositivos son compatibles con MSE. iOS es la única excepción.

Para transmisión de video en vivo HTML5 de alta latencia (más de 5 segundos) puede considerar implementaciones de MPEG-DASH por video.js o el motor de transmisión de Wowza.

Para la transmisión de video en vivo de HTML5 de baja latencia, casi en tiempo real, eche un vistazo al servidor de medios EvoStream, al servidor de medios Unreal y a WebRTC.

No es posible utilizar el protocolo RTMP en HTML 5, porque el protocolo RTMP solo se usa entre el servidor y el reproductor flash . Por lo tanto, puede usar los otros protocolos de transmisión para ver los videos transmitidos en HTML 5.

Puede utilizar un nombre de biblioteca fantástico Videojs . Encontrará más información útil aquí. Pero con un comienzo rápido puedes hacer algo como esto:

Una posible alternativa para eso:

Use un codificador (por ejemplo, VLC o FFmpeg) para empaquetar su flujo de entrada al formato OGG. Por ejemplo, en este caso usé VLC para empaquetar el dispositivo de captura de pantalla con este código:
C: / Archivos de programa / VideoLAN / VLC / vlc.exe -I pantalla simulada: //: screen-fps = 16.000000: screen-caching = 100: sout = # transcode {vcodec = theo, vb = 800, scale = 1, ancho = 600, alto = 480, acodec = mp3}: http {mux = ogg, dst = 127.0.0.1: 8080 / desktop.ogg}: no-sout-rtp-sap: no-sout-standard-sap: ttl = 1: mantener al sur
Incruste este código en una etiqueta <video> en su página HTML de esta manera:
<video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay" />

Esto debería funcionar. Sin embargo, es un tipo de rendimiento pobre y el tipo de contenedor AFAIK MP4 debería tener un mejor soporte entre los navegadores que OGG.

Utilice ffmpeg + ffserver. ¡¡¡Funciona!!! Puede obtener un archivo de configuración para ffserver desde ffmpeg.org y, en consecuencia, establecer los valores.