Setup a webcam stream in ten minutes
This article was originally published on June 12, 2008.
2012 Update
Microsoft has stopped supporting Windows Media Encoder. It has been replaced with a new product called Expression. Unfortunately, I have not had a chance to use Expression and figure out how to create a similar result. WME is still available for download, but please keep in mind it may not work at all with Windows 7. If anyone has any information on using Expression, please contact me!
I have friends all over the world. Once in awhile, I make use of the various webcams I own and do a little video chatting. Getting video chat to work well will be for another day – something I learned recently, however, was how to setup a live stream on a webpage. It was surprisingly easy, and works in both Windows Vista and Windows XP.
You need three things : a webcam, a decent high-speed internet connection (the lowest end DSL might not have enough bandwidth to support this well), and Windows Media Encoder, which is available for free from Microsoft. If you’re running Vista, there’s a hotfix you might need (it’s linked on the main WME page), but I have yet to have any problems myself.
Download
You might also want to get a dynamic IP service, like dyndns or no-ip. I used no-ip.org, although they seem to be really big on sending me frequent emails advertising their paid services – I’m not a big fan of free services spamming me about their commerical options. If you don’t use a dynamic IP service with the computer running the webcam, you’ll have to manually update the webpage every time your IP changes.
We’ll walk through how to get setup and going.
Setting up the stream
Install and run Windows Media Encoder (WME). Click the New Session button. We want to create a live broadcast stream.
Select the webcam and microphone you want to use. If you’re setting up this broadcast so your family and friends can see you during the day, you probably don’t need to have sound at all. Keep in mind that streaming sound with your video will also use more bandwidth. My Dell XPS M1330 has an integrated 0.3MP webcam, so I’m using that for this stream.
The Configure… button will allow you to change settings on the camera, such as contrast, white balance, noise reduction, etc. I tend to just use the default settings; they work well in general-use situations.
Unless you happen to have access to a Windows Media Server, you’re going to want to setup this stream to be pulled from a server, rather than pushed to a server.
Next, you’ll want to pick a port to use. This is where you need to figure out what’s going to work for you. I was originally going to use port 80. It wasn’t working, until I realized I’d already setup IIS on my laptop, which uses 80 by default (of course – it’s a webserver). In the end, I picked a port in the 1200-1300 range. If you’re running this stream behind a router at home, make sure you open up the correct port in your router’s configuration.
Don’t worry about the local and remote addresses – we’re going to use a dynamic IP url (e.g. mywebcam.no-ip.org or whatever you’ve registered), or the IP address of the machine running the webcam.
The last step we care about in this wizard is selecting a framerate. I’ve been running my stream on a network connection with high upload bandwidth (I average 6MB/s), but if you’re doing this at home on a cable or DSL connection, you’ll probably want to select something a little lower – 250 or 300 kbps will probably work just fine.
You can click through to the end, make sure things are setup the way you want (you can always change all these settings later), click Finish. If your stream isn’t already running, click the “Start Encoding” button in WME.
Now that we’ve got your stream up and running, we can setup a webpage to broadcast it. You don’t need any kind of server-side technology to broadcast your stream. What we’re going to use is an ActiveX control that loads the stream in a Windows Media format. I’ve had hit-or-miss success with this stream opening in Firefox, but it will always work in IE. This is a pretty quick-and-dirty method of getting a webcam stream up and running. OS X users can open the stream in VLC Media Player, but Safari is generally not compatible, since this uses an ActiveX control to load the stream.
Create an HTML page that looks something like this:
<html> <head> <title>My stream</title> </head> <body> <!--- BEGIN PLAYER ---> <!-- webbot bot="HTMLMarkup" startspan ----> <object ID="MediaPlayer" WIDTH="320" HEIGHT="240" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"> <param name="autoStart" value="True"> <param name="filename" value="http://your-ip-or-url:port"> <param NAME="ShowControls" VALUE="False"> <param NAME="ShowStatusBar" VALUE="False"> <embed TYPE="application/x-mplayer2" SRC="http://your-ip-or-url:port" NAME="MediaPlayer" WIDTH="320" HEIGHT="240" autostart="1" showcontrols="0"></embed> </object> <!-- webbot bot="HTMLMarkup" endspan ----> <!--- end PLAYER ---> </body> </html>
Obviously, you’ll want to replace the http://your-ip-or-url:port with your IP address or URL, and the port number you’ve chosen.
Save the file and load it up in Internet Explorer. It will take a few seconds to buffer the stream, but you should be loaded and ready to go.
If you want to get really fancy and have access to some kind of server-side technology (PHP, Java, ASP, etc.), you can setup a login interface so that you can control who can see your stream. The server where I’m hosting my stream allows SSL, so I also have it encrypted.
Julie over at The Gadgeteer is sending me a couple of webcams to review for her site. With those and the other USB cameras I already have, I’m thinking about setting up a little home surveillance system I can log into from work. I haven’t really done much with webcams before now, but with Windows Media Encoder and enough bandwidth, the possibilities are endless.
Happy streaming!
Articles in this section
