web-dev-qa-db-ger.com

Wie kann ich einen RTSP-Videostream auf einer Webseite anzeigen?

Ich habe eine IP-Kamera, die einen Live-RTSP-Videostream liefert. Ich kann den VLC-Mediaplayer verwenden, um den Feed anzuzeigen, indem er die URL angibt:

rtsp://cameraipaddress

Aber ich muss den Feed auf einer Webseite anzeigen. Der Kamerahersteller lieferte ein ActiveX-Steuerelement, das funktioniert, aber es ist sehr fehlerhaft und führt dazu, dass der Browser häufig hängt.

Kennt jemand alternative Video-Plugins, die ich verwenden könnte, die RTSP unterstützen? 

Die Kamera kann für das Streaming in H264 oder MPEG4 konfiguriert werden.

72
elMarquis

VLC wird auch mit einem ActiveX-Plugin geliefert, das den Feed auf einer Webseite anzeigen kann:

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>
27
Russell

Sie haben drei Möglichkeiten, um den RTSP-Videostream auf einer Webseite anzuzeigen:

  1. Echter Spieler
  2. Quicktime-Player
  3. VLC-Spieler

Den Code zum Einbetten des ActiveX finden Sie über die Google-Suche.

Soweit ich weiß, gibt es für jeden Spieler einige Einschränkungen.

  1. Realplayer unterstützt H.264-Video nicht nativ. Sie müssen ein Quicktime-Plugin für Realplayer installieren, um eine H.264-Decodierung zu erreichen.
  2. Der Quicktime-Player unterstützt keinen RTP/AVP/TCP-Transport, und der RTP/AVP (UDP) -Transport beinhaltet kein NAT -Loch. Daher ist der einzig mögliche Transport das HTTP-Tunneln in der Bereitstellung von WAN.
  3. VLC unterstützt auch kein NAT -Lochen für den RTP/AVP-Transport, aber der RTP/AVP/TCP-Transport ist verfügbar.
17
ciphor

Es ist nicht einfach, Live-Videostream von einer IP-Kamera auf einer Webseite anzuzeigen, da Sie eine große Bandbreite im Internet und einen hervorragenden Videoplayer benötigen, der mit den gängigen Browsern kompatibel ist.

Glücklicherweise gibt es jedoch einige Cloud-basierte Dienste, die diese Aufgabe für uns erledigen können. Eines der besten ist IPCamLive . Dieser Dienst kann einen RTSP/H264-Videostrom von einer IP-Kamera empfangen und an die Zuschauer übertragen. IPCamLive verfügt über eine Flash/HTML5-Videoplayer-Komponente, mit der das Video auf einem PC, MAC, Tablet oder Handy angezeigt wird. Das Beste ist, dass diese Site das benötigte HTML-Snippet zum Einbetten des Live-Videos wie folgt generiert: 

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

Wir müssen es also einfach kopieren und in unsere HTML-Datei einfügen, ohne dass Änderungen vorgenommen werden müssen.

16
Adorjan Princz

Wenn Sie RTSP direkt auf eine Webseite streamen möchten, besteht die einzige Möglichkeit darin, einen ActiveX-Steuerelement-Viewer zu verwenden, der mit der Kamera geliefert wird. Dies ist eine direkte Verbindung IP Cam -> Viewer und sollte wirklich die schnellste sein. Nicht sicher, warum Sie Probleme haben; Axis ActiveX funktioniert ziemlich gut für mich.

Diese Option ist jedoch nicht wirklich bandbreiteneffizient und Sie können nicht mehrere gleichzeitige Viewer bedienen (die meisten IP-Cams haben ein Limit von 10 Viewern). Die bessere Option ist, einen einzelnen RTSP-Stream auf einen zentral gehosteten Streaming-Server hochzuladen, der Ihren Stream in RTMP/MPEG-TS konvertiert und in Flash-Playern/Set-Top-Boxen veröffentlicht.

Wowza, Erlyvideo, Unreal Media Server, Red5 sind Ihre Optionen. 

8
user1390208

Fand eine einfache und funktionierende Lösung aus der offiziellen VLC-Dokumentation für das Web-Plugin

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

Der Code wurde ein wenig geändert und funktioniert. Hier ist mein Code-

<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>

Hinweis: Das obige Snippet verwendet das rtsp-URL-Format, das von meiner IP-Kamera unterstützt wird. Sie müssen also dasselbe für Ihre Kamera bekommen. Sie erhalten diese Informationen, wenn Sie sich an den Kamerahersteller-Support wenden. Denken Sie auch daran, dass ich es unter Chrome (mit einem ActiveX-Plugin für Chrome) und anderen Browsern (einschließlich der Browser von Mobiltelefonen) getestet habe. [] Wird möglicherweise nicht unterstützt.

6
CrakC

Wowza

  1. Erneutes Streaming von RTSP nach RTMP (Flash Player) Funktioniert nicht mit AndroidChrome oder FF (Flash wird nicht unterstützt)
  2. Erneutes Streaming von RTSP in HLS

