Low latency and high FPS camera stream with a Raspberry Pi

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:

Figure 1: The ribbon cable connected the right way around

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:

Figure 2: 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:

Figure 3: The video stream in a web browser

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!

11 thoughts on “Low latency and high FPS camera stream with a Raspberry Pi

  1. 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

    Like

    1. 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!

      Like

  2. 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.

    Like

    1. 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!

      Like

    1. 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.

      Like

      1. 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

        Like

        1. If you have a red light in front of the camera, maybe the red color disappears, when you cover up this light?

          Like

  3. You just halved the horizontal and vertical resolution then stretched the canvas to the window viewport…there were no “optimized” changes to the javascript.

    Like

    1. 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.

      Like

Leave a Reply to KR3TY3N Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.