How to Put a Web Cam on My Site

By Y.T. Lin

i Webcam image by Oscar from Fotolia.com

Whether it's for your 15 minutes or 15 days of fame, imagine streaming the shows that you are creating to the world. All that, while being your own director and also possibly teaching what you know to your viewers. Putting a webcam on your site is a great way to build followers that help increase your popularity on the Internet. There are two ways to stream your webcam online: use an external service or hand-code the script if you are proficient in HTML. Following the steps assumes you have connected a webcam to your computer.

Using External Streaming Provider

Step 1

Join UStream (see the third link in Resources section). UStream is a free and widely used webcam streaming service.

Step 2

Sign into your UStream account. Click on "My Shows" and choose "Create new standard show."

Step 3

Pick your options on the appearing screen and then click "Create Show."

Step 4

Select "My Shows." Create a new show title and save it in the list.

Step 5

Copy, paste and save the provided script into your web page or blog page where you want the webcam streaming to appear. The script should be placed between the and tags.

Step 6

Choose the new show you created from the "My Shows" list and turn on your webcam.

Step 7

Press the "Allow" button when asked to link to your webcam.

Step 8

Choose "Start broadcast" to begin the live webcam streaming that will appear on your website or blog where the script has been placed.

Streaming for Advanced HTML Users

Step 1

Download the latest version of the Windows Media Player from the official Microsoft website (see the last link in the Resources section).

Step 2

Follow the installation wizard for configuring and running the Windows Media Encoder on your computer.

Step 3

Open your website's HTML page in a text editor such as Notepad.

Step 4

Embed the following HTML scripts in your web page's text editor where you want the webcam streaming to appear:

Step 5

Match the display dimensions of your Windows Media Encoder session in Step 2's tag script where it says "Width" and "Height." The values should match so that your streaming images will not be distorted on the viewers' screen.

Step 6

Add the Class ID, which is the name of your webcam folder on your hard drive in Step 2's script where it says "CLSID:."

Step 7

Enter your domain name (where it says "enter your domain name here" in Step 2's script), which must match with what you registered with your hosting company.

Step 8

Enter the port number (where it says "enter your domain name here" in Step 2's script), if any, given to your domain from the hosting company.

Step 9

Save the changes made to your HTML page before closing the text editor page. The script on the page will detect a webcam connected to your computer.

Step 10

Test the web page in a browser where the webcam streaming will appear.

Step 11

Turn on your webcam and choose the "Video" option. Press "Play."

Still Image for Advanced HTML Users

Step 1

Download and install the Windows Media Encoder software by following the on-screen instructions (see the last link in the Resources section).

Step 2

Place the following HTML tags in a web page that you want to display "still" webcam image(s) instead of live streams:

The above tags should be placed between the and tags in your HTML document. This ensures your page reloads automatically and will not be cached on the viewer's computer. Also, the viewers will receive a new "still" image every time when they go to this page or press their browser's Refresh button.

Step 3

Change the value for the "content" in the first line after the "refresh" attribute. The number represents "second(s)." The page should refresh to load a new image if the viewer does not leave your page when the time is up.

Step 4

Write your image tag between the and tags in the HTML document; the way you would for other images. For example: my still webcam 106 .

Step 5

Place the exact image size in the image tags, after checking what size your webcam captures. Never change the size using HTML code as the image will be grainy on the screen.

Step 6

Save the HTML document and test it in your browser with the webcam on.

References

Writer Bio