Webcam Remote Servo for Raspberry on HTML5

admin

3 weeks ago

After lot of research on different sites I finally managed to make a webcam remote servo for Raspberry controlled via HTML5 web interface. I will repeat here step by step the different points. I performed this that on a Raspberry PI2 but it should also work fine on the model B + see A.

Equipment :

favorite Raspberry and webcam
two servomotors eg SG90 9G Micro Servo Motor
3 x AAA 1.5v battery pack
a 90 ° angle 4cm x 4cm (in all DIY stores)

Step 1: Assembling the servos

To assemble the support just stick the two servos with glue like in this photo:

Stick the two servos by ensuring that their axes are perpendicular

Then the servo fix the bracket as with two screws (usually supplied with the servo):

servo fix the bracket using screws

Finally fix the “foot” on the battery box with glue:

Fix the “foot” on the battery case with glue

I know it’s not the most detailed how-to I provided but the pictures speak for themselves … In the end it looks like this:

Final view

With the 5PM Cam

Step 2: Connecting the servoes to the Raspberry board

Red wire (+ Vcc) of the servos must be connected to the + of the battery pack.
Brown wire (GND) must be connected to the – terminal of the battery pack which itself is connected to the GND on the Raspberry (pin 39).
Finally, yellow wire of servo 1 to pin 11 (GPIO 17) and yellow wire of servo 2 to pin 13 (GPIO 27).

Step 3: Apache Web Server installation

This step is optional if your apache server is already installed. If not to install it:

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install apache2

You will find on the raspipress.com full details about installation and advanced Raspberry apache configuration.

To execute the command from the html page you need to add the www-data user in the sudoer. For this type:

visudo

and add the following lines

# User privilege for Servo CMD from apache
www-data ALL=(ALL:ALL) NOPASSWD:ALL

This is not the best ion term of security and shoudl be improved if you plan to use this interface outside of you privite network.

Step 4: ServoBlaster installation

ServoBlaster (see doc here) is an interface that will allow you to easily control multiple servo motor from a Raspberry.

To install it:

sudo apt-get install git
git clone git://github.com/richardghirst/PiBits.git
cd PiBits/ServoBlaster
sudo make

After setup you shoudl have a new interface in /dev/ :

ls -l /dev/servoblaster
prw-rw-rw- 1 root root 0 Jan 25 19:23 /dev/servoblaster

Then to test teh setup and ServoBlaster you can issue the follwoing command :

echo P1-11=120 > /dev/servoblaster
echo P1-13=120 > /dev/servoblaster

You can then try agin changing the value 120 …

Step 5 : Web HTML5 interface

The interface is really minimalist, you are free to modify it and adapt it to your needs and projects.

The php code is available here: https://github.com/Sirus10/servo/blob/master/index.php

But to get it on your raspberry simply do :

cd /var/www/
git clone git://github.com/Sirus10/servo.git

Page HTML5

Open the IP of your raspberry with a web brother and have fun!

Ex : http://192.168.1.21/servo/ :

Final result :

Enhancement and developments:

This are really the basis, there is plenty of opportunity to integrate it into a webcam for example, or any other interface. This is just a beginning …

use jQuery instead of having to reload each time the php page
canva to be use with HTML5 ?
Reverse the vertical servo

Menu :