Web-enable your interactive sensors over desktop, smartphone and tablet devices.

This tutorial describes in detail how to use the free SensorMonkey service to remotely control a pan and tilt webcam attached to an Arduino using nothing more than a simple webpage. The webpage can be viewed on any desktop, smartphone or tablet device with a compatible web-browser. I use the jQuery UI library to provide interactive pan and tilt controllers and Justin.tv to provide the live streaming audio/video output captured by the webcam. No server-side coding or Ethernet shield is required.

In a previous tutorial, I described in detail how to use SensorMonkey to push real-time sensor data from an Arduino to a webpage for visualization using Processing.js (Disclosure: I co-founded the company developing SensorMonkey). I used an accelerometer to sample motion data and published it live over the Internet for people to view its output. The resulting webpage could be embedded into an external website to act as a real-time streaming widget. Communication was uni-directional; the data flowed from the Arduino through SensorMonkey and into the webpage. This tutorial demonstrates the opposite; namely, the data flows from the webpage through SensorMonkey and into the Arduino.

Important! Although not strictly necessary, it is recommended that you have read the previous tutorial in this series (at the very least, you should be familiar with the basic workflow used to connect an Arduino to SensorMonkey).

Step 1: Gathering Materials

The following combination of hardware and software is required to complete this tutorial:

  • Arduino (I use an Uno but older boards such as a Duemilanove will work fine)
  • USB cable to connect Arduino to host computer
  • 2 x servo motors - one for pan and one for tilt (I use Hitec HS-422 Deluxe servos)
  • Mounting brackets to construct pan and tilt assembly using servos (I use a Lynx B-Pan/Tilt kit)
  • A base of some kind to stabilize your pan and tilt assembly (I use a cheap plastic mini-vice!)
  • Webcam (I use a Microsoft LifeCam VX-3000 but any will do as long as it's compatible with your OS)
  • External power supply to provide current to servos (I use rechargeable Ni-MH 9V batteries)
  • 9V to barrel jack adapter to connect external power supply to Arduino
  • Assorted wires to connect pan and tilt assembly to Arduino
  • Breadboard
Software: You can buy the servos and mounting brackets separately or as a single kit.

The 9V batteries don't last long, so if you want to setup your webcam for an extended period of time you'll need to hook it up to a persistent external power supply such as a wall-mounted DC adapter or a high-power density LiPo battery.

Alternatively, you can power one of the 2 servos using another Arduino connected to a different USB port.
<p>How you have interface your camera ?? With PC or Arduino directly??</p>
<p>This look good, but those links are down</p>
<p>cool project..</p><p>hi i have made similar project. but i use human detecting by PIR sensor and servo to control movement webcam if any human detected. i want to add image processing, so if any human movement, PIR sensor detected and webcam automatically captured image and save in PC. could you help me to explain more? how to integrate between PIR sensor and automatically captured in webcam?</p><p>appreciate for your replying..</p>
<p>Ol&aacute;, voc&ecirc; poderia me indicar algum tutorial?</p><p>miragempro@hotmail.com </p><p>Obrigado</p>
Hey,<br>Thanks for the awesome work...I really like your work and i'm trying to do it but i want to add two things in it..like add LED to turn on when the webcam is recording and off when it's not..also i want to add an out switch for the webcam..will these additions will work?<br>Thanks
<p>Hey,</p><p>Thanks for the guide everything seems to be working up untill the HTML part. My stream keeps saying that it is offline eventhough I published it in sensormonkey and put the stream online via justin.tv. I might have entered the wrong NAMESPACE, PRIVATEKEY and CHANNEL. Could you maybe explain what those mean? Like what is NAMESPACE (is it from my justin.tv account or my facebook for sensormonkey?) And this for all three please. And also I can't seem to get the sliders working, could you maybe provide me with the download links please? (newest version is also possible, because I can just change the versionnumbers in the HTML-code).</p><p>Hope to hear soon from you and thanks in advance,</p><p>Bob van der Weerden</p>
Awesome project, this is exactly what I need. Thanks for sharing :)
No problem, glad you liked it!!
This looks hard
PROBLEM SOLVED &gt;&gt; i can now control it 100% ,,, the problem was that in the namespace i only put the number ( i.e 520 ) ,, but in fact i must put the whole name ( i.e hello 's namespace 520 ) ,,, thxxxxxxx a lot for this project ,, it's really brilliant :)
Hi Natasha, <br> <br>Good to hear you were finally able to get it working! I should perhaps have made it clearer that you need to enter the entire namespace rather than just the number. <br> <br>I trust everything is working OK for you now??
yes ,, everything works .. thank you very much .. really appreciated :)
i solved the problem of &quot; uploading on a website&quot; i used google hosted libraries and now i have the interface in a website ( from wix.com ) ,, but still sliders dont interact ,, i connect everything well ,, but when i change the position of the slider nothing happens -_-' ,, any suggestions ??
i can control the motors from sensormonkey website but when i try from my local server (appserv) it doesnt' work ,, sliders dont interact with the motors ,,
hi again :) .. one more question please to make this project perfect ... i uploaded the html file into a website but i didnt' get the sliders because i have to upload the jquery files also ,, but i cant' find a website to upload the files and the html code ,, do u have any suggestions ?? and thanks in advance
Hi, <br> <br>You can either host the files on your own webserver or just upload to an account on a hosting provider somewhere (either paid or free). It should work the same in all those cases. You should download the required jQuery files and upload them manually along with your HTML file. <br> <br>Make sure you install a local webserver on your own machine and test locally (I assume you're doing this already). It should just be a matter then of uploading the directory containing all your files from your local webserver to a hosted one. <br> <br>Is it the jQuery part you're having trouble with (you said you were able to upload the HTML file successfully)? If you can explain further I can offer more specific advice. <br> <br>Thanks!
did u use one battery ?? or 3 ??
Only one battery! I just included 3 in the picture (when one ran out, I swapped it for another charged one). <br> <br>The batteries I was using really didn't last long so I would recommend a power adaptor. Alternatively, you can use a 2nd Arduino board to power one of the servo motors (using the original Arduino board to power the other one and to control the operation of the servos). <br> <br>The need for an external power source arises because a single Arduino powered from the USB port does not provide enough current to drive two servos of that size and power.
Thanks dude you help me allot !
Hi, Does the arduino board have to be connected to a computer via USB the whole time?
Yes. <br> <br>Having said that, you could use Bluetooth/WiFi transceivers (as mentioned by natasha_93 - thanks!) to mimic a wired connection using a wireless setup. As long as your Arduino is accessible using a serial port API (i.e. virtual COM port on Windows machines) you can transfer data back and forth as if it were a simple USB connection.
i guess so ,, because commands are sent from pc to arduino ,, u can use bluetooth shields or transmitters if u want a wireless model :)
hi ,, this is a very brilliant project ,, but i am trying to do it with only 1 motor ,, but i cant' find the right arduino sketch for it :( ... can u help me with the code ( to send serial commands to pan only ) ,, and thanks a lot :)
Hi, <br> <br>You should be able to use the existing Arduino sketch to control a pan-only webcam. Basically, you can just ignore the fact that there is no tilt motor attached to the Arduino. Everything else should work as normal. Just make sure to connect your pan motor to the correct output pin on the Arduino board. <br> <br>From the perspective of the webpage, moving the tilt slider will thus have no effect but won't interfere with the operation of the pan motor. So you can just use as normal. <br> <br>The alternative would be to remove the JavaScript code and the Arduino sketch code dealing with the tilt sensor but there probably wouldn't be much point because leaving them in gives you the flexibility to add a tilt motor at any time in the future. <br> <br>Hope that helps!
Dear amccoy6, thank you so much for the quick reply, it was very helpful. I am not able to see the live stream on a website. However, now there is another problem which is that there are no tilt and pan sliders. You mentioned in the instruction that you have created them using jQuery UI, Do you think you can go through on how to do that? In addition, how do you connect to sensor monkey and make it work? Thank you again for helping me. <br> <br>Best <br>hao
Hi, <br> <br>Please confirm that you have correctly downloaded the jQuery and jQueryUI libraries and placed them in the appropriate directory. Step 6 shows the required directory/file structure. From the image you posted, it looks like the jQueryUI theme may be missing. <br> <br>In terms of creating the sliders and connecting to SensorMonkey, you just need to copy and paste the code listed in Step 6 into a file called Webcam.html which you then need to edit; you need to replace each instance of YOUR_NAMESPACE, YOUR_PRIVATE_KEY and YOUR_CHANNEL with those specific to you. It looks like you have the Justin.tv stream working ok, so you're almost there. <br> <br>One final thing; you should host the files on a webserver, either installed locally on your machine or available over the Internet. So don't double-click the file to open it in your web-browser (i.e. using file:// protocol) - that probably won't work. <br> <br>Hope this helps!
Nice project ,well done!!!
Many thanks!! Glad you enjoyed it.
hi, do you think its possibly that you show step by step on how to do the last step? I am I have done everything and was able to control servos from sensormonkey, but I have no clue where these html codes come from and where they should go, the last step is very confusing :( can you please explain from jQuery UI library? I downloaded it but have no idea what to do with it, <br> <br>&quot; jQuery UI library (1.8.21 at the time of writing) and placed it in the same directory as the webpage (along with the associated CSS and image files for my chosen theme - UI lightness - see screenshot). You'll need to edit the code below and save it as 'Webcam.html':&quot; <br> <br> <br>how do I place it in the same directory as the webpage(where is this webpage coming from, is it already created in the library or do i have to create a new html file??) <br> <br>Please teach me how to do step 6, I am so close to finishing this! <br>Thank you very much <br> <br> <br>
Hi, <br> <br>You need to create a new HTML file called 'Webcam.html'. Then, you must copy &amp; paste the code from Step 6 into this file. You need to replace each instance of YOUR_NAMESPACE, YOUR_PRIVATE_KEY and YOUR_CHANNEL in this HTML file with those assigned to you. <br> <br>Save the HTML file into a directory. Then, download the production version of the jQuery library and place the 'jquery-x.y.z.min.js' file into this directory (where x, y and z are version numbers for the latest jQuery release). <br> <br>Now, download the stable version of the jQuery UI library, unzip it, navigate to the 'js' subfolder and copy the 'jquery-ui-x.y.z.min.js' file into the new directory you just created. <br> <br>Assuming you chose the UI Lightness theme, navigate into the 'css/ui-lightness' subfolder and copy the entire contents of this folder into the new directory you just created. <br> <br>If you follow these steps, you should have a file/directory structure identical to the screenshot in Step 6 (with the exception that the version numbers for your jQuery and jQuery UI installations will probably be different). <br> <br>Finally, you need to edit the version numbers of these files in your 'Webcam.html' file to match the particular versions that you downloaded. <br> <br>You must then upload the contents of your directory to a webserver so you can access it using a web-browser. You can either install a local copy of Apache, place the contents of your directory into the root public folder and access using 'http://localhost/Webcam.html', or upload the contents to a hosted webserver so you can access over the Internet. <br> <br>If you need further help, please do not hesitate to contact us.
Nice tutorial, and easily understandable, but I couldn't figure out the jquery part - which is ok, because I need something simpler. How can I send commands to my arduino from a webpage? I have it on sensormonkey and can send commands from there, but have not found any tutorials to do the same from my own page.
Hello,<br> <br> To send commands to your Arduino from a webpage, you must use the following procedure:<br> <ol> <li> Import the SensorMonkey JavaScript files <li> Create a client connection to SensorMonkey <li> Join your namespace using your private key <li> Subscribe to your Arduino stream <li> Send data to the Arduino stream using deliverToStreamPublisher() </ol> As an example, the following code snippet executes the above steps to send a string of data (&quot;This is a string&quot;) to a stream named &quot;/private/My Sensor&quot; (assume Step 1 - importing the SensorMonkey JavaScript files - has already been completed):<br> <br> var client = new SensorMonkey.Client( &quot;https://sensormonkey.eeng.nuim.ie&quot; );<br> client.on( &quot;connect&quot;, function() { <div style="margin-left: 40.0px;"> client.joinNamespace( &quot;<strong>YOUR_NAMESPACE</strong>&quot;, &quot;<strong>YOUR_PRIVATE_KEY</strong>&quot;, function( e ) {</div> <div style="margin-left: 80.0px;"> if( e ) {</div> <div style="margin-left: 120.0px;"> alert( &quot;Failed to join namespace: &quot; + e );</div> <div style="margin-left: 120.0px;"> return;</div> <div style="margin-left: 80.0px;"> }<br> <br> client.subscribeToStream( &quot;/private/My Sensor&quot;, function( e ) {</div> <div style="margin-left: 120.0px;"> if( e ) {</div> <div style="margin-left: 160.0px;"> alert( &quot;Failed to subscribe to stream: &quot; + e );</div> <div style="margin-left: 160.0px;"> return;</div> <div style="margin-left: 120.0px;"> }<br> <br> client.deliverToStreamPublisher( &quot;/private/My Sensor&quot;, &quot;This is a string&quot; );</div> <div style="margin-left: 80.0px;"> } );</div> <div style="margin-left: 40.0px;"> } );</div> <div> } );<br> <br> If you precede the string with a &quot;#&quot;, it will be interpreted by SensorMonkey as a series of hexadecimal character pairs and the data will be sent to your sensor in binary form (rather than a UTF8-encoded string).<br> <br> For more information, you can see the SensorMonkey <a href="https://sensormonkey.eeng.nuim.ie/index.php/site/page?view=support.javascriptclientapi" rel="nofollow">JavaScript API</a> for descriptions of all the functions.<br> <br> If you need further help, please do not hesitate to contact us.</div>
Great minds think alike: <br>http://www.instructables.com/id/Use-xbees-series-2-to-control-a-motor/ <br>&quot;Anything you can do, she can do wirelessly...&quot;

About This Instructable




More by amccoy6:Remote controlled webcam using Arduino, SensorMonkey, jQuery and Justin.tv Drive a webpage in real-time using Arduino, SensorMonkey and Processing.js 
Add instructable to: