Realtime camera feed instead of refreshing image

[Weirdo]

Scroll down if you don't like to read

I recently felt it was time to update my domoticz equipment and bought a Raspberry pi 4.
Previously I used a Raspberry pi 2 so its quite an upgrade.

I also got myself a Raspberry Pi 7" touchscreen for seeing status of my devices and also being able to control some lights.
I already have an e-Paper screen for showing some data, only its not a touchscreen no I can't control anything with it.

Because of the touchscreen I started looking into dashboards that will fit my needs.
My needs are quite simple

• See the status of the doors
• Control some of the lights in the room where the touchscreen will be located
• See the status of lights in other rooms
• See the Solar yield of my solar panels
• See the feed from my 4 camera's

I started with the aurora theme because it can show video feed from my camera.
I quickly noticed the following

• aurora is not worked on anymore
• video image refreshrate is 20 seconds
• Changing it to every second results in a flashing image

Conclusion: Aurora will not help me. At this point I considered to just build my own custom page in Domoticz.
After searching around how to enable this custom page I found Dashticz. Because I am a lazy developer I rather use something that is already available instead of building it myself from scratch. (I am not a frontend devver)

Dashticz provides everything I need and I just done the automatic docker version and installed it on my raspberry pi 4. It handles the extra load without any problems.

While configuring Dashticz I came to nearly the same conclusion as with aurora. It just refreshes an image from an url. But because in Dashticz its in a image html element it does not flash while refreshing the image as in aurora. I played around with the refreshtime but could not get satisfactory results.

I started again to search around how to make the video feed realtime. After some hours I found a good working solution that is also free. I did find the Media Server software solutions that can convert the rtsp stream from my ip camera's to webrtc/websockets/etc. But I wasn't willing to pay the amount they charge.

Here is how I implemented it by using uv4l with the mjpegstream driver. I installed this also on the raspberry pi 4.

Too long didn't read. Start here if you skipped the story

Prerequisites

• Have a ip cam that sends a HTTP MJPEG stream
• Know the url to the MJPEG stream. Search the camera ui or documentation for it.
• Use basic authentication

Notes:
Digest authentication should also be possible. I haven't spend any time on it yet.
Other type of stream might also work. I don't have a need to research it so I haven't spend time for that.
It needs a HTTP stream. One that is prefixed with rtsp:// did not work for me even when its MJPEG

My setup

• Raspberry pi 4 running domoticz and dashticz (Buster)
• 4x Y-cam Cube HD720 White
• Raspberry pi 3 with touchscreen for showing Dashticz dashboard (Buster)

I use raspbian (Buster)

Code: Select all

curl http://www.linux-projects.org/listing/uv4l_repo/lpkey.asc | sudo apt-key add -

Add the following line to /etc/apt/sources.list (There is no version for Buster yet)

Code: Select all

deb http://www.linux-projects.org/listing/uv4l_repo/raspbian/stretch stretch main

Update apt-get and install with apt-get using

Code: Select all

sudo apt-get update
sudo apt-get install uv4l uv4l-server uv4l-mjpegstream

Start the stream with

Code: Select all

uv4l --driver mjpegstream --auto-video_nr --uri "http://<username>:<password>@<ip/hostname camera>/live/1/mjpeg.jpg" --server-option '--user-password=<pasword for user>' --server-option '--port=9001' --server-option '--admin-password=<password for admin>'

Test the stream using a browser

Code: Select all

http://<username>:<password>@<ip/hostname>:9001/stream

• username is user (or admin)
• password is specified in the uv4l command: --server-option '--user-password=<pasword for user>' (Use the admin pwd if you use the admin user)
• hostname or ipaddress of the machine you ran the uv4l command on

Note: I ran the uv4l command on the same raspberry pi 4 that runs domoticz. It does not have to be the same raspberry that hosts your other stuff, its up to you.

When the test is successful, congratz you are nearly there!

Update your Dashticz CONFIG.js

Code: Select all

buttons.camera_garage = {
	width: 6,
	isimage: true,
	refresh : 60000,
	btnimage: 'http://user:<pwd>@<ip/host>:9002/stream/video.mjpeg'
}

Notes:

• Here I used port 9002 because I got 4 camera's. Just make sure you use the correct port that matches how you have configured it.
• I still added the refresh to make sure it recovers itself when something happens

Refresh your Dashticz dashboard and you are done!

My findings

• 7" touchscreen only give very little space to work with
• A raspberry pi 3 cannot handle 4 streams of 1280 x 720 30 fps. It made the raspberry crash. I had to switch to the secondary lower quality stream.
• uv4l just passes along the stream without impacting resolution, image quality and fps.

Update 1
So it does not work in Chrome because of cors.
The internal php cors solution does not handle streams.
I'll update it here when I find a solution. But I might just accept the fact that Chrome cannot be used or just disable the cors policy on chrome.

Update 2
I found a solution. In order to prevent cors problems I have put Dashticz and the video streams behind a nginx reverse proxy.
I will not explain here how to setup a nginx. But here is my configuration I have used.

