Streaming a través de RTSP o RTP en HTML5

150

Estoy creando una aplicación web que debería reproducir una transmisión RTSP / RTP desde un servidor http://lscube.org/projects/feng .

¿La etiqueta de video / audio HTML5 es compatible con rtsp o rtp? Si no, ¿cuál sería la solución más fácil? Quizás vaya a un complemento VLC o algo así.

video html streaming rtsp rtp Elben Shira
fuente
la etiqueta de video no "solo funciona" con RTSP. Y RTSP no se implementa de forma nativa en ningún navegador que yo sepa. Necesitará un enchufe, como ya lo descubrió. O use webRTC, que es compatible de forma nativa con Chrome y Firefox, y podrá usar la etiqueta de video con cierta lógica de webRTC. Si está tratando de transmitir desde una fuente como una cámara IP, use un servicio de transmisión como Wowza (o escriba el suyo) para transcodificar desde RTSP a webRTC. Este es mi consejo para ti.
Michael P
Sugiero hacer esta pregunta en StackOverflow para sistemas multimedia
Hamed
Creo que puedes transmitir con html5 pero no puedes transmitir a alguna parte.
Salih Karagoz
Gran pregunta, gracias. "Creo que no admitimos RTSP, solo RTMP a través de videojs-flash". - esta es una respuesta del responsable principal del reproductor de video Video.js. Investigo el tema y no puedo encontrar una buena solución.
zhibirc
Es posible utilizar un RTCPeerConnection de WebRTC para reproducir un RTSP (o más correctamente el flujo RTP que configura RTSP) en un elemento de video HTML. Anteriormente había una demostración en webrtc.live555.com . El truco será encontrar un servidor RTSP que haya agregado los mecanismos requeridos WebRTC DTLS y SRTP.
sipwiz

Respuestas:

89

Técnicamente 'Sí'

(pero no realmente...)

La <video>etiqueta de HTML 5 es independiente del protocolo, no le importa. Coloca el protocolo en el srcatributo como parte de la URL. P.ej:

<video src="rtp://myserver.com/path/to/stream">
    Your browser does not support the VIDEO tag and/or RTP streams.
</video>

o tal vez

<video src="http://myserver.com:1935/path/to/stream/myPlaylist.m3u8">
    Your browser does not support the VIDEO tag and/or RTP streams.
</video>

Dicho esto, la implementación de la <video>etiqueta es específica del navegador. Dado que es temprano para HTML 5, espero que cambie el soporte con frecuencia (o falta de soporte).

De la especificación HTML5 del W3C ( El elemento de video ):

Los agentes de usuario pueden admitir cualquier códec de video y audio y formatos de contenedor

Stu Thompson
fuente
3
ACTUALIZACIÓN : probé el primer método en Chrome y obtuve GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME. Parece que solo los esquemas HTTP [S] están permitidos en los videoelementos.
Yan Foto
¿Seguramente nunca transferirías un video a través de HTTP y solo usarías un protocolo como RTP? Sería terriblemente lento sobre TCP ..
markmnl
77
@markmnl ¿Eso es sarcasmo? (No puedo decir ... soy crédulo de esa manera.) El transporte HTTP es el método dominante para transferir videos a través de la web desde hace unos años. Youtube, Netflix, y col. No es una cuestión de eficiencia, sino de simplicidad, firewall transversal, compatibilidad con el servidor de caché, etc.
Stu Thompson
¿Netflix transmite video usando HTTP? Ningún sarcasmo parece una forma ineficiente de transmitir video.
markmnl
66
@markmnl Por el bien de la posteridad, vale la pena mencionar que Netflix solía transmitir con MS Silverlight, pero lo abandonó hace un tiempo. Como alguien que ha estado en streaming desde 2001, inicialmente me sorprendió ver que HTTP se hiciera cargo. Ahora estoy bebiendo el Kool Aid. En las redes corporativas, donde la eficiencia es importante, los protocolos RTP especialmente diseñados son la norma, especialmente cuando pueden ofrecer funciones como la multidifusión.
Stu Thompson
55

