Come posso visualizzare un flusso video RTSP in una pagina web?

98

Ho una telecamera IP che fornisce un flusso video RTSP dal vivo. Posso utilizzare VLC media player per visualizzare il feed fornendogli l'URL:

rtsp://cameraipaddress

Ma ho bisogno di visualizzare il feed su una pagina web. Il fornitore della fotocamera ha fornito un controllo ActiveX che ho fatto funzionare, ma è davvero difettoso e causa il blocco frequente del browser.

Qualcuno sa di plug-in video alternativi che potrei usare che supportano RTSP?

La telecamera può essere configurata per lo streaming in H264 o MPEG4.

video-streaming  rtsp 
— elMarquis
fonte
1
Ho anche esplorato questa possibilità con le mie più telecamere RTSP e non voglio alcun controllo ActiveX. Mi piacerebbe costruire un server web personalizzato che la pagina web recupera continuamente un'immagine JPEG da visualizzare sulla pagina web. In questo modo può essere supportato in browser come Safari e visualizzato su un iPhone.
— Jerry Dodge
sottoinsieme: con <video:>elemento: stackoverflow.com/questions/1735933/...
— Ciro Santilli郝海东冠状病六四事件法轮功
@ JerryDodge Ho provato l'idea con Java WebSocket Server che invia il nome del file di immagine come una stringa ad esempio "photo1.jpeg" al browser web ogni secondo. JavaScript nel browser Web utilizza il nome del file per impostare l' srcattributo del <img>tag HTML. Funziona ma è molto lento da non sembrare un video in live streaming. Hai già provato la tua idea? Funziona velocemente?
— O Connor
@OConnor Per una visualizzazione a basso framerate di livello molto semplice, è meglio che il client esegua il pull piuttosto che il server spinga. Considera anche TCP e UDP. Entrambi hanno i loro pro e contro. È più semplice solo per il cliente richiedere una nuova immagine ogni volta che ne ha bisogno.
— Jerry Dodge

Risposte:

28

VLC include anche un plug-in ActiveX che può visualizzare il feed in una pagina web:

http://wiki.videolan.org/ActiveX/HTML

<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
     codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
     width="640" height="480" id="vlc" events="True">
   <param name="Src" value="rtsp://cameraipaddress" />
   <param name="ShowDisplay" value="True" />
   <param name="AutoLoop" value="False" />
   <param name="AutoPlay" value="True" />
   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://cameraipaddress" ></embed>
</OBJECT>
— Russell
fonte
2
Per la cronaca, a partire da questo momento, VLC Media Player è stato creato da 774 sviluppatori.
— Jerry Dodge
15
chrome ha bloccato i plugin npapi dopo il 1 settembre 2015.it non funziona più.
— user2988855
1
Il link axvlc.cab è morto
— hailinzeng
cosa fare se il plugin è bloccato qualsiasi altra soluzione alternativa disponibile?
— naveenkumar.s
18

Non è facile visualizzare lo streaming video in diretta da una telecamera IP su una pagina Web perché è necessaria un'ampia larghezza di banda Internet e un ottimo lettore video compatibile con i principali browser.

Ma fortunatamente ci sono alcuni servizi basati su cloud che possono fare questo lavoro per noi. Uno dei migliori è IPCamLive . Questo servizio può ricevere il flusso video RTSP / H264 da una telecamera IP e trasmetterlo agli spettatori. IPCamLive ha un componente lettore video Flash / HTML5 che visualizzerà il video su PC, MAC, tablet o dispositivo mobile. La cosa migliore è che questo sito genera lo snippet HTML necessario per incorporare il video live in questo modo:

<iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>

Quindi dobbiamo solo copiarlo e incollarlo nel nostro file HTML senza alcuna modifica.

— Adorjan Princz
fonte
1
Questo e spettacolare. Una soluzione tanto necessaria.
— Zakir HC
Aggiornamento: apparentemente non funziona ora. Mostra questo: "Questa fotocamera non può essere incorporata. Passa al pacchetto Standard o Professional per l'incorporamento."
— muglikar
1
Tutto quello che devi fare è aggiornare la tua fotocamera al pacchetto Standard / Professional e sarai in grado di incorporare la tua fotocamera nella tua pagina web.
— Adorjan Princz
17

Approssimativamente puoi avere 3 scelte per visualizzare il flusso video RTSP in una pagina web:

  1. Vero giocatore
  2. Giocatore Quicktime
  3. Lettore VLC

Puoi trovare il codice per incorporare ActiveX tramite la ricerca su Google.

