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

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

My CCTV cam­era, wie viele, stellt nur einen RTSP-Stream bereit. No mod­ern web browsers sup­port RTSP.

Die Suche und Anforderungen

Google just isn’t what it used to be and it took sev­er­al days of search­ing to find an accept­able solu­tion that met all of my require­ments…

  • I wanted some­thing that would work entirely off­line without any third party serv­ers involved.
  • I wanted some­thing that was com­pletely leg­ally free, idealerweise Open Source
  • I wanted some­thing that would­n’t transcode the video or audio as this would waste pro­cessing resources

Die Lösung

Ich fand ein really use­ful guide which explained a way to do this with a bit of JavaS­cript and ffm­peg, both of which were read­ily avail­able for free.

To run ffm­peg I used the fol­low­ing com­mand, which I ran on win­dows as a ser­vice, cre­ated with 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

To embed the video I down­loaded the fol­low­ing css file and 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 (with mod­i­fied paths to loc­al files) um das Video einzubetten, das sofort funktioniert hat. ffm­peg is using around 0.2% cpu usage and a few mb of memory on the serv­er that hosts the web­site.

Eine letzte Anmerkung, incase it mat­ters — I used the win64 stat­ic build of ffm­peg 4.2.2

Denken wir etwas verpasst haben? Lassen Sie uns wissen, von unten zu kommentieren. Wenn Sie bitte abonnieren möchten den Link oben rechts auf dem Menü abonnieren verwenden. Sie können auch unten unter Verwendung der sozialen Bindungen diese mit Ihren Freunden teilen. Prost.

Hinterlasse eine Antwort