Walkthrough - Robot with a webcam (using Stickam video streaming)

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.

First, setup correctly. This tutorial should take you less than 10 minutes. This will let you and other web users see your robot while they are controlling it.

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

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.

We will use a USB webcam and a webcam streaming website to stream your video. This is the easiest way to set up a webcam.

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

2) Start a browser window and go to stickam.com and sign up for an account.

3) Stickam.com window: At the home page, click on the Go Live! button. 

4) Stickam.com window: The Live Streaming Console page will appear, select Friends Only and Everyone and click the Start Chat button. 

5) Stickam.com window:  Then click on Allow to let Adobe Flash Player to use your webcam. You should be able to see your webcam's image in a window now. Your webcam is ready to stream. 

6) Stickam.com window:  At the home page, go to Home -> My Stickam Player. 

7) Stickam.com window:  You will see several Stickam video players that you can use. Copy the Stickam Player Code for the one that is 340x290. 

8) MakeAffinity window: Go to: Make and select your robot project, and go to the Cam tab.

9) MakeAffinity window: Click on New Cam and give the cam a name.

10) MakeAffinity window: In your list of cams, click on the cam's Edit link to bring up the cam code editor screen.

11) MakeAffinity window: Delete everything in your cam code textbox and paste the Stickam Player Code there and click Save. Then click Preview and you should now see a view from your webcam in the MakeAffinity cam preview window

12) Preview your robot 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.

 

13) Share with the world: