Instructables

Remote controlled webcam using Arduino, SensorMonkey, jQuery and Justin.tv

Featured
Picture of Remote controlled webcam using Arduino, SensorMonkey, jQuery and Justin.tv
overview.png
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).
 
Remove these adsRemove these ads by Signing Up
Awre1 month ago

Hey,

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).

Hope to hear soon from you and thanks in advance,

Bob van der Weerden

faziefazie9 months ago
Awesome project, this is exactly what I need. Thanks for sharing :)
amccoy6 (author)  faziefazie8 months ago
No problem, glad you liked it!!
This looks hard
natasha_931 year ago
PROBLEM SOLVED >> 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 :)
amccoy6 (author)  natasha_931 year ago
Hi Natasha,

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.

I trust everything is working OK for you now??
yes ,, everything works .. thank you very much .. really appreciated :)
natasha_931 year ago
i solved the problem of " uploading on a website" 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 ??
natasha_931 year ago
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 ,,
natasha_931 year ago
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
amccoy6 (author)  natasha_931 year ago
Hi,

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.

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.

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.

Thanks!
natasha_931 year ago
did u use one battery ?? or 3 ??
amccoy6 (author)  natasha_931 year ago
Only one battery! I just included 3 in the picture (when one ran out, I swapped it for another charged one).

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).

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.
gordilha1 year ago
Thanks dude you help me allot !
Hi, Does the arduino board have to be connected to a computer via USB the whole time?
amccoy6 (author)  mchursinoff1 year ago
Yes.

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 :)
natasha_931 year ago
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 :)
amccoy6 (author)  natasha_931 year ago
Hi,

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.

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.

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.

Hope that helps!
haoishao1 year ago
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.

Best
hao
Screen shot 2013-01-20 at 5.16.10 PM.png
amccoy6 (author)  haoishao1 year ago
Hi,

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.

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.

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.

Hope this helps!
Nice project ,well done!!!
amccoy6 (author)  Husham Samir1 year ago
Many thanks!! Glad you enjoyed it.
haoishao1 year ago
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,

" 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':"


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??)

Please teach me how to do step 6, I am so close to finishing this!
Thank you very much


amccoy6 (author)  haoishao1 year ago
Hi,

You need to create a new HTML file called 'Webcam.html'. Then, you must copy & 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.

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).

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.

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.

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).

Finally, you need to edit the version numbers of these files in your 'Webcam.html' file to match the particular versions that you downloaded.

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.

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.
amccoy6 (author)  nonlinearmind1 year ago
Hello,

To send commands to your Arduino from a webpage, you must use the following procedure:
  1. Import the SensorMonkey JavaScript files
  2. Create a client connection to SensorMonkey
  3. Join your namespace using your private key
  4. Subscribe to your Arduino stream
  5. Send data to the Arduino stream using deliverToStreamPublisher()
As an example, the following code snippet executes the above steps to send a string of data ("This is a string") to a stream named "/private/My Sensor" (assume Step 1 - importing the SensorMonkey JavaScript files - has already been completed):

var client = new SensorMonkey.Client( "https://sensormonkey.eeng.nuim.ie" );
client.on( "connect", function() {
client.joinNamespace( "YOUR_NAMESPACE", "YOUR_PRIVATE_KEY", function( e ) {
if( e ) {
alert( "Failed to join namespace: " + e );
return;
}

client.subscribeToStream( "/private/My Sensor", function( e ) {
if( e ) {
alert( "Failed to subscribe to stream: " + e );
return;
}

client.deliverToStreamPublisher( "/private/My Sensor", "This is a string" );
} );
} );
} );

If you precede the string with a "#", 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).

For more information, you can see the SensorMonkey JavaScript API for descriptions of all the functions.

If you need further help, please do not hesitate to contact us.
lafnbear2 years ago
Great minds think alike:
http://www.instructables.com/id/Use-xbees-series-2-to-control-a-motor/
"Anything you can do, she can do wirelessly..."