Streaming tramite RTSP o RTP in HTML5


150

Sto creando un'app Web che dovrebbe riprodurre un flusso RTSP / RTP da un server http://lscube.org/projects/feng .

Il tag audio / video HTML5 supporta rtsp o rtp? In caso contrario, quale sarebbe la soluzione più semplice? Magari scendi in un plug-in VLC o qualcosa del genere.


il tag video non "funziona" con RTSP. E RTSP non è implementato in modo nativo da nessun browser che conosco. O avrai bisogno di un plug-in, come hai già capito. Oppure usa webRTC, che è nativamente supportato da Chrome e Firefox, e sarai in grado di usare il tag video con una logica webRTC. Se stai provando a trasmettere da una sorgente come una telecamera IP, usa un servizio di streaming come Wowza (o scrivi il tuo) per transcodificare da RTSP a webRTC. Questo è il mio consiglio per te.
Michael P,

Suggerisco di porre questa domanda in StackOverflow per sistemi multimediali
Hamed

Penso che puoi ottenere lo streaming con html5 ma non puoi eseguire lo streaming da qualche parte.
Salih Karagoz,

Ottima domanda, grazie. "Credo che non supportiamo RTSP, solo RTMP tramite videojs-flash." - questa è una risposta del principale manutentore del lettore multimediale Video.js. Ricerco argomento e non riesco a trovare una buona soluzione per questo.
zhibirc,

È possibile utilizzare un RTCPeerConnection WebRTC per riprodurre un RTSP (o più correttamente il flusso RTP impostato da RTSP) in un elemento video HTML. Precedentemente c'era una demo su webrtc.live555.com . Il trucco sarà trovare un server RTSP che abbia aggiunto gli emchanismi WebRTC DTLS e SRTP richiesti.
sipwiz,

Risposte:


89

Tecnicamente "Sì"

(ma non proprio ...)

Il <video>tag HTML 5 è indipendente dal protocollo, non gliene importa. Inserite il protocollo srcnell'attributo come parte dell'URL. Per esempio:

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

o forse

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

Detto questo, l'implementazione del <video>tag è specifica del browser. Poiché sono i primi giorni per HTML 5, mi aspetto che il supporto cambi spesso (o la mancanza di supporto).

