Come posso visualizzare un stream video RTSP in una pagina Web?

Ho una telecamera IP che fornisce un stream video RTSP dal vivo. Posso usare VLC media player per visualizzare il feed fornendolo con l’URL:

rtsp://cameraipaddress 

Ma ho bisogno di visualizzare il feed su una pagina web. Il fornitore della videocamera ha fornito un controllo ActiveX che ho funzionato, ma è molto buggato e causa il blocco frequente del browser.

Qualcuno sa di eventuali plug-in video alternativi che potrei usare quale supporto RTSP?

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

VLC ha anche un plugin ActiveX in grado di visualizzare il feed in una pagina web:

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

        

Approssimativamente puoi avere 3 scelte per visualizzare lo streaming 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 di google.

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

  1. Realplayer non supporta il 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 trasporto RTP / AVP (UDP) non include la perforatura NAT. Pertanto, l’unico trasporto ansible è il tunneling HTTP nella distribuzione WAN.
  3. VLC non supporta la perforatura NAT per il trasporto RTP / AVP, ma è disponibile il trasporto RTP / AVP / TCP.

Non è facile visualizzare lo streaming video live da una telecamera IP su una pagina Web perché è necessaria un’ampia larghezza di banda internet e un ottimo riproduttore video compatibile con i principali browser.

Ma fortunatamente ci sono alcuni servizi basati sul cloud che possono fare questo lavoro per noi. Uno dei migliori è IPCamLive . Questo servizio può ricevere streaming video RTSP / H264 da una telecamera IP e può trasmetterlo ai telespettatori. IPCamLive ha un componente video player Flash / HTML5 che visualizzerà il video su PC, MAC, tablet o cellulare. La cosa più bella è che questo sito genera lo snippet HTML necessario per incorporare il video live in questo modo:

  

Quindi, abbiamo solo bisogno di copiare incollarlo nel nostro file HTML senza alcuna modifica.

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

Tuttavia, questa opzione non è realmente efficiente per la larghezza di banda e non puoi servire più visualizzatori simultanei (la maggior parte delle IP Cam ha un limite di 10 spettatori). L’opzione migliore è quella di caricare un singolo stream RTSP su server di streaming con hosting centrale, che convertirà il tuo stream in RTMP / MPEG-TS e lo pubblicherà su player Flash / Set-Top box.

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

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

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

Modificato un po ‘il codice e l’ho fatto funzionare. Ecco il mio codice-

   

Nota: il frammento sopra riportato utilizza il formato rtsp supportato dalla mia telecamera IP. Quindi è necessario ottenere lo stesso per la tua fotocamera. È ansible ottenere queste informazioni consultando il supporto del fornitore della fotocamera. Inoltre, tieni presente che l’ho provato su Chrome (utilizzando un plug-in activeX per Chrome) e altri browser (inclusi i browser per cellulari) potrebbero non essere supportati.

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

Server di chiamate Web (Flashphoner)

  1. Ri-Streaming RTSP to WebRTC (Funzionalità del browser nativo per Chrome e FF su Android o desktop)

  2. Ri-Streaming da RTSP a Websockets (iOS Safari e Chrome / FF Desktop)

Dai un’occhiata a questo articolo .

Prova il QuickTime Player! Ecco il mio JavaScript che genera l’object incorporato in una pagina Web e riproduce lo stream:

 //SET THE RTSP STREAM ADDRESS HERE var address = "rtsp://192.168.0.101/mpeg4/1/media.3gp"; var output = ''; output += ''; output += ''; output += ''; output += ''; output += ''; //SET THE DIV'S ID HERE document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output; 

Inoltre puoi provare opensource WebRTC Media Server Kurento

Quale può riprodurre stream video RTSP e inviarlo a WebRTC o transcodificare a RTMP o salvare sul server.

Lo stiamo utilizzando su Production per i seguenti casi:

  - WebRTC to Webrtc (molti a molti)
  - WebRTC su RTMP
  - RTSP to WebRTC

il Microsoft Mediaplayer può fare tutto, è necessario. Io uso MS Mediaservices del server 2003/2008 per fornire Video come Broadcast e Unicast Stream. Questo servizio potrebbe OTTENERE lo streaming dalla webcam e trasmetterlo. Di avere “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 è easy -take WMP, su altri prendere MS Silverligt …

Per scopi come questo uso VLC come server di ridistribuzione. Hai detto che puoi prendere il video con VLC? Fai clic con il pulsante destro del mouse su VLC, seleziona “stream” e scegli le opzioni. Puoi anche farlo con la riga di comando, che ti offre i potenziali benefici delle varie opzioni (transcodifica, ridimensionamento, compressione, desinterlacciamento). Ecco un batch che avvia la distribuzione VLC dall’origine alla propria porta 555 (quindi dovrai digitare rstp: // myvlcserveripaddress: 555 nella tua opzione src sulla pagina web per ottenere lo stream)

 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 player (basato sul plugin VLC).

Il modo più diffuso e affidabile per condividere video in diretta su un sito web è RTMP (utilizzando un player Flash) o HLS (HTTP Live Streaming) che funziona anche su dispositivi mobili su HTML5, ma comporta una grande latenza.

Per trasformare lo stream RTSP in RTMP / HLS è necessario un server relay (per connettersi al stream RTSP e quindi fornire RTMP / HLS ai client Web). Wowza Streaming Engine 4.2+ fornisce tale funzionalità ed è disponibile gratuitamente con una licenza per sviluppatori ad uso limitato. http://www.wowza.com/streaming/ip-camera-streaming

Uno script per gestirlo e pubblicare via web è disponibile all’indirizzo http://www.videowhisper.com/?p=PHP-IP-Camera-Stream , anche con licenza limitata gratuita. Inoltre, la demo online per quello script consente di pubblicare i tuoi stream RTSP sul web per un po ‘di tempo (24 ore).

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

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

Copia il codice seguente nel tuo editor html:

           

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

L’ho fatto per i miei clienti.

Clicca qui http://www.mhcreative.com.my/ipcameratowebsite/