Code: Select all

server {
	listen 80;
	server_name dashticz.local.lan;

	location / {
		proxy_pass      http://<raspberrypi4 ip>:8082/;
		access_log      /var/log/nginx/dashticz.access.log;
		error_log       /var/log/nginx/dashticz.error.log;
	}

	location ~ ^/cam-([1-4])/ {
		set $cam "$1";
		rewrite /cam-[1-4]/(.*) /$1  break;
		proxy_pass      http://<raspberrypi4 ip>:900$cam;
		proxy_set_header Authorization "Basic <The basic auth base64>";
		access_log      /var/log/nginx/dashticz.access.log;
		error_log       /var/log/nginx/dashticz.error.log;
	}
}

Explanation:
The first location if for dashticz
The 2nd location handles the camera feeds.

it assumes that cam-1 uses port 9001, cam-2 port 9002, etc
In Dashticz you configure

Code: Select all

buttons.camera_voordeur_binnen = {
	width: 6,
	isimage: true,
	refresh : 60000,
	btnimage: 'http://dashticz.local.lan/cam-3/stream/video.mjpeg'
}

For this I have used a local dns server for resolving dashticz.local.lan

[clinkadink]

That's a good a write-up, thanks and well done. Streaming mjpeg in html5 is definitely better than refreshing a static image. The above method is solid solution that will no doubt provide great results. I run a Xeoma server, so can access the mjpeg streams directly from that (which I then access from Dashticz). I too looked into rtsp streams, as most decent IP cams stream natively via rtsp nowadays. But that would require a WebRTC server and its not a simple task.

Well done again. I am sure this info will help others

[fargle]

This inspired me to try another way to get live video into Dashticz.
Got a couple of H.264 640x480@15 fps cameras displaying in IFrames on Dashticz easily enough when I used Shinobi to re-stream them using the HLS (http live streaming) protocol. The results were quite impressive, the total bandwidth was around 1.5-2 Mbit/s and the video was smooth and continuous.

I was quite pleased with this until I noticed the up-to 10-second lag, due to the way that HLS transmits data in chunks. That's fine for watching internet video clips, but for real-time video surveillance it's no good - a lot can happen in 10 seconds.

Update:
Later on discovered that Shinobi can stream flash video (flv) using the source codec, in this case h.264. That worked, so currently have two cameras running in IFrames in Dashticz, no CORS problems. The latency is around 2-4 seconds and the total bandwidth they use is around 800 Kb/s.

The Shinobi and Dashticz servers run on a separate Pi 3. The Pi 4 client itself now has to work harder, with a load average between 0.8 and 1.8. Also had to tweak various settings in Chromium to display continuous video. So far they have run 24 hours, surviving the periodic Dashticz reloads. So this works, but I think that simultaneously displaying more cameras would be "a bridge too far" given the Pi's limitations. Maybe Camera Buttons as used by the OP would be a solution.

Here's Dashticz in a Firefox browser using the "Open in VLC" plugin for analysis. The Lucky Chinese Cat provides continuous motion for testing.
.

Workshop test

Dashticz-VLC.jpg (236.25 KiB) Viewed 1838 times

[fargle]

At the risk of turning this topic into a diary, one final post: A Pi 4B will work with 4 cameras via Shinobi, simultaneously running h.264 at 640x480@15fps in Iframes without too much strain. However, Browsers are not especially suited for live camera streams, and with discontinuities through, for example a weak wifi network connection, they will start to buffer the video, introducing latency which persists until the URL is refreshed, not so good if live viewing is what you want. This wasn't a problem with a wired LAN connection.

The Chromium browser used also required various tweaks to avoid caching and to allow streaming even when Dashticz was in standby. Both it, and Firefox don't allow audio autoplay any more, so even though these cameras weren't streaming audio, more tweaks were needed to get them to run.

Although it's working, and looks as if it will stay that way, its probably more trouble than its worth - after all there are dedicated cctv applications that do a better job.
.

Dashticz 4cams.jpg (144.05 KiB) Viewed 1732 times

.
Update, some months later: Ended up streaming 4 cameras using Shinobi with Websocket connections for low latency. This Pi3 server is still running, but a Pi4 version currently being built shows much better performance, and was tested with 6 cameras, but could run more. External plus manual triggers were used to pop up individual cameras in the final version.

[Doudy]

Hello,

One question :

Code: Select all

uv4l --driver mjpegstream --auto-video_nr --uri "http://<username>:<password>@<ip/hostname camera>/live/1/mjpeg.jpg" --server-option '--user-password=<pasword for user>' --server-option '--port=9001' --server-option '--admin-password=<password for admin>'

Code: Select all

http://<username>:<password>@<ip/hostname camera>/live/1/mjpeg.jpg

what username ? Pi or camera
idem for password
idem for ip/hostname camera

I have not "/live/1/mjpeg.jpg" but "/video/mjpg.cgi"