Dalle specifiche HTML5 del W3C ( l'elemento video ):

I programmi utente possono supportare qualsiasi codec video e audio e formati contenitore


3
AGGIORNAMENTO : ho provato il primo metodo in Chrome e ottenuto GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME. Sembra che solo gli schemi HTTP [S] siano consentiti sugli videoelementi.
Yan Foto

Sicuramente non trasferiresti mai un video su HTTP e utilizzeresti solo un protocollo come RTP? Sarebbe terribilmente lento su TCP ..
markmnl

7
@markmnl È quel sarcasmo? (Non posso dirlo ... sono credulone in quel modo.) Il trasporto HTTP è il metodo dominante per trasferire video sul Web da qualche anno. Youtube, Netflix, et al. Non è una questione di efficienza, ma piuttosto semplicità, attraversamento del firewall, facilità d'uso del server cache, ecc.
Stu Thompson,

Netflix trasmette video in streaming tramite HTTP ?! Nessun sarcasmo sembra solo un modo inefficiente per lo streaming video.
markmnl,

6
@markmnl Per amor dei posteri, vale la pena ricordare che Netflix era in streaming con MS Silverlight, ma lo ha abbandonato un po 'di tempo fa. Come qualcuno che è stato in streaming dal 2001, inizialmente sono rimasto scioccato nel vedere HTTP subentrare. Ora sto bevendo il Kool Aid. Nelle reti aziendali, dove l'efficienza è importante, i protocolli appositamente progettati RTP sono la norma, soprattutto quando sono in grado di fornire funzionalità come il multicast.
Stu Thompson,

55

Lo spirito della domanda, a mio avviso, non ha ricevuto una vera risposta. No, non puoi utilizzare un tag video per riprodurre stream rtsp a partire da ora. L'altra risposta riguardante il link al "mai" di Chromium è un po 'fuorviante in quanto il thread / la risposta collegati non si riferiscono direttamente a Chrome che gioca a rtsp tramite il tag video. Leggi l'intero thread collegato, in particolare i commenti in fondo e i collegamenti ad altri thread.

La vera risposta è questa: No, non puoi semplicemente mettere un tag video su una pagina HTML 5 e giocare a rtsp. È necessario utilizzare una libreria Javascript di qualche tipo (a meno che non si desideri iniziare a giocare con i lettori flash e silverlight) per riprodurre video in streaming. {IMHO} Alla velocità della discussione e dell'implementazione di video HTML html 5, i vari fornitori di standard video proprietari non sono interessati ad aiutare questo passo avanti, quindi non contare sulla facilità d'uso promessa del tag video a meno che i produttori di browser assumersi la responsabilità di risolvere il problema in qualche modo ... di nuovo, probabilmente, {/ IMHO}


1
Buon commento Golf. Volevo anche fare ciò che Elben sta facendo senza successo.
will824,

31

Questa è una vecchia domanda, ma ho dovuto farlo da solo di recente e ho ottenuto qualcosa che funziona così (oltre a una risposta come la mia mi farebbe risparmiare un po 'di tempo): fondamentalmente usa ffmpeg per cambiare il contenitore in HLS, la maggior parte dello stream IPCams h264 e alcuni tipo base di PCM, quindi usa qualcosa del genere:

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

Quindi usa video.js con il plugin HLS. Questo riprodurrà bene lo streaming live. C'è anche un esempio di jsfiddle al secondo link).

Nota: sebbene questo non sia un supporto nativo, non richiede nulla in più sul frontend dell'utente.


Ha funzionato per me, Videojs che stavo già utilizzando e questo plugin HLS fa funzionare il canale live con file m3u8 per la maggior parte degli URL, se non per tutti.
Dheeraj Thedijje,

Sono contento che abbia aiutato, ma c'è un po 'più di latenza, ma a quanto pare non può essere aiutato molto.
Pawel K,

1
Prova questo @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 Fondamentalmente è necessario eseguirlo sul server (dalla riga di comando) come Linux box o qualcosa di remoto. È necessario avere accesso alla cartella / var / www / html / (in questo esempio) dalla prospettiva dell'utente corrente. Potresti anche provare a farlo su Windows con l'aiuto di uno stack LAMP o The Uniform Server (soluzione molto più snella)
Pawel K

1
Questo ha funzionato per me. 'hls_wrap' è deprecato nell'ultima versione di ffmpeg. Ho usato questa riga di comando per chiunque fosse interessato:ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]
DanTheMan

19

Chrome non implementerà mai il supporto dello streaming RTSP.

Almeno, nelle parole di uno sviluppatore Chromium qui :

non aggiungeremo mai supporto per questo


4
Be 'quasi. Chrome supporta già lo streaming RTSP, ecco perché non aggiungerà mai supporto per questo;)
Stefan Steiger

2
No, non riesci a farlo funzionare in Chrome, non funziona quando si tenta con i collegamenti rtsp di YouTube.
Idknt Conosceva il

18

Esistono tre protocolli / tecnologie di streaming in HTML5:

Streaming live, bassa latenza - WebRTC - Websocket

VOD e streaming live, alta latenza - HLS

1. WebRTC

In effetti WebRTC è SRTP (protocollo RTP sicuro). Quindi possiamo dire che il tag video supporta RTP (SRTP) indirettamente tramite WebRTC.

Pertanto, per ottenere il flusso RTP su Chrome, Firefox o un altro browser HTML5, è necessario un server WebRTC che fornirà il flusso SRTP al browser.

2. Websocket

È basato su TCP, ma con latenza inferiore rispetto a HLS. Ancora una volta hai bisogno di un server Websocket.

3. HLS

Protocollo di streaming ad alta latenza più diffuso per VOD (video preregistrato).


3
Come si riproduce un flusso audio + video live utilizzando un socket Web? L'unico modo per i video è usare Broadway.js e questo è abbastanza confuso usando i flussi h264 nal.
segna gamache il

1
HLS sta per HTTP Live Streaming, mi chiedo perché HLS sia ampiamente utilizzato per VOD ma non per LOD?
shintaroid,

1
Non è possibile riprodurre un video nel browser Web da WebSocket. Almeno non fuori dagli schemi.
Michele IV,

-1, per web socket ... ma non per tutti gli altri motivi che dicono le persone. Puoi assolutamente riprodurre un video ricevendo i dati tramite websocket. Questo è banale, con le estensioni di MediaSource. Non dovresti però, perché puoi semplicemente usare HTTP Progressive!
Brad

8

Con VLC sono in grado di transcodificare uno stream RTSP live (mpeg4) in uno stream HTTP in formato OGG (Vorbis / Theora). La qualità è scadente, ma il video funziona in Chrome 9. Ho anche testato con una trancodifica in WEBM (VP8) ma non sembra funzionare (VLC ha l'opzione ma non so se è davvero implementato per ora. .)

Il primo ad avere un documento su questo dovrebbe avvisarci;)


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- questo è il comando VLC che trasmette i tuoi input (ad es. dispositivo di cattura dello schermo) a un determinato flusso di output (ad es. 127.0.0.1:8080/desktop.ogg )
Zsolt

1
e quindi è possibile incorporare questo su un tag video: <video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">.
Zsolt,

2
Ma le prestazioni sono purtroppo piuttosto scadenti e sarebbero grandi se si potesse fare anche con il contenitore MP4. AFAIK supporta più browser per MP4 che per OGG.
Zsolt,

1
Ha funzionato anche per me. Ho impostato VLC per lo streaming audio e video tramite protocollo HTTP su my_ip:portindirizzo e che ho usato HTML5 <video>tag in questo modo: <video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5 not supported</video>.
patryk.beza,

1

Le mie osservazioni riguardo al tag video HTML 5 e ai flussi rtsp (rtp) sono che funziona solo con konqueror (KDE 4.4.1, Phonon-backend impostato su GStreamer). Ho ricevuto solo video (senza audio) con un flusso H.264 / AAC RTSP (RTP).

I flussi da http://media.esof2010.org/ non funzionavano con konqueror (KDE 4.4.1, Phonon-backend impostato su GStreamer).


1

Chrome non implementa il supporto dello streaming RTSP. Un progetto importante per verificarlo WebRTC.

"WebRTC è un progetto aperto e gratuito che fornisce ai browser e alle applicazioni mobili funzionalità di comunicazione in tempo reale (RTC) tramite semplici API"

Browser supportati:

Chrome, Firefox e Opera.

Piattaforme mobili supportate:

Android e IOS

http://www.webrtc.org/

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.