2Betten Sie einen Live-RTSP-Stream in eine Webseite ein

Veröffentlicht durch & abgelegt unter Intelligentes Zuhause & IoT. Zuletzt aktualisiert .

Ich habe kürzlich an meinem Smarthome-Setup gearbeitet und eines der Dinge, die ich einrichten wollte, ist ein Tablet mit einer Touchscreen-Weboberfläche zur Verwaltung meines Smart Homes. Eines der ersten Probleme, das ich lösen musste, war das Streamen meines CCTV-Feeds in einen Webbrowser…

Das Problem

Meine CCTV-Kamera, wie viele, stellt nur einen RTSP-Stream bereit. Kein moderner Webbrowser unterstützt RTSP.

Die Suche und Anforderungen

Google ist einfach nicht mehr das, was es früher war, und es dauerte mehrere Tage, bis eine akzeptable Lösung gefunden wurde, die alle meine Anforderungen erfüllt.

  • Ich wollte etwas, das vollständig offline funktioniert, ohne dass Server von Drittanbietern beteiligt sind.
  • Ich wollte etwas, das völlig legal frei war, idealerweise Open Source
  • Ich wollte etwas, das Video oder Audio nicht transkodiert, da dies Verarbeitungsressourcen verschwenden würde

Die Lösung

Ich fand ein wirklich nützliche Anleitung Dies erklärte einen Weg, dies mit ein bisschen JavaScript und ffmpeg zu tun, beide waren kostenlos verfügbar.

Um ffmpeg auszuführen, habe ich den folgenden Befehl verwendet, was ich unter Windows als Dienst lief, erstellt mit nssm…
ffmpeg -i rtsp://your_rtsp_ip:port/path/to/file.stream -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/video.m3u8

Um das Video einzubetten, habe ich die folgende CSS-Datei heruntergeladen und 2 js Dateien

  • https://vjs.zencdn.net/7.2.3/video-js.css
  • https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js
  • https://vjs.zencdn.net/7.2.3/video.js

Ich habe dann den Code aus der Anleitung verwendet (mit geänderten Pfaden zu lokalen Dateien) um das Video einzubetten, das sofort funktioniert hat. ffmpeg verwendet um 0.2% CPU-Auslastung und einige MB Arbeitsspeicher auf dem Server, auf dem sich die Website befindet.

Eine letzte Anmerkung, falls es darauf ankommt - ich habe das benutzt win64 statischer Build von ffmpeg 4.2.2

Hinterlasse eine Antwort

2 Bemerkungen

JSJack Stroh

FYI, Chrom (bisher nur chrom) kann .m3u8-Dateien direkt lesen und das Video wie ein mp4 usw. abspielen.

Antworten
TThomas

Hi,
Ich versuche das gleiche zu tun, aber ich kann nicht scheinen, dass es richtig funktioniert
Ich habe deine Anweisungen befolgt, und der verknüpfte, aber ich scheine immer noch 20 bis 30 Sekunden Verzögerung zwischen dem Live-Feed und dem veröffentlichten Feed zu bekommen
irgendwelche Ideen, was es verursachen könnte?

Antworten