El espíritu de la pregunta, creo, no fue realmente respondido. No, no puede usar una etiqueta de video para reproducir transmisiones rtsp a partir de ahora. La otra respuesta con respecto al enlace al "nunca" del chico Chromium es un poco engañoso ya que el hilo / respuesta vinculado no se refiere directamente a Chrome jugando rtsp a través de la etiqueta de video. Lea todo el hilo vinculado, especialmente los comentarios en la parte inferior y los enlaces a otros hilos.

La verdadera respuesta es esta: No, no puedes simplemente poner una etiqueta de video en una página html 5 y jugar rtsp. Debe usar una biblioteca de JavaScript de algún tipo (a menos que quiera jugar cosas con reproductores flash y silverlight) para reproducir videos en tiempo real. {IMHO} A la velocidad de la discusión y la implementación del video html 5, los diversos proveedores de estándares de video patentados no están interesados ​​en ayudar a avanzar, así que no cuente con la prometida facilidad de uso de la etiqueta de video a menos que los fabricantes de navegadores se encargan de resolver de alguna manera el problema ... de nuevo, no es probable. {/ IMHO}

GolfARama
fuente
1
Buen comentario Golf. También quería hacer lo que Elben está haciendo sin éxito.
will824
31

Esta es una pregunta anterior, pero tuve que hacerlo yo mismo recientemente y logré algo que funcionara (además de una respuesta como la mía me ahorraría algo de tiempo): Básicamente, use ffmpeg para cambiar el contenedor a HLS, la mayor parte del flujo de IPCams h264 y algunos tipo básico de PCM, así que usa algo así:

ffmpeg -v info -i rtsp://ip:port/h264.sdp -c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/test.m3u8

Luego use video.js con el complemento HLS Esto reproducirá la transmisión en vivo muy bien También hay un ejemplo de jsfiddle en el segundo enlace).

Nota: aunque este no es un soporte nativo, no requiere nada adicional en la interfaz de usuario.

Pawel K
fuente
Funcionó para mí, Videojs que ya estaba usando y este complemento HLS hace que el canal en vivo con el archivo m3u8 funcione para la mayoría de las URL, si no para todas.
Dheeraj Thedijje
Me alegro de que haya ayudado, aunque hay un poco más de latencia, pero parece que no se puede ayudar mucho.
Pawel K
1
Pruebe esto @Cesar:ffmpeg -v info -rtsp_transport tcp -i rtsp://host:port/[sdp] -c:v copy -c:a copy -maxrate 400k -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/test.m3u8
Pawel K
1
@Arter Básicamente, debe ejecutar esto en su servidor (desde la línea de comandos) como Linux box o algo remoto. Debe tener acceso a la carpeta / var / www / html / (en este ejemplo) desde la perspectiva del usuario actual. También podría intentar hacerlo en Windows con la ayuda de una pila LAMP o The Uniform Server (solución mucho más ágil)
Pawel K
1
Esto funcionó para mí. 'hls_wrap' está en desuso en la última versión de ffmpeg. ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]
Usé
19

Chrome nunca implementará el soporte de transmisión RTSP.

Al menos, en palabras de un desarrollador de Chromium aquí :

nunca vamos a agregar soporte para esto

janesconference
fuente
44
Bueno, casi. Chrome ya admite la transmisión RTSP, por eso nunca va a agregar soporte para esto;)
Stefan Steiger
2
No, no puedes hacerlo funcionar en Chrome, no funciona cuando intentas con enlaces rtsp de youtube.
IdidntKnewIt
18

Hay tres protocolos / tecnología de transmisión en HTML5:

Transmisión en vivo, baja latencia - WebRTC - Websocket

VOD y transmisión en vivo, alta latencia - HLS

1. WebRTC

