Embedding DVR Video Streams Into Grafana
These panels are a live feed embedded into Grafana via iframes. During the conversion of the video from RTSP which comes from your DVR - to HTTP, which can be displayed on a web page, you do lose some quality and frame rate, but being able to embed multiple video streams into multiple web pages also gives many advantages.
In my case I'm using an Annke 8 camera DVR I got off of Amazon for about $160. (Click here to see it on Amazon)
UPDATE: I have since purchased another brand DVR for a client, and it did NOT have RTSP stream output. I had to send it back and get an ANNKE brand DVR, and the ANNKE brand does seem to consistently have RTSP capability.
This tutorial is Windows specific, although many items are cross-platform compatible.
- A DVR
- A Windows PC
1. Connect your DVR to your network
If your DVR has a wifi option, I recommend switching that feature off and hard-wiring instead. It will offer a much more stable and reliable connection to ContaCam.
2. Give your DVR a static IP address
This will give ContaCam a consistent IP address from which to pull the RTSP stream.
When you connect the DVR to your network, it will most likely be issued a DHCP address automatically. You can see this address by hooking the DVR up to a monitor, accessing the on-screen menu and checking the network settings. Alternatively you should be able to log into the DVR's web admin panel after reading the DVR's DHCP issued IP address from your router's list of DHCP clients.
If your DVR doesn't offer the ability to set a static IP address, don't sweat it too much - it is likely that your DVR will keep the same IP address for a long time, if not for the entire life of your router. In the event that it doesn't keep the same IP address, you'll just have to find the DVR's IP address and update it in ContaCam occasionally.
You may have to refer to your DVR's manuals in order to figure out how to do this. In my case, it's just an option under my DVR's web administration panel.
3. Install ContaCam on your PC
You can download ContaCam by clicking here. It's free, although there is a nag message on the camera feed asking for donations.
4. Find your DVR's RTSP Stream URL
In my particular case, my DVR's RTSP stream URL is as follows: (I have X'd out the IP address for privacy reasons)
The trailing number,
101, indicates the first camera in the DVR. Each subsequent camera's URL increments upward in this fashion:
301, etc. all the way to
801, which indicates the last camera on my DVR. In my case, there are a total of 8 cameras so the final RTSP stream url is as follows:
Please note that this particular RTSP stream URL is specific to my DVR. You may have to research your own DVR's RTSP stream, and it's not normally available in the accompanying manuals. Some Google-Foo might be in order.
5.1 Enter the RTSP stream URL into ContaCam
Now start ContaCam and go to
Network / IP Camera and paste the DVR's RTSP URL into the connection dialog, then enter your DVR's administrative username and password and click OK.
A camera feed should pop up inside ContaCam that shows what the camera is seeing, shown below.
Continue adding camera RTSP stream URLs until all the cameras on your DVR have been added.
5.2 Diagnosing the RTSP stream if it's not working
If for some reason ContaCam fails to connect to the DVR's RTSP streams, VLC media player might help. You can use the same RTSP stream URLs in VLC. When you do, and it fails, VLC may give you a verbose error that ContaCam will not. You can Google these errors in order to isolate the issue.
First, start VLC. (Download VLC)
Then click on
Open Network Stream.
Enter your DVR's administrative credentials:
VLC should then display the RTSP stream, but if it doesn't it will give you some sort of message that you can then research online.
6. Install XAMPP
The reason we need XAMPP is because the RTSP stream, once converted into HTTP stream using ContaCam, is displayed in a Web browser using the PHP framework, which is a programming language that requires Apache to work properly.
XAMPP will run on your PC in the background at all times. If you're not familiar with web servers, don't let this intimidate you into not proceeding - you'll install XAMPP with default settings and if all goes well you won't have to mess with it anymore.
Download XAMPP by clicking here.
Use all the default values during setup. Once installation is complete, you should have a window on your screen that looks like this:
7. Set ContaCam's Default Web Directory
Open Windows Explorer and navigate to
C:\xampp\htdocs and then create a new directory called "cameras". Obviously you can name this directory anything you want, but "cameras" seemed appropriate to me.
Then in ContaCam, go to
Global Settings. Click the "..." icon next to Parent Directory of all Cameras, then navigate to
C:\xampp\htdocs\cameras, then click OK to set the parent directory.
8. Navigate to Cameras in Your Web Browser
Open your Web browser and type
localhost/cameras in the omnibar. You should be then presented with something that looks like this:
9. Getting The HTTP Stream URL
localhost/cameras, click on one of the camera feeds:
Then click on the feed at the top right-hand corner of the screen:
Copy the URL from the full-screen view:
10. Embedding the HTTP stream in Grafana
In Grafana, create a new Text panel and set the mode to HTML, and then copy the code below - making sure to switch out the HTTP camera feed URL with your own.
In my case, the HTTP stream URL is on a different PC than the one running ContaCam, so instead of using
localhost I'm using the IP address of the server hosting ContaCam:
<iframe src="http://192.168.XXX.XXX/cameras/Front%20East%20Facing/snapshotfull.php?clickurl=%2Fcameras%2FFront+East+Facing%2Fsummarysnapshot.php" style="height: 100%; width: 100%;"></iframe>
You should now have a camera feed within Grafana:
10. OPTIONAL: Make <iframe> content 100% Width & Height
The default embedded full-screen camera feed is set to
object-fit: contain; which gives the i-frame bars on the top and bottom of the screen like this:
But it looks better set to
object-fit: fill;, like this:
In order to do this, you have to navigate to
C:\xampp\htdocs\cameras\camera_name and open the files named
snapshotfull.php. Within this file, on line 93, you will see this code:
echo "<img style=\"object-fit: fill\" id=\"campictureid\" src=\"" . htmlspecialchars($pollfilename . time()) . "\" onclick=\"window.top.location.href = '" . htmlspecialchars($clickurl) . "';\" alt=\"Snapshot Image\" />\n";
Change the part of this code that reads
"object-fit: contain\" to
"object-fit: fill\" and save the file.
That will expand the video feed to be 100% height and width of the embedded
<iframe> within Grafana.
But there's a problem - ContaCam will replace the original code the next time the computer reboots. My solution was to create a copy of the file
snapshotfull.php in another directory, change the line of code in the second file as mentioned above, and then overwrite the original file when the PC boots using a BATCH command:
timeout 600 copy C:\Users\Cameron\Documents\camera_files\snapshotfull.php "C:\xampp\htdocs\cameras\Driveway" copy C:\Users\Cameron\Documents\camera_files\snapshotfull.php "C:\xampp\htdocs\cameras\192.168.1.132_554" copy C:\Users\Cameron\Documents\camera_files\snapshotfull.php "C:\xampp\htdocs\cameras\192.168.1.148_554" copy C:\Users\Cameron\Documents\camera_files\snapshotfull.php "C:\xampp\htdocs\cameras\Back Yard" copy C:\Users\Cameron\Documents\camera_files\snapshotfull.php "C:\xampp\htdocs\cameras\East Alley Rear" copy C:\Users\Cameron\Documents\camera_files\snapshotfull.php "C:\xampp\htdocs\cameras\Front East Facing" copy C:\Users\Cameron\Documents\camera_files\snapshotfull.php "C:\xampp\htdocs\cameras\Front Room" copy C:\Users\Cameron\Documents\camera_files\snapshotfull.php "C:\xampp\htdocs\cameras\Front Step" copy C:\Users\Cameron\Documents\camera_files\snapshotfull.php "C:\xampp\htdocs\cameras\Kitchen" copy C:\Users\Cameron\Documents\camera_files\snapshotfull.php "C:\xampp\htdocs\cameras\West Alley Rear" exit
Save the above text file as a .BAT file somewhere on your computer.
I put the pause in there so that ContaCam has a chance to start up fully before I switch the files out.
I Obviously had to create the command for each of the 8 cameras that I have, but fortunately I only had to use one template file:
Now run command:
shell:startup which will open the Windows Startup folder.
Copy the BATCH file into this folder. The command will now run when the computer boots.