Web Call Server (Flashphoner)

  1. Re-Streaming von RTSP zu WebRTC (native Browserfunktion für Chrome und FF entweder auf Android oder auf dem Desktop)

  2. Erneutes Streaming von RTSP auf Websockets (iOS Safari und Chrome/FF Desktop)

Werfen Sie einen Blick auf diesen Artikel .

5
ankitr

Sie können auch den OpenSource-WebRTC-Medienserver ausprobieren Kurento

Die können RTSP-Videostream abspielen und an WebRTC senden oder in RTMP umwandeln oder auf dem Server speichern.

Wir setzen es in der Produktion für folgende Fälle ein:

 - WebRTC zu Webrtc (viele bis viele) 
 - WebRTC zu RTMP 
 - RTSP an WebRTC 
5
Denis Lisitskiy

Testen Sie den QuickTime Player! Hier ist mein JavaScript, das das eingebettete Objekt auf einer Webseite generiert und den Stream wiedergibt:

//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="'+adsress+'">';
    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;
4
Cipi

Ich weiß, dass dieser Beitrag alt ist, aber ich habe neulich nach etwas sehr Ähnlichem gesucht (sehen Sie sich den RTSP-Video-Feed meiner IP-Cam auf einer einfachen HTML-Seite an, ohne auf irgendwelche ActiveX-Plugins). Zum Glück habe ich eine Lösung gefunden! Es basiert auf ffmpeg, NodeJS, NGINX (nicht obligatorisch, aber nützlich) und Node Media Server .

Die Beschreibung im Link ist detailliert und einfach zu befolgen, aber ich hatte noch ein paar Änderungen zu erledigen, bevor ich sie zum Laufen brachte (in Bezug auf Endpunkte auf dem NodeJS-Server). Ich machte ein eigene Frage und bekam ein gutes und funktionierendes Antwort .

2
Hauns TM

der Microsoft Mediaplayer kann alles, was Sie brauchen ... Ich benutze den MS Mediaservices von 2003/2008 Server, um Video als Broadcast und Unicast Stream zu liefern .. Dieser Dienst könnte den Stream von der Cam erhalten und Broadcast übertragen. Dann haben Sie "nur" das Problem, dieses Bild in ALLEN Browers auf allen Betriebssystemen "anzuzeigen"

Mein Tipp: Überprüfen Sie zuerst das Betriebssystem, laden Sie dann Ihr Plugin. Unter Windows ist es einfach, WMP zu übernehmen, bei anderen MS Silverligt ... 

1
uwe

Überprüfen Sie die Medienstream-Bibliothek von Axis, das die Medienquellenerweiterung weiterleitet 

Sie implementieren eine Pipeline, die der von Gstreamer in JS ähnelt, mit dem h264-Depay. Hinweis: Das in den js konsumierte Streaming wird nicht direkt in rtsp, sondern in einem ws: // von der Bibliothek selbst auf einem node.js-rtsp-websocket-Proxy gekapselt.

1
loreii

Für Zwecke wie diesen verwende ich VLC als Umverteilungsserver. Du hast gesagt, dass du das Video mit VLC sehen kannst? Klicken Sie mit der rechten Maustaste auf das Medium in VLC, wählen Sie "Stream" und wählen Sie Ihre Optionen. Sie können dies auch über die Befehlszeile tun, die Ihnen potenzielle Vorteile verschiedener Optionen bietet (Transcoding, Skalieren, Komprimieren, Desinterlacing) .. Hier ist ein Stapel, der die VLC-Verteilung von der Quelle an den eigenen 555-Port startet (so haben Sie es.) rstp: // myvlcserveripaddress: 555 in Ihre src-Option auf der Webseite eingeben, um den Stream abzurufen)

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

Hier haben Sie ein Beispiel einer Webseite, auf der der Player eingebettet ist (basierend auf dem VLC-Plugin).

1

Ich habe ein Projekt auf Github veröffentlicht, das Ihnen hilft, die IP-/Netzwerkkamera in Echtzeit in den Webbrowser zu streamen, ohne dass ein Plugin erforderlich ist. Dieses Projekt habe ich zu einem Open Source-Projekt unter MIT beigetragen :

IP/Netzwerkkamera im Webbrowser mit NodeJS streamen

Es gibt noch kein vollständiges Rahmenpaket, aber es ist ein Kickstart, mit dem Sie möglicherweise fortfahren können.
Als Student hoffe ich, dass dies hilfreich ist und bitte zu diesem Projekt beitragen.

1

Für den einen, den ich verwende, funktioniert die folgende URL:

rtmp://<IP_address>/flash/11:<username>:<password>

zum Beispiel:

rtmp://192.168.1.10:1935/flash/11:admin:admin

Sie müssen die IP-Adresse Ihrer IP-Kamera, Ihren Benutzernamen und Ihr Kennwort finden. 

Wenn die oben angegebene URL in einen Browser eingegeben wird, wird ihr Stream erkannt und ein Mediaplayer geöffnet. Die richtige URL für Ihre Marke kann gefunden werden, indem Sie sich bei der gefundenen IP-Adresse anmelden. (Verwenden Sie einen Scanner wie Nmap, einen verärgerten IP-Scanner usw.)

 find URL in Javascript

0
Prometheus