Per quanto ne so, ci sono alcune limitazioni per ogni giocatore.

  1. Realplayer non supporta i video H.264 in modo nativo, è necessario installare un plug-in quicktime per Realplayer per ottenere la decodifica H.264.
  2. Il lettore Quicktime non supporta il trasporto RTP / AVP / TCP e il suo trasporto RTP / AVP (UDP) non include la perforazione NAT. Quindi l'unico trasporto fattibile è il tunneling HTTP nella distribuzione WAN.
  3. VLC non supporta nemmeno la perforazione NAT per il trasporto RTP / AVP, ma è disponibile il trasporto RTP / AVP / TCP.
— cifrario
fonte
2
Le versioni recenti di Quicktime Player hanno abbandonato il supporto RTSP a partire da Mavericks.
— Mike
totem su linux / ubuntu supporta anche lo streaming rtsp
— Oki Erie Rinaldi
8

Se desideri trasmettere in streaming RTSP direttamente alla pagina Web, temo che la tua unica opzione sia utilizzare un visualizzatore di controlli ActiveX fornito con la fotocamera. Questa è una IP Cam con connessione diretta -> Viewer, e dovrebbe essere davvero la più veloce. Non sono sicuro del motivo per cui hai problemi; Axis ActiveX funziona abbastanza bene per me.

Tuttavia, questa opzione non è molto efficiente in termini di larghezza di banda e non è possibile servire più visualizzatori simultanei (la maggior parte delle telecamere IP ha un limite di 10 visualizzatori). L'opzione migliore è caricare un singolo flusso RTSP su un server di streaming ospitato centralmente, che convertirà il tuo flusso in RTMP / MPEG-TS e lo pubblicherà su lettori Flash / set-top box.

Wowza, Erlyvideo, Unreal Media Server, Red5 sono le tue opzioni.

— user1390208
fonte
Questa è decisamente la strada da percorrere. Migliore gestione della larghezza di banda e transcodifica anche in un formato adatto per il web, ad esempio RTMP per un lettore flash. Qualcuno ha esperienza con l'utilizzo di uno qualsiasi dei server multimediali di cui sopra e può elaborare facilità di installazione, prestazioni, latenza, ecc.? Avevo provato con Red 5 ma ho trovato alcune cose un po 'complicate da far funzionare.
— elMarquis,
8

Ho trovato una soluzione semplice e funzionante dalla documentazione ufficiale di VLC per il plugin web

https://wiki.videolan.org/Documentation:WebPlugin/

Ho modificato un po 'il codice e l'ho fatto funzionare. Ecco il mio codice-

<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" autoplay="yes" loop="no" width="300" height="200" target="rtsp://10.20.50.15:554/0/888888:888888/main" />
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" style="display:none;"></object>

Nota: lo snippet di cui sopra utilizza il rtspformato URL supportato dalla mia telecamera IP. Quindi devi ottenere lo stesso per la tua fotocamera. È possibile ottenere queste informazioni consultando il supporto del fornitore della fotocamera. Tieni inoltre presente che l'ho testato su Chrome (utilizzando un plug-in ActiveX per Chrome) e altri browser (inclusi i browser dei telefoni cellulari) potrebbero non essere supportati.

— Swastik Padhi
fonte
3
tieni presente che hai trovato alcune finestre solo activeX schifo, non una "soluzione" come la chiami tu, e non funzionerà su nient'altro (sistemi operativi reali, cellulari, console, ecc.).
— chip il
@nonchip ah beh, credo che tu abbia una soluzione migliore per il problema. Inoltre, ho testato il plug-in anche su telefoni Android, quindi non è solo Windows . E comunque, mi piacerebbe davvero sapere quale alternativa multipiattaforma hai in mente per visualizzare i feed delle telecamere CCTV.
— Swastik Padhi
scusa, ma è una bugia. l'activex che incorpori è, per definizione, solo vincente. quello che fa Chrome su Android è riconoscere x-vlc-plugin, ignorare le cose proprietarie e semplicemente spingere un'app vlc intesa. inoltre, riguardo alle alternative multipiattaforma che hai menzionato: l'unica soluzione attuale sarebbe quella di utilizzare ffmpeg / avconv / etc in un server web per reimpacchettare il flusso rtsp su http / websocket / webrtc. quindi aggiungi un <video>tag e il gioco è fatto.
— chip
1
lo streaming non è in riproduzione, potrebbe essere questo problema (codebase) http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab404 non trovato
— Vara Prasad
7

