banner

Blog

Oct 24, 2024

How to Control your Raspberry Pi Camera using a web UI (Updated) | Tom's Hardware

All the features wrapped in a simple web interface

When you purchase through links on our site, we may earn an affiliate commission. Here’s how it works.

Update 9/2

We've updated the how to so that it now includes extra steps to auto-start the camera when the Raspberry Pi boots. We needed a quick microscope build to take pictures of the new Raspberry Pi Pico 2's RP2350 SoC, and so we used a microscope lens and stand, along with a Raspberry Pi Zero 2 W and a light right to fashion our own Wi-Fi enabled microscope using Mitchell's software.

Quick proof of concept video showing the @raspberry_pi powered microscope in action. I need to tweak a few things, but this works well enough to make it a viable project. pic.twitter.com/Aun7A4Hh1BAugust 24, 2024

Updated Article

Using Picamera2 isn’t difficult, but for some the pure Python interface can be challenging. We’ve covered how to use Picamera2 with all models of Raspberry Pi but what if you just want to point and shoot?

Berlin-based James Mitchell has created Picamera2 Web UI Lite, a web interface for Picamera2 which provides us with a full suite of camera settings to tweak, along with an image gallery where we can view and download our images.

In this how to we will learn how to install Mitchell’s app and use it to take images using the official Raspberry Pi Camera Module 3. We’ll also show how to use the video stream in OBS.

Installing Picamera2 Web UI Lite is simple, but we do need to complete a few steps in preparation. We need to connect a camera, update our OS and then download and run the software.

Get Tom's Hardware's best news and in-depth reviews, straight to your inbox.

1. Follow the guidance to connect your camera to the Raspberry Pi 5, for other models follow the guidance here. The Raspberry Pi 5 has two camera ports, but the Picamera 2 web UI lite only supports a single camera, for now.

2. With the Raspberry Pi powered up and connected to the Internet, open a terminal and update the software repositories list and upgrade your software. This isn't an essential step, but having the latest software on a fully updated Raspberry Pi will make things go much smoother.

3. Get the hostname of your Raspberry Pi. Make a note of the hostname for future use. The hostname can also be found in the prompt. It is the text directly after the @ symbol. Adding -I to the end of the hostname command will show the IP address of the Pi.

4. Download the project archive from GitHub to your home directory. When opening a terminal, it will default to your current user’s home directory. Note that Picamera2 web UI lite’s Github page states that we should clone the repository, but recent changes to Github authentication prevented us from achieving this, hence the archive download.

5. Unzip the archive to the current directory. This will create a new directory in your home directory.

6. Change directory to Picamera 2.

7. Launch the project using Python.

8. On another computer, open a browser and visit your hostname followed by :8080 to see the interface. In our case we used a Windows 10 machine and went to raspberrypi.local:8080. If this does not work for you, try the IP address of the Pi or install Bonjour print services.

9. On the Raspberry Pi, open a terminal and run this command to start the configuration tool.

10. Using the cursor keys, scroll to System Options and press Enter.

11. Select Boot / Auto Login and press Enter.

12. Select Console Autologin and press Enter.

13. Select Finish and press Enter. Then select No when asked to reboot. We need to do an extra step before reboot.

14. In the terminal, run this command to edit the startup script. Crontab is a script which can run applications / tasks at a certain time. In our case when the Raspberry Pi boots. If prompted to select an editor, select Nano as it is the easiest for newcomers.

15. In the crontab editor, add this line at the end of the file to run the camera web UI on boot.

16. Press CTRL + O and then CTRL + X to save and exit the editor.

17. Reboot the Raspberry Pi for the changes to take effect.

18. On another computer, open a browser and visit your hostname followed by :8080 to see the interface. In our case we used a Windows 10 machine and went to raspberrypi.local:8080. If this does not work for you, try the IP address of the Pi or install Bonjour print services.

The user interface for Picamera2 Web UI Lite is simple and we’ve broken the areas down to help you navigate.

1. Main menu: Here we can open the image gallery, get information about the connected camera and learn more about the application. The image gallery stores all of the images taken using the app.

2. Preview window: This is the camera’s view of the shot and we use it to compose the scene.

3. Camera settings: Using this menu we can change various camera settings to tweak before taking a picture.

4. Capture Image: This button will take a picture using the currently selected settings. The image is saved into the Image Gallery.

This is a basic “point and shoot” demo. Think of it as the “hello world” of Picamera2.

1. Place the object in the shot using the preview window.

2. Click Capture Image to take a shot.

3. Click on View Image Gallery to view the image.

Now that we understand how to take a picture, we now delve into the settings menu. Here we can find options to tweak the image brightness, saturation, sharpness etc.

On the right-hand side of the screen we have a series of drop-down menus which can be used to tweak the camera settings for a custom shot.

1. Orientation Settings: Here we can flip the image either horizontally or vertically.

2. Auto Focus Settings: This is only enabled if using the Raspberry Pi Camera Module 3 which has a built-in autofocus motor.

