Webcams on Raspberry Pi is like salsa and chips – they just belong together. But sometimes making that happen isn’t straight forward. I’ve done it two ways and figured I would share with anyone else wanting an easy way to run a webcam on Raspberry Pi. The first way is for a standard USB webcam, the second way is for any of the “Raspberry Pi Cameras.” To automate any of these processes, use crontab and call the command every minute, hour, or whenever you want. For me I make a shell file with the command(s) in it, then call that in crontab. This makes like easier, especially when using multiple commands like with ImageMagick, so that things happen in the right order. Also, if you need to make changes to the script you are only editing that one shell file rather than every line in crontab!
Make USB webcam work on Pi:
First install fswebcam: sudo apt-get install fswebcam
Then you can run a command to take a picture from the camera. In my case I wanted to save it in the “html” folder so I could share it with the world. This directory could be changed to wherever you want it saved. Here is the command I was using: fswebcam –jpeg 95 –save /var/www/html/current.jpg -S 20 -r 1280×720
If you would like to scale the image down you can add the –scale flag like this: fswebcam –jpeg 25 -S 20 -r 1280×720 –scale 640×360 –save /var/www/html/current.jpg
If you would like to change the default banner (or remove it), as well as many other options, check out the fswebcam manual.
To get the files to host using Apache you will need to fix permissions so “pi” can write to those folders (directions from raspberrypi.org):
On normal situation, http daemon run as some user and group, www-data on debian (raspbian).
Standard html files are stored on /var/www/, owned by root:root, with permissive permission, all can read, but only root can write.
To ordinary user write to /var/www need to takeover it. Supposed the use is pi.
sudo chown -R pi:www-data /var/www
Also, need to set user and group permission:
sudo chmod u+rxw,g+rx-w,o-rwx /var/www
Now, /var/www can be read,write and chdir by user pi, group www-data can chdir and read. Other not have access.
sudo chmod g+s /var/www
Any new file created on /var/www belong to group www-data.
If have files on /var/www, change user and group, and allow to group www-data read.
For file chmod u+rw,g+r-xw,o-rwx
For directory chmod u+rwx,g+rx-w,o-rxw
Now, user pi can manipulate files on /var/www and httpd can read, but not write.
If you would like to make an archive of your webcam images, we can do that too!
First you will need to make a shell file that you will be executable, sudo chmod +x shellfilename.sh
Then open the new shell file in nano (or other editor) and put in your code. This shell file code below will copy the current.jpg file to an archive folder with $DATE in the filename.
#!/bin/bash
DATE=$(date +”%Y-%m-%d_%H%M”)
cp /var/www/html/current.jpg /home/pi/webcam/$DATE.jpg
Make Raspberry Pi Camera function as webcam:
For the Raspberry Pi camera to work you will need to use Raspistill. This is pre-installed with Rasbian, but if you want text on your image (like the default banner in fswebcam) you will need to install ImageMagick, sudo apt-get install imagemagick
Now run the terminal command to take a picture, for us we used: raspistill -w 640 -h 480 -hf -vf -o /var/www/html/buffer.jpg
For more commands, check out the Raspberry Pi Camera Manual.
Now we want to take the new image and add our banner. This code will take the buffer.jpg image and add the label, timestamp, and banner color behind the text, then save the file as current.jpg.
/usr/bin/convert /var/www/html/buffer.jpg -fill ‘#0008’ -draw ‘rectangle 0,455,640,474’ -pointsize 14 -fill white -annotate +5+470 “TITLE OF WEBCAM” -annotate +505+470 %[exif:DateTimeOriginal] /var/www/html/current.jpg
When drawing the banner box, the coordinates are a,b,c,d where a is the left edge of the box, b is the top of the box, c is the right edge of the box, and d is the bottom of the box.
For more information on ImageMagick, check out the terminal commands in the ImageMagick manual.
Now you want to display this new image in a web page, right? But isn’t it cooler if it auto-refreshes? I think so. Here is the very simple, but very effective, code that I like to use:
<html>
<head>
<script>
var webcamimage;
var imgBase=”current.jpg?”
var c = 0;
function count()
{
webcamimage.src=imgBase+(++c);
}
function init()
{
webcamimage = document.getElementById(“webcamimage”);
if( webcamimage )
{
setInterval(“count()”,10000);
}
}
window.onload = init;
</script>
<title>Current Weather in Skowhegan, ME</title>
</head>
<body>
<img alt=”Web Camera Image” id=”webcamimage” src=”current.jpg” />
</body>
</html>