De hecho, WebRTC es SRTP (protocolo RTP seguro). Por lo tanto, podemos decir que la etiqueta de video admite RTP (SRTP) indirectamente a través de WebRTC.

Por lo tanto, para obtener la transmisión RTP en su navegador Chrome, Firefox u otro navegador HTML5, necesita un servidor WebRTC que entregará la transmisión SRTP al navegador.

2. Websocket

Está basado en TCP, pero con una latencia más baja que HLS. Nuevamente necesita un servidor Websocket.

3. HLS

El protocolo de transmisión de alta latencia más popular para VOD (video pregrabado).

ankitr
fuente
3
¿Cómo se reproduce una transmisión de audio y video en vivo usando un socket web? La única forma de video es usar Broadway.js y eso es bastante hacky usando transmisiones finales h264.
Mark Gamache
1
HLS significa HTTP Live Streaming, me pregunto por qué HLS se usa ampliamente para VOD pero no para LOD.
Shintaroid
1
No puede reproducir un video en el navegador web desde WebSocket. Al menos no fuera de la caja.
Michael IV
-1, para web socket ... pero no por todas las otras razones que la gente dice. Absolutamente puede reproducir un video recibiendo los datos a través de websocket. Esto es trivial, con las extensiones MediaSource. Sin embargo, no deberías, ¡porque puedes usar HTTP Progressive!
Brad
8

Con VLC puedo transcodificar una transmisión RTSP en vivo (mpeg4) a una transmisión HTTP en formato OGG (Vorbis / Theora). La calidad es pobre, pero el video funciona en Chrome 9. También lo he probado con una transcodificación en WEBM (VP8) pero parece que no funciona (VLC tiene la opción, pero no sé si realmente está implementado por ahora. .)

El primero en tener un documento sobre esto debe notificarnos;)

molokoloco
fuente
2
"C:\Program Files\VideoLAN\VLC\vlc.exe" -I dummy screen:// :screen-fps=16.000000 :screen-caching=100 :sout=#transcode{vcodec=theo,vb=800,scale=1,width=600,height=480,acodec=mp3}:http{mux=ogg,dst=127.0.0.1:8080/desktop.ogg} :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep- este es el comando VLC que transmite su entrada (por ejemplo, dispositivo de captura de pantalla) a una secuencia de salida dada (por ejemplo, 127.0.0.1:8080/desktop.ogg )
Zsolt
1
y luego se puede integrar esto en una etiqueta de vídeo: <video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">.
Zsolt
2
Pero, lamentablemente, el rendimiento es bastante pobre y sería excelente si también se pudiera hacer con el contenedor MP4. AFAIK más navegadores tienen soporte para MP4 que para OGG.
Zsolt
1
A mí también me funcionó. He puesto VLC para el streaming de audio y vídeo a través de HTTP protocolo sobre my_ip:portdirección y de lo que solía HTML5 <video>etiqueta de la siguiente manera: <video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5 not supported</video>.
patryk.beza
1

Mis observaciones con respecto a la etiqueta de video HTML 5 y las transmisiones rtsp (rtp) son que solo funciona con konqueror (KDE 4.4.1, Phonon-backend configurado en GStreamer). Solo obtuve video (sin audio) con una transmisión H.264 / AAC RTSP (RTP).

Las transmisiones de http://media.esof2010.org/ no funcionaron con konqueror (KDE 4.4.1, Phonon-backend configurado en GStreamer).

Renegah
fuente
1

Chrome no implementa soporte de transmisión RTSP. Un proyecto importante para comprobarlo WebRTC.

"WebRTC es un proyecto abierto y gratuito que proporciona navegadores y aplicaciones móviles con capacidades de comunicaciones en tiempo real (RTC) a través de API simples"

Navegadores compatibles:

Chrome, Firefox y Opera.

Plataformas móviles compatibles:

Android e iOS

http://www.webrtc.org/

vrbsm
fuente