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.