1Embed a live RTSP stream in a webpage

I have recently been working on my smarthome setup and one of the things I’ve been meaning to get set up is a tablet with a touch-screen web interface to manage my smart home. One of the first problems I had to crack was how to stream my cctv feed to a web browser…

The problem

My CCTV camera, like many, only provides an RTSP stream. No modern web browsers support RTSP.

The search and requirements

Google just isn’t what it used to be and it took several days of searching to find an acceptable solution that met all of my requirements…

  • I wanted something that would work entirely offline without any third party servers involved.
  • I wanted something that was completely legally free, ideally open source
  • I wanted something that wouldn’t transcode the video or audio as this would waste processing resources

The solution

I found a really useful guide which explained a way to do this with a bit of JavaScript and ffmpeg, both of which were readily available for free.

To run ffmpeg I used the following command, which I ran on windows as a service, created 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 downloaded the following css file and 2 js files

  • 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

I then used the code from the guide (with modified paths to local files) to embed the video which worked straight away. ffmpeg is using around 0.2% cpu usage and a few mb of memory on the server that hosts the website.

One final note, incase it matters – I used the win64 static build of ffmpeg 4.2.2

Found this useful? Please do let us know by dropping a comment below. If you would like to subscribe please use the subscribe link on the menu at the top right. You can also share this with your friends by using the social links below. Cheers.

Leave a Reply to Thomas Cancel reply

One Comment

gravatarThomas

Hi there,
im trying to do the same, but I cant seem to get it to work properly
I followed your instructions, and the linked one, but i still seem to get 20-30 seconds of delay between the live feed and the published feed
any ideas what could be causing it?

Reply