RTSP stream to view on local website using web browser

Tips & Tricks
, ,
1

UPDATE: sorry I must have accidentally deleted the google drive files. They can be found here:
rtsp stream - Google Drive
also when creating the html directories described below they should be cam1, cam2, etc. instead of c1, c2, etc.

Overview:

This is one way you can stream your RTSP camera feed to a local website so that you can view the stream from any device through a web browser. In this setup you will only be able to view the website/camera feeds if you are on the same network/wifi as your cameras. There is no security other than it only being on your LAN so do this at your own risk. I am a beginner at all of this stuff so don’t expect it to work and follow this guide at your own risk. That said, it works for me. Also if anyone knows how to optimize the stream, input would be appreciated.

The basic idea is to convert the RTSP stream from the ip camera to RTMP using ffmpeg, and then RTMP into HLS using nginx with the RTMP module. Then we make a webpage with nginx and use vjs(videojs) player to play the HLS files.

There is probably a way to convert straight from RTSP to HLS using ffmpeg, but I couldn’t figure out how to do it correctly. To make this work I relied heavily on this guide: Setup Nginx on Ubuntu to Stream Live HLS Video - Vultr.com

Requirements:

  1. Linux server (in my case an old laptop running Ubuntu)
  2. Camera streaming RTSP (in my case wyzecams)

Camera setup (for wyzecams)

  1. You need to install the RTSP firmware, guide can be found here: https://support.wyzecam.com/hc/en-us/articles/360026245231-Wyze-Cam-RTSP
  2. find/write down the RTSP url, should looks something like: rtsp://username:password@192.168.10.40/live

Server setup:

Set a static ip for your server (in your router settings). In my examples I use 192.168.1.16 as the server ip (I also mistakenly use 192.168.10.16 sometimes but just assume they’re the same)

Open terminal and update your apt library

  • sudo apt update

Install the tools required to compile nginx from source. We need to complile nginx from source instead of installing with apt so that the nginx-rtmp module will work properly.

  • sudo apt install build-essential libpcre3 libpcre3-dev libssl-dev

make a working directory and switch to it (if a command doesn’t work try putting “sudo” in front)

  • mkdir ~/working
  • cd ~/working

download nginx and nginx-rtmp source

  • wget http://nginx.org/download/nginx-1.17.9.tar.gz
    • this is the version i used but you can use newer versions
  • wget https://github.com/arut/nginx-rtmp-module/archive/master.zip

install the unzip package

  • sudo apt install unzip

extract nginx and nginx-rtmp

  • tar -zxvf nginx-1.17.9.tar.gz
  • unzip master.zip

switch to nginx directory

  • cd nginx-1.17.9

compile & install nginx with rtmp module

  • ./configure --with-http_ssl_module --with-http_stub_status_module --add-module=../nginx-rtmp-module-master
    • add any other nginx modules you might want to use in the future here
  • make
  • sudo make install
  • sudo wget https://raw.github.com/JasonGiedymin/nginx-init-ubuntu/master/nginx -O /etc/init.d/nginx
  • sudo chmod +x /etc/init.d/nginx
  • sudo update-rc.d nginx defaults
  • sudo service nginx start
  • sudo service nginx stop

install ffmpeg

  • sudo apt install ffmpeg

next create folders for your HLS streams. I have 4 cameras so I made 4 folders

  • sudo mkdir /HLS
  • sudo mkdir /HLS/cam1
  • sudo mkdir /HLS/cam2
  • sudo mkdir /HLS/cam3
  • sudo mkdir /HLS/cam4

you might need to adjust permissions on these folders if no hls files are being written. I’m pretty bad when it comes to permissions so I’m pretty sure this is insecure but it might work:

  • sudo chmod -R 777 /HLS

next we setup our nginx.conf file. mine is here: https://drive.google.com/open?id=1ObtmtZHGhVbIOiTykf1YDG6cfSfGa1Na

  • sudo nano /usr/local/nginx/conf/nginx.conf
    • copy/paste from my file then hit ctrl+x to exit nano and press y and then enter to save
    • anytime you change this file you need to restart nginx for it to take effect:
      • sudo service nginx restart

we have it setup now that our root folder for our website is /var/www/html so let’s create those:

  • sudo mkdir /var/www
  • sudo mkdir /var/www/html

we also have the subdirectories for each camera

  • sudo mkdir /var/www/html/cam1
  • sudo mkdir /var/www/html/cam2
  • sudo mkdir /var/www/html/cam3
  • sudo mkdir /var/www/html/cam4

now let’s make an index.html file for the root directory (html) and each cam directory. I have mine setup so the root index.html will show all 4 cameras and the subdirectories will show one camera

let’s make sure these folders & files have permissions that will work. if you know better permissions to use feel free because these are probably wrong even though they work

  • sudo chmod -R 775 /var/www/html
  • sudo chown -R nobody:www-data /var/www/html
    • my nginx uses “nobody” as the user

ok now let’s setup the script that converts our camera’s rtsp stream into an rtmp stream

now let’s set the script to execute every minute using cron. the script will check to see if ffmpeg is running, and if not will start it

  • crontab -e

  • hit enter and add this line:

  • * * * * * /var/www/rtspcron.sh

  • hit ctrl+x to exit

let’s check the crontab entries to make sure it’s there

  • crontab -l
    • you should see the line we added

Ok, I think we’re done! you can now type your server’s ip in a browser (on your local network) and see the streams.

I hope I didn’t forget anything…have fun!

(do not make this website accessible outside of your LAN. you need to add a whole bunch of security before attempting that) Also everyone on your LAN will have access unless you add security.

8 Likes
2

Great article! But links to google doc don’t work. Please update. This will help me out a lot.

3

sorry about that, updated the post with new link.

4

Really great tutorial mate