How to Control your Raspberry Pi Camera using a web UI (Updated)
All the features wrapped in a simple web interface
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.
For this project you will need
- Raspberry Pi 4 or 5, we used a Raspberry Pi 5
- Official Raspberry Pi Camera Module 3
- micro SD card with the latest Raspberry Pi OS
Picamera2 WebUI Lite Setup
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.
sudo apt update && sudo apt upgrade -y3. 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.
hostname4. 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.
wget https://github.com/monkeymademe/picamera2-WebUI-Lite/archive/refs/heads/main.zip5. Unzip the archive to the current directory. This will create a new directory in your home directory.
unzip main.zip6. Change directory to Picamera 2.
cd picamera2-WebUI-Lite7. Launch the project using Python.
python app.py8. 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.
sudo raspi-config10. 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.
crontab -e15. In the crontab editor, add this line at the end of the file to run the camera web UI on boot.
@reboot python /home/pi/picamera2-WebUI-main/app.py
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.
Using Picamera2 Web UI Lite
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.
To capture a basic image
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.
To tweak the camera settings
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.
Tweaking the settings before a shot
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.
Using the camera output with OBS
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.
To use the stream in OBS
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".
-
rpasto2 Thanks for the write-up. Ran into the following issue when I got to running the "python app.py" command:Reply
INFO Camera camera.cpp:1033 configuring streams: (0) 640x480-XBGR8888 (1) 4056x3040-SBGGR12_CSI2P
INFO RPI vc4.cpp:565 Sensor: /base/soc/i2c0mux/i2c@1/imx477@1a - Selected sensor format: 4056x3040-SBGGR12_1X12 - Selected unicam format: 4056x3040-pBCC
Traceback (most recent call last):
File "/home/rpasto2/picamera2-WebUI-Lite-main/app.py", line 44, in <module>
video_config = picam2.create_video_configuration(main={'size':resolution}, sensor={'output_size': mode, 'bit_depth': mode})
TypeError: create_video_configuration() got an unexpected keyword argument 'sensor'
I'm able to run "libcamera-hello -t 0" so I know the camera is there and working. Not sure where the WebUI Lite may be going wrong. I running this on a Raspberry Pi Zero W v1. I know WebUI Lite is untested on v1 so may not be supported. Any help would be appreciated. -
rpasto2 Reply
Looks like it's due to outdated OS (running on Bullseye).rpasto2 said:Thanks for the write-up. Ran into the following issue when I got to running the "python app.py" command:
INFO Camera camera.cpp:1033 configuring streams: (0) 640x480-XBGR8888 (1) 4056x3040-SBGGR12_CSI2P
INFO RPI vc4.cpp:565 Sensor: /base/soc/i2c0mux/i2c@1/imx477@1a - Selected sensor format: 4056x3040-SBGGR12_1X12 - Selected unicam format: 4056x3040-pBCC
Traceback (most recent call last):
File "/home/rpasto2/picamera2-WebUI-Lite-main/app.py", line 44, in <module>
video_config = picam2.create_video_configuration(main={'size':resolution}, sensor={'output_size': mode, 'bit_depth': mode})
TypeError: create_video_configuration() got an unexpected keyword argument 'sensor'
I'm able to run "libcamera-hello -t 0" so I know the camera is there and working. Not sure where the WebUI Lite may be going wrong. I running this on a Raspberry Pi Zero W v1. I know WebUI Lite is untested on v1 so may not be supported. Any help would be appreciated.
https://github.com/monkeymademe/picamera2-WebUI-Lite/issues/15 -
codemonkey2k5 Thank you for this, is there any way to get this service to start on boot? (instructions for a noob please)Reply
Currently, I have to ssh in to run the start command but it stops the second I disconnect Putty.
I'm running this headless as a 3D printer camera.
Thank you!