Inoltre puoi provare opensource WebRTC Media Server Kurento

Che può riprodurre il flusso video RTSP e inviarlo a WebRTC o transcodificarlo su RTMP o salvarlo sul server.

Lo stiamo utilizzando in Produzione per i seguenti casi:

 - Da WebRTC a Webrtc (molti a molti)
 - Da WebRTC a RTMP
 - RTSP a WebRTC
— Denis Lisitskiy
fonte
1
il link non funziona più, comunque grazie per info.
— medskill
il collegamento è di nuovo attivo @medskill
— activedecay
5

Wowza

  1. Ri-streaming da RTSP a RTMP (Flash Player) Non funziona con Android Chrome o FF (Flash non è supportato)
  2. Ri-streaming da RTSP a HLS

Web Call Server (Flashphoner)

  1. Ri-streaming da RTSP a WebRTC (funzionalità del browser nativa per Chrome e FF su Android o desktop)

  2. Ri-streaming RTSP su Websocket (iOS Safari e Chrome / FF Desktop)

Dai un'occhiata a questo articolo .

— ankitr
fonte
È davvero un ottimo articolo. Flashphoner sembra una soluzione promettente.
— elMarquis,
3

So che questo post è vecchio ma stavo cercando qualcosa di molto simile l'altro giorno (guarda il feed video RTSP della mia telecamera IP su una semplice pagina html senza alcun plug-in ActiveX di fantasia). Fortunato me, ho trovato una soluzione! Si basa su ffmpeg, NodeJS, NGINX (non obbligatorio ma utile) e Node Media Server .

La descrizione nel collegamento è dettagliata e facile da seguire, ma avevo ancora alcune modifiche da affrontare prima di farlo funzionare (per quanto riguarda gli endpoint sul server NodeJS). Ho fatto una domanda e ho ottenuto una risposta valida e funzionante .

— Hauns TM
fonte
3

Prova QuickTime Player! Ecco il mio JavaScript che genera l'oggetto incorporato in una pagina web e riproduce il flusso:

//SET THE RTSP STREAM ADDRESS HERE
var address = "rtsp://192.168.0.101/mpeg4/1/media.3gp";

var output = '<object width="640" height="480" id="qt" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">';
    output += '<param name="src" value="'+address+'">';
    output += '<param name="autoplay" value="true">';
    output += '<param name="controller" value="false">';
    output += '<embed id="plejer" name="plejer" src="/poster.mov" bgcolor="000000" width="640" height="480" scale="ASPECT" qtsrc="'+address+'"  kioskmode="true" showlogo=false" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">';
    output += '</embed></object>';

    //SET THE DIV'S ID HERE
    document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output;
— Cipi
fonte
Grazie. Ho esplorato l'opzione quicktime, ma c'era una latenza davvero negativa.
— elMarquis
Ciò è dovuto al buffer di 3 secondi di QuickTime ... che infastidisce anche me ... Ehi, se trovi qualcos'altro che funziona, per favore pubblica qui! Ciao!
— Cipi
2
Ciao hai un bug, "indirizzo" è scritto "asdress" più tardi. Saluti
— Clinton Green
3
Perché è scritto in JavaScript?
— Thomas Bennett
@Clinton: risolto.
— AlastairG il
2

Ho pubblicato un progetto su Github che ti aiuta a trasmettere l'ip / telecamera di rete sul browser web in tempo reale senza bisogno di plug-in, che ho contribuito al progetto open source con licenza MIT che potrebbe essere abbinato alle tue esigenze, ecco qui:

Streaming IP / telecamera di rete sul browser web utilizzando NodeJS

Non esiste ancora un pacchetto completo di framework, ma è un kickstart che potrebbe darti un modo per procedere oltre.
Come studente, spero che questo sia utile e per favore contribuisca a questo progetto.

— Phok Chanrithisak
fonte
2

