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

Ich habe eine IP-Kamera, die einen Live-RTSP-Videostream bereitstellt. Ich kann den VLC Media Player verwenden, um den Feed anzuzeigen, indem ich ihm die URL zur Verfügung stelle:

rtsp://cameraipaddress

Aber ich muss den Feed auf einer Webseite anzeigen. Der Kameraanbieter hat ein ActiveX-Steuerelement bereitgestellt, das ich zum Laufen gebracht habe, aber es ist wirklich fehlerhaft und führt dazu, dass der Browser häufig hängen bleibt.

Kennt jemand alternative Video-Plugins, die RTSP unterstützen könnten?

Die Kamera kann so konfiguriert werden, dass sie entweder in H264 oder MPEG4 gestreamt wird.

VLC enthält außerdem ein ActiveX-Plugin, mit dem der Feed auf einer Webseite angezeigt werden 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>

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

Glücklicherweise gibt es einige Cloud-basierte Dienste, die diese Aufgabe für uns übernehmen können. Eines der besten ist IPCamLive . Dieser Dienst kann RTSP / H264-Videostream von einer IP-Kamera empfangen und an die Zuschauer senden. IPCamLive verfügt über eine Flash / HTML5-Video-Player-Komponente, die das Video auf einem PC, MAC, Tablet oder Handy anzeigt. Das Beste ist, dass diese Site das erforderliche 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 nur kopieren und ohne Änderungen in unsere HTML-Datei einfügen.

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

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

Sie finden den Code zum Einbetten von activeX über die Google-Suche.

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

1. Realplayer unterstützt H.264-Videos 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 enthält kein NAT-Locher. Der einzig mögliche Transport ist daher das HTTP-Tunneling bei der WAN-Bereitstellung.
3. VLC unterstützt weder NAT-Locher für den RTP / AVP-Transport, aber RTP / AVP / TCP-Transport ist verfügbar.

Wenn Sie RTSP direkt auf eine Webseite streamen möchten, besteht Ihre einzige Möglichkeit leider darin, einen mit der Kamera gelieferten ActiveX Control Viewer zu verwenden. Dies ist eine direkte Verbindung IP Cam -> Viewer und sollte wirklich die schnellste sein. Ich bin mir 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-Kameras haben ein Limit von 10 Zuschauern). Die bessere Option besteht darin, 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.

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

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 rtspURL-Format, das von meiner IP-Kamera unterstützt wird. Sie müssen also dasselbe für Ihre Kamera erhalten. Sie können diese Informationen erhalten, indem Sie sich an den Support Ihres Kameraherstellers wenden. Denken Sie auch daran, dass ich es auf Chrome getestet habe (mit einem ActiveX-Plugin für Chrome) und andere Browser (einschließlich Handy-Browser) möglicherweise nicht unterstützt werden.

Sie können auch OpenSource WebRTC Media Server Kurento ausprobieren

Welches kann RTSP-Videostream abspielen und an WebRTC senden oder an RTMP transkodieren oder auf dem Server speichern.

Wir verwenden es in der Produktion für die folgenden Fälle:

 - WebRTC an Webrtc (viele zu viele)
 - WebRTC zu RTMP
 - RTSP zu WebRTC

Wowza

1. Re-Streaming von RTSP zu RTMP (Flash Player) Funktioniert nicht mit Android Chrome oder FF (Flash wird nicht unterstützt)
2. RTSP erneut an HLS streamen

Web Call Server (Flashphoner)

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

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

Schauen Sie sich diesen Artikel an .

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

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

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-Kamera auf einer einfachen HTML-Seite ohne ausgefallene ActiveX-Plugins an). 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 leicht zu befolgen, aber ich musste noch einige Änderungen vornehmen, bevor ich sie zum Laufen brachte (in Bezug auf Endpunkte auf dem NodeJS-Server). Ich stellte eine eigene Frage und bekam eine gute und funktionierende Antwort .

Überprüfen Sie die Medienstrombibliothek von Axis, die die Medienquellenerweiterung weiterleitet

• https://github.com/AxisCommunications/media-stream-library-js
• https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API

Sie implementieren eine Pipeline ähnlich wie Gstreamer in JS mit dem darin enthaltenen h264-Depay. Hinweis: Das im js verbrauchte Streaming ist nicht direkt rtsp, sondern wird von der Bibliothek selbst auf einem rtsp-websocket-Proxy von node.js in ein ws: // gekapselt.

Ich habe ein Projekt auf Github veröffentlicht, mit dem Sie IP- / Netzwerkkameras in Echtzeit ohne Plug-in auf einen Webbrowser streamen können. Ich habe zu einem Open-Source-Projekt unter MIT-Lizenz beigetragen, das möglicherweise Ihren Anforderungen entspricht.

Streaming von IP / Netzwerkkamera im Webbrowser mit NodeJS

Es gibt noch kein vollständiges Framework-Paket, aber es ist ein Kickstart, mit dem Sie möglicherweise weiter vorgehen können.
Als Student hoffe ich dies hilfreich und bitte tragen Sie zu diesem Projekt bei.

Der Microsoft Mediaplayer kann alles, was Sie brauchen. Ich verwende den MS Mediaservices Server 2003/2008, um Videos als Broadcast- und Unicast-Stream bereitzustellen. Dieser Dienst kann den Stream von der Kamera abrufen und senden. Dann haben Sie "nur" das Problem, dieses Bild in ALLEN Browsern auf allen Betriebssystemen "anzuzeigen"

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

Für Zwecke wie diesen verwende ich VLC als Umverteilungsserver. Du hast gesagt, du darfst das Video mit VLC sehen? 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, wodurch Sie potenzielle Vorteile verschiedener Optionen (Transcodierung, Skalierung, Komprimierung, Desinterlacing) erhalten. Hier ist ein Stapel, der die VLC-Verteilung von der Quelle an den eigenen 555-Port startet (Sie müssen also 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).

Eine Möglichkeit wäre die Verwendung eines Streaming-Servers / Gateways. Ich habe verschiedene Lösungen ausprobiert (vlc, ffmpeg und einige mehr) und die für mich am besten funktionierende war der Janus WebRTC-Server. Es ist etwas schwierig einzurichten, und Sie müssen es aus dem Quellcode kompilieren (als ich es ausprobierte, hatte die Version in Ubuntu-Repos keine RTSP-Unterstützung), aber sie haben detaillierte Anweisungen zum Kompilieren und Dokumentation zum Einrichten.

Ich habe es geschafft, Video- und Audio-Feeds von 3 FullHD-Kameras im lokalen Netzwerk mit sehr geringer Verzögerung zu erhalten. Ich kann bestätigen, dass es mit Dahua- und Hikvision-Kameras funktioniert (nicht sicher, ob alle Modelle).

Was ich verwendet habe, war Ubuntu Server 18.04, auf dem Apache-Webserver ausgeführt wird, und Chrome als Browser (es funktionierte standardmäßig nicht in Firefox, aber möglicherweise gibt es Problemumgehungen dafür).

Alle oben genannten Lösungen funktionieren nicht mehr oder sind zu zeitaufwändig, um dies herauszufinden.

Dies ist die ultimative Antwort. Sie können einen RTSP-Link in Ihre Website einbetten.

Kopieren Sie den folgenden Code in Ihren HTML-Editor:

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

Wenn das alles zu kompliziert ist und es immer noch nicht löst, lass mich dir helfen.

Ich habe das für meine Kunden getan.

Klicken Sie hier http://www.mhcreative.com.my/ipcameratowebsite/