Walkthrough - Robot with a webcam (WebcamXP Free)

This tutorial will show you how to add a USB webcam to your robot. We recommend that you take a look at the Sharing Robots Tour first if you have not done so yet.

Providing you are setup correctly, the tutorial should take you less than 10 minutes. This will let you and other web users see your construct while they are using it.

The tutorial will ask you to do the steps and then explain what you've done later. It's actually easier to do it than to tell you how to do it.

This tutorial assumes that you know how to make a robot (see Making your first construct)

Check that you have setup correctly and let's begin!

At the MakeAffinity website:

1) Go to: Make and select the robot, and go to the Cam tab.

2) Click on New Cam and give the cam a name.

3) In your list of cams, click on the cam's Edit link to edit it.

Tip: About the Cam Editor (Make -> Cam tab) The Cam Editor is divided into 2 main areas. At the top is a textbox where you enter your webcam's code and at the bottom is a preview window where you can test your cam code. The process of editing a cam is to enter and edit your cam code in the textbox, click on Save to save the code, and then click on Preview to preview it. The Stop button is used to stop the preview. You can repeat the process to refine your cam code until you are happy with the way your cam looks in the preview window. New cam code is subject to approval due to security reasons. Once you are happy with your cam code, click on the Verify Me button at the bottom of the page to request for approval. Note that a webcam's code cannot be changed once it has been submitted for approval and has been approved. You can create as many cams as you like. The following steps will show you how.

Tip: About Webcams There are many different types of webcams. One type requires that you install webcam software on your computer to make it possible to stream video images from a USB webcam. Another type is a network camera where the camera itself contains the video streaming software so you do not need to install any webcam software on your computer. Yet another way is to use a webcam streaming website to help you stream your video. All the mentioned types can be used with a MakeAffinity construct. Regardless of the type of webcam that you use, there will typically be a piece of code (usually html or javascript or a combination of the two) that comes with it. This code is sometimes called the EMBED code. The code is for you to copy and paste onto a web page. Simply put, using a webcam with a construct is simply a matter of copying and pasting that cam code into the cam code textbox. The following steps will show you how.

4) This tutorial will use a USB webcam with WebcamXP Free - a program that streams your webcam video. This is an easy way to set up a webcam. This method is not dependent on a web streaming website and it is also more bandwidth efficient.

(Note: MakeAffinity is not related to WebcamXP. While we think it's a good piece of software and we use it to show you how you can setup a webcam, we cannot be held responsible for it.)

Do the following steps:

a) Connect your USB webcam to your computer and install the drivers that came with it if necessary.

b) Download, install and run WebcamXP Free on your computer.

c) WebcamXP window: Right click on the WebcamXP window -> Select "PCI / USB (WDM Driver)" and choose your USB webcam.

d) WebcamXP window: On the menu, go to Tools -> "Generate HTML Code" to bring up the "HTML Generation Wizard".

e) WebcamXP window: In the wizard: Select Flash for "Type of video stream", and click Next to get your webcam's EMBED code. Copy the EMBED code.

 

f) MakeAffinity window: Delete everything in your cam code textbox and paste the EMBED code there and click Save.

g) MakeAffinity window: Find your webcam's IP address in your EMBED code. It should look something like one of the following:

    http://66.102.9.104:8080/     or     http://www.google.com:8080/ 

h) MakeAffinity window: At the beginning of your EMBED code, insert the codebase tag for your webcam's IP address after the word "object".

    A codebase tag (for a random IP address) looks like this:

        codebase="http://66.102.9.104:8080/"

    The result after inserting your tag should look like this:

        codebase="http://66.102.9.104:8080/"   type="application...

    Check that the double-quotes and white spaces are in the right places too. Click Save again. 

i) MakeAffinity window: Click Preview. You should now be able to see a view from your webcam in the MakeAffinity cam preview window.  

j) MakeAffinity window: The webcam viewer may be off center in the preview window. To fix this, insert the center tag at the very beginning of your cam code. Save and restart the preview to see the difference. The center tag looks like this:

5) Preview your construct to see the final product:

a) Click on the Preview tab.

b) Select the cam that you have just created from the Use the following cam for the preview dropdownlist.

c) Click Start Preview to start playing with your construct.

 

6) Share with the world: