I just saw that two very good sources, that both had an article about this topic, have gone offline without an archived version. And because I continued my work on a robot that is controlled by a Raspberry Pi, I had to figure out how to create a low latency and high FPS stream from the Pi’s camera that can be viewed in a web browser again.
Connect the camera
Plug in the ribbon cable into the Pi’s camera slot. The blue side of the cable should face towards the USB and ethernet port and the side with the pins exposed should face towards the HDMI out:
After that is done, boot up the pi and enter the configuration program:
sudo raspi-config
In the config dialog select “interfacing options” and then “camera”. Enable the camera:
After enabling the camera, use the tabulator key to select “<Finish>” and reboot the system.
After the system rebooted, you can check the camera status with:
vcgencmd get_camera
If everything was wired and configured correctly, the output should be:
supported=1 detected=1
And you should be able to save a still image with:
raspistill -o image.jpg
The software
The software is heavily based on the pistreaming library. The python program creates a socket connection and serves as a web server. The website creates a web socket client and connects to the web server. I only changed the configuration of the camera, the JavaScript and HTML files to optimize the software for super-fast streaming.
Download and setup
Before you download the program, make sure to run update:
sudo apt-get update
After that’s finished, install the necessary libraries
sudo apt-get install ffmpeg python3-picamera python3-ws4py
Note: If you can’t install python3-ws4py with apt, try installing every other package and then install pip3 as well as python3 in an extra step as described here.
Then download the modified program (or clone the original one from git)
wget https://nerdhutblog.files.wordpress.com/2018/12/camera-stream.zip
unzip ./camera-stream.zip
cd ./camera-stream.zip
Run it!
Start the server by executing:
python3 ./server.py
And then use a web browser and navigate to your Raspberry Pi’s IP address on the Port 8080 (if you use the modified software) or port 8082 (if you use the standard sources from GitHub).
The result should look like this:
Conclusion
And that’s it! Thanks to the pistreaming library, low-latency, and high FPS streams are super easy to do with the Raspberry Pi. Now go and use this simple application to make your projects even better!
Hey nerdhutblog,
thx for your post. This piece of Software is really helpful 🙂
Just one question. I need to resize my browser widow until the width-height-ratio fixes reality. Do you know a way to do it in your code? My html skills are a bit…nonexistant^^
Cheers
LikeLike
Hi!
I’m not sure if I understand your question correctly. Do you mean that you have the HTML page that displays the video with, let’s say a resolution of 640 by 480 pixels, and you’d like to resize the browser window to the same size (640×480 in this example)? Or did you mean that you don’t want users to resize the browser window freely (but instead only allow a certain aspect ratio so that the video isn’t stretched)?
Either way, you can’t manipulate the browser window with pure HTML. You’ll need to either update the existing JavaScript part or you’d need to add a custom JS script. You can take a look at the following answer and discussion on StackOverflow to learn more about resizing the browser window:
https://stackoverflow.com/a/7022929
You could calculate the aspect ratio of the video stream (e.g., 640/480 = 4/3) and then ensure that, whenever a user resizes the browser window, its size stays within that allowed ratio. So what you’d do is allow the user to resize the window on one axis (e.g., the x-axis) and then calculate the preferred size of the window. This answer could give you some more info:
https://stackoverflow.com/a/21068746
You can use the JS resize event to detect when the browser window’s document view size changes (i.e., the browser window’s size) as described here:
https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
So what I’d do is:
* Add a custom JS script (make sure to link it in the HTML file)
* Implement the resize event handler in the custom JS file (Use console.log first to output a test message to see if it works)
* Then implement the aspect ratio functionality.
I’ve put together a small demo of this (without using the video streaming code to keep it simple) with the described functionality. You can download it here: https://nerdhutblog.files.wordpress.com/2021/03/aspect-ratio-test.zip
Keep in mind that the window.resize function will only function on windows that have previously been created by the window.open() function. Furthermore, the window.open() function must be called by a user action (e.g., a button click). Otherwise, the pop-up blocker will not allow the window to open! These limitations, however, shouldn’t be a problem in the camera streaming example. You just have to keep these things in mind when working with these two JS functions…
I hope this helps,
Kind regards!
LikeLike
Nice article! worked out of the box!
Do you know, if its possible to send the stream to another server, rather than distributing it with the same raspberry? So i can view my stream from the internet, without the need of opening any ports.
LikeLike
Hi! I’m not the original author of this library, and I just wanted to share it here so that people know it exists (because it took me a while to find a good streaming library). Anyway, I’m pretty sure you can implement what you want to accomplish, but please ask the original author for assistance!
LikeLike
I dont know if you are still active here but my image is very red. But the rest is working very goo.
LikeLiked by 1 person
Hi!
I’m glad you liked the article! If you have the official Raspberry Pi infrared camera, then this behavior is normal. My image can get very red/brown too, depending on the light source.
LikeLike
It isn’t an infrared camera but I think I will keep it because I tryed many variants but this is the only one that worked
LikeLike
If you have a red light in front of the camera, maybe the red color disappears, when you cover up this light?
LikeLike
You just halved the horizontal and vertical resolution then stretched the canvas to the window viewport…there were no “optimized” changes to the javascript.
LikeLike
Umm yes? It‘s running fast enough now and therefore got optimized for my particular application. That‘s the reason why I never said it was my code and attributed the original author.
LikeLike
Nice! How’s my web?
LikeLike