3. Gain and Exposure Settings: This menu is used to alter exposure times (how long the shutter is left open), auto-exposure metering and flicker.

4. Auto White Balance Settings: These settings can alter the color temperature of a shot. Typically this is left on auto, but experts will tweak the color temperature based on the light source. Sunlight is warm, indoor lights are typically fluorescent / LED and often make an image “cool”.

5. Brightness & Contrast Settings: These settings will alter the brightness of the image, color saturation, contrast and sharpness.

6. Scaler Crop Settings: Rather than capture the entire frame, we can crop the image to a specific resolution and set the center of the frame using a X / Y offset.

We’ll now use the settings to alter the brightness and to crop the image to focus on a specific part of the subject.

1. Frame the subject using the preview window.

2. Set the focus using the Auto Focus settings menu. We chose to use continuous autofocus. This will force the camera to hunt for the best focus. We can change the focus range if our subject is close to the lens (macro).

3. Leave the Gain and Exposure settings as is. You can tweak these if you are a photographer.

4. Tweak the Auto White Balance Settings to match the temperature of the light source. Normally auto will work just fine, but try the other settings to warm or cool your image.

5. Alter the Brightness & Contrast settings to match your requirements. Even with our bright studio lights we bumped the brightness to 0.1. All other settings were left as is.

6. Crop the image to focus on the subject. We set the image size to 1080p and set the X and Y offset to capture the subject dead center of the crop. To reset, click on Reset Default Settings.

7. Click Capture Image to take the shot.

8. Click on View Image Gallery and then click on View for that image.

9. Download the image to your computer.

Picamera2 web UI Lite streams a raw video stream as a URL and we can use this with OBS to create a streaming camera. We can also use it for a basic webcam streaming setup.

To access the stream via a browser, open a browser tab to the address of the stream, followed by :8080 and then /video_feed. For our stream we went to raspberrypi.local:8080/video_stream.

We’ve got a few OBS tutorials to help you get to grips with this fantastic video streaming tool. How to record videos using OBS is a great starting point. Moving onwards we have a how to stream using OBS. Lastly, we have an advanced how to crop and zoom video in OBS.

1. Open OBS and choose the scene that you want to add the stream to.

2. Under Sources click on the + and select Browser.

3. Name the source Picamera2_stream and click OK.

4. Set the URL to the video stream, and the width and height for a 1080p video, then click OK. Our example stream URL was raspberrypi.local:8080/video_stream . Tweak the width and height as you see fit, we chose 1080p as it is a common resolution for streaming video.

5. The Picamera2 video stream will now appear in OBS. Try switching scenes from one camera to another.

Les Pounder is an associate editor at Tom's Hardware. He is a creative technologist and for seven years has created projects to educate and inspire minds both young and old. He has worked with the Raspberry Pi Foundation to write and deliver their teacher training program "Picademy".

Raspberry Pi turns Ikea jack-o-lantern lamp into spooky interactive Halloween decor

Raspberry Pi announce branded range of NVMe SSDs and SSD kit

Chinese SSD brands are in the top five in terms of market share — Kingston retains its spot as the largest SSD manufacturer in the market

Update 9/2Updated Article connect your camera to the Raspberry Pi 5, .open a terminal and update the software repositories list and upgrade your software.Get the hostname of your Raspberry Pi. Download the project archive from GitHub to your home directory. Unzip the archive to the current directory.Change directory to Picamera 2.Launch the project using Python.On another computer, open a browser and visit your hostname followed by :8080 to see the interface.On the Raspberry Pi, open a terminal and run this commandUsing the cursor keys, scroll to System Options and press Enter.Select Boot / Auto Login and press Enter.Select Console Autologin and press Enter.Select Finish and press Enter. Then select No when asked to reboot. In the terminal, run this command to edit the startup script. If prompted to select an editor, select Nano as it is the easiest for newcomers.In the crontab editor, add this line at the end of the file to run the camera web UI on boot.Press CTRL + O and then CTRL + X to save and exit the editor.Reboot the Raspberry Pi for the changes to take effect. On another computer, open a browser and visit your hostname followed by :8080 to see the interface.Main menu: Preview window: Camera settings:Capture Image:Place the object in the shot using the preview window.Click Capture Image Click on View Image Gallery1. Orientation Settings:Auto Focus Settings:Gain and Exposure Settings:Auto White Balance Settings:Brightness & Contrast Settings:Scaler Crop Settings: Frame the subject using the preview window.2. Set the focus using the Auto Focus settings menu. Leave the Gain and Exposure settings Tweak the Auto White Balance Settings to match the temperature of the light source. Alter the Brightness & Contrast settings to match your requirements.Crop the image to focus on the subject.Click Capture Image Click on View Image Gallery click on View for that image.Download the image open a browser tab to the address of the stream, followed by :8080 and then /video_feed.Open OBS and choose the sceneUnder Sources click on the + and select Browser.Name the source Picamera2_stream click OK.Set the URL to the video stream, and the width and height for a 1080p video, then click OK.Try switching scenes from one camera to another.
SHARE