You're here: Live Web Cam ! How to create a web cam feed

How to create a web cam feed

I have recently received a number of e-mail's asking how to create web cam feed. The following is a brief description of how the Live Web Cam ! part of my web site works. Before you read on, you should be aware that you really need a high speed, unmetered Internet connection such as ADSL (asynchronous digital subscriber line) or Cable Modem to provide a successful live video feed. Alternatively, if you have a regular 56 kbit/s modem you really want to still have some form of unmetered access, otherwise your paying per minute for the cam feed to operate (and that's not good !).

Windows Media Encoder

The live web cam on this site is streaming media (video and audio), that is encoded from my web cam and microphone onto a designated port on my PC at home. The Microsoft Windows Encoder V.7.0 program does all the hard work of encoding the audio and video and is very intuitive to administer and use on your PC. The Encoder allows you to encode from various media sources on your PC such as the web cam, microphone, and CD player. When the Encoder first starts, it asks you for the port number to broadcast on (this is important to consider for the HTML). The default port number provided is 8080, but I recommend you change this to 1121. The Encoder is fairly resource hungry, so you want a pretty modern PC if you intend to do other things while the Encoder is working. The output from the Encoder can only be viewed with Internet Explorer (IE) (V.4 or above) with Windows Media player installed.

The HTML that is listed below in listing 1 will detect if Media Player is installed and ask users of IE to install Media Player and provide the link to the download, if the user does not already have Media Player installed.

The HTML in the listings below points the users IE Browser to YOUR PC. This is important to consider if you do not have a permanent Internet Protocol (IP) Address. If your IP address varies each time you log on to the Internet then you must use the winipcfg command to determine what it is, and FTP the updated HTML file with your latest IP Address every time you log on to the Internet. If you have an ADSL or Cable Modem connection, then you may obtain the same IP Address. If you have a modem dial-up connection you will probably not get the same IP Address. To keep the same IP Address with an ADSL or Cable Modem connection you must either leave you PC switched on all the time, or get a Router (click here for a discussion on Routers). If you have a modem dial-up connection you may be able to arrange with your Internet Service Provider (ISP) to have a permanent IP Address (probably at a cost).

Web cam HTML Listing 1

The following is the HTML listing (listing 1) which you would place in your HTML where you want the image to appear.

<!--- BEGIN PLAYER --->
<!-- webbot bot="HTMLMarkup" startspan ---->
<object ID="MediaPlayer" WIDTH="320" HEIGHT="270" 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://213.105.88.99:1121">
<param NAME="ShowControls" VALUE="False">
<param NAME="ShowStatusBar" VALUE="False">
<embed TYPE="application/x-mplayer2" SRC="213.105.88.99:1121" NAME="MediaPlayer" WIDTH="320" HEIGHT="270" autostart="1" showcontrols="0"></embed></object>
<!-- webbot bot="HTMLMarkup" endspan ---->
<!--- end PLAYER --->

In listing 1 you can change the width and height of the output in the top set of values, you can enable/disable the controls (1/0 and true/false) of the Media Player session which is displayed in the IE Browser. And most importantly you can change the IP Address and Port Number. Typically you want to keep the same port number (the default is 8080, but I recommend 1121). As mentioned above your IP Address may vary each time you log on to the Internet. I have a cable modem with a Router (which I mention here), and therefore my IP Address is permanent (for example, 213.105.88.99).

Click here to see the type of web cam stream that Listing 1 presents in your browser.

Web cam HTML Listing 2

The following is the HTML listing (listing 2) which you would place in your HTML where you want the image to appear.

<p>
<object id="Player" width="176" height="144"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value="http://213.105.88.99:1121">
<param name="uiMode" value="none">
</object>

</p>
<p>
<input type="BUTTON" name="BtnPlay2" value="Play" onClick="StartMeUp()">
<input type="BUTTON" name="BtnStop2" value="Stop" onClick="ShutMeDown()">
</p>

<script>
<!--
function StartMeUp ()
{
Player.controls.play();
}

function ShutMeDown ()
{
Player.controls.stop();
}
-->
</script>

<script language="VBScript">
<!--
On error resume next
Player.URL = ""
if err then msgbox "You need Windows Media Player 7. Go to" & chr(13) &_
"http://www.microsoft.com/windowsmedia"
err.clear
-->
</script>

In listing 2 you can should set the width and height of the output to the same as that defined in your Windows Encoder Session. If you set the width and height bigger a than that of the Windows Encoder Session, a black border will appear around the streaming window.

The buttons are required, otherwise the viewer would have to right mouse click the window and select play to start the video stream.

The first set of JAVA Script sets the use of the buttons, and the second set of Java Script provides a dialogue box suggesting that the user go and download Windows Media Player (should they not have Windows Media Player installed). The second set of JAVA Script is not compulsory, but is highly recommended if you want to make sure that your viewers have Windows Media Player installed.

Click here to see the type of web cam stream that Listing 2 presents in your browser.