Un'opzione potrebbe essere quella di utilizzare una sorta di server / gateway di streaming. Ho provato varie soluzioni (vlc, ffmpeg e alcune altre) e quella che ha funzionato meglio per me è stato il server Janus WebRTC. È un po 'difficile da configurare e dovrai compilarlo dal sorgente (quando l'ho provato la versione nei repository di Ubuntu non aveva il supporto RTSP), ma hanno istruzioni dettagliate per la compilazione e documentazione su come impostare tutto.

Sono riuscito a ottenere feed video e audio da 3 telecamere FullHD sulla rete locale con pochissimo ritardo. Posso confermare che funziona con le fotocamere Dahua e Hikvision (non sono sicuro se tutti i modelli).

Quello che ho usato era Ubuntu Server 18.04 con server web Apache e Chrome come browser (non funzionava su Firefox per impostazione predefinita, ma forse ci sono soluzioni alternative).

— ilmix
fonte
1

Microsoft Mediaplayer può fare tutto ciò di cui hai bisogno. Utilizzo i servizi MS Medias del server 2003/2008 per fornire video come Broadcast e Unicast Stream. Questo servizio potrebbe OTTENERE lo streaming dalla cam e trasmetterlo. Allora hai "solo" il problema di "visualizzare" quell'immagine in TUTTI i browser in tutti i sistemi operativi

Il mio consiglio: controlla prima il sistema operativo, quindi carica il tuo plugin. su Windows è facile prendere WMP, su altri prendere MS Silverligt ...

— uwe
fonte
1

Per scopi come questo utilizzo VLC come server di ridistribuzione. Hai detto che puoi prendere il video con VLC? Fare clic con il pulsante destro del mouse sul supporto in VLC, selezionare "stream" e scegliere le opzioni. Puoi anche farlo con la riga di comando, che offre potenziali vantaggi di varie opzioni (transcodifica, ridimensionamento, compressione, desinterlacciamento). Ecco un batch che avvia la distribuzione di VLC dall'origine alla sua porta 555 (quindi dovrai digitare rstp: // myvlcserveripaddress: 555 nell'opzione src sulla pagina web per ottenere lo streaming)

cd \
cd C:\Program Files (x86)\VideoLAN\VLC\

vlc --logo-file C:\logo.png --logo-position 5 --logo-opacity 200 --logo-x 900 --logo-y -2 "mmsh://typeyoursourceIPhere:554" :sout=#transcode{vcodec=div3,vb=800,scale=0,acodec=mpga,ab=128,channels=2,samplerate=44100}:duplicate{dst=rtp{mux=ts,sdp=rtsp://:555/stream}} :sout-all :sout-keep

Qui , hai un esempio di una pagina web che incorpora il lettore (basato sul plugin VLC).

— Grigory Kornilov
fonte
-7

Tutte le soluzioni di cui sopra non funzionano più o richiedono troppo tempo per capirlo.

Questa è la risposta definitiva. Puoi incorporare il link rtsp nel tuo sito web.

Copia il codice seguente nel tuo editor html:

<!--- BEGIN PLAYER --->

<!-- webbot bot="HTMLMarkup" startspan ---->

<object ID="MediaPlayer" WIDTH="320" HEIGHT="270" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">

<param name="autoStart" value="True">

<param name="filename" value="rtsp://xxx.xxx.xxx:xxxx">

<param NAME="ShowControls" VALUE="False">

<param NAME="ShowStatusBar" VALUE="False">

<embed TYPE="application/x-mplayer2" SRC="rtsp://xxx.xxx.xxx:xxxx" NAME="MediaPlayer" WIDTH="320" HEIGHT="270" autostart="1" showcontrols="0"></embed></object>

<!-- webbot bot="HTMLMarkup" endspan ---->

<!--- end PLAYER --->

Se tutto questo è troppo complicato e ancora non lo risolve, lascia che ti aiuti.

L'ho fatto per i miei clienti.

Fare clic qui http://www.mhcreative.com.my/ipcameratowebsite/

— Mazlan Halim
fonte
Strano, finisce per incorporare VLC Media Player, è perché VLC è considerato il "lettore multimediale predefinito" per le pagine web?
— Jerry Dodge
Aspetta, questo è WMP, presumo che funzionerebbe solo su Windows.
— Jerry Dodge
2
l'implementazione del tuo sito non è quella che hai descritto nella tua risposta. Stai utilizzando il servizio click2stream, per favore cambia la tua risposta, perché perdiamo tempo. Dici degli altri che non funzionano, ma la tua soluzione non esiste.
— stefan2410
3
Strano che scrivi: "Questa è la risposta definitiva". Che dire dell'essere umili, soprattutto quando si lascia una risposta con una tale mancanza di qualità?
— Pille
1
Questo approccio utilizza un controllo x attivo (per IE 10 e versioni precedenti), quindi torna a un altro plug-in per altri browser. Come accennato sembra incorporare VLC media player nella maggior parte dei casi. Non è un approccio terribile, ma convincere gli utenti a installare un plugin sarà sempre un po 'incostante. D'altra parte, se hai un pubblico limitato e puoi dettare la loro configurazione, questo approccio potrebbe essere ok.
— elMarquis,
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.