You're here: How to guides Creating a web cam feed with WME

How to create a live web cam feed with Windows Media Encoder

This section of my website describes how to create a live web cam feed using Windows Media Encoder. There are various versions of Windows Media Encoder available for various Microsoft operating systems.

You can download Windows Media Encoder from http://www.microsoft.com/windows/windowsmedia/download/default.asp

Windows 98 and Windows ME only support Windows Encoder 7.1, whereas Windows 2000 and Windows XP support both Windows Media Encoder 7.1 and 9.0.

About Windows Media Encoder

Windows Media Encoder is very intuitive to administer and operate on your PC. Windows Media Encoder allows you to encode from various media sources on your PC such as the web cam, microphone, and CD player. In the case of a web cam, Windows Media Encoder creates the streaming media (video and audio) by encoding images from the web cam and encoding sound from the microphone, and broadcasting the streaming media output on a designated port on your PC.

Windows Media Encoder is fairly resource hungry, so you want a pretty modern PC if you intend to do other things while broadcasting your live web cam feed. The output from the Windows Media Encoder can only be viewed with Internet Explorer (IE) (V.4 or above) with Windows Media player installed.

Prerequisites

Before creating your live web cam feed get a "fixed domain presence" on the Internet by using a free service provided by no-ip.com or dyndns.org. I discuss more about getting a fixed domain presence here. In the examples below I use wisbey.hopto.org for the name of my fixed domain name that I have registered with no-ip.com.

Also, before creating your live web cam feed I suggest you examine your existing configuration to determine if you need to "open" particular ports on any firewall software you may be running. If you have a network address translation (NAT) device such as a broadband Internet you will have to "forward" particular ports to your computer streaming your live web cam feed. I briefly discuss configuration of broadband Internet routers here. In the example below I broadcast from port 1121, so in this case you would want to ensure that port 1121 is not closed down by your firewall software, and if you have a broadband Internet router you would want to ensure that port 1121 is forwarded to the appropriate PC on your local area network.

Configuring and running Windows Media Encoder

I will not go into great detail about configuring and running Windows Media Encoder since it is a very simple application to use. I simply want to mention some important aspects of configuring and running Window Media Encoder.

When the Windows Media Encoder first starts, the configuration wizard asks you for the port number to broadcast on (which you must reference in your web pages, see below). The default port number provided is 8080, but I recommend you change this to 1121 because some Internet service providers cause issues with port 8080. The configuration wizard also asks you for the type of output. I suggest you choose something sensible that is for Internet broadcasting opposed to local area network broadcasting.

Authoring your web pages to display your live web cam feed

You can either create your web pages so that the web cam output is embedded in your web page, or so the web cam output is displayed in the Windows Media Player application separately. The HTML that is listed below in listing 1 and listing 2 are examples of how to embed the web cam output in your web page. The section on invoking Windows Media Player provides examples of how to get your web cam output is displayed in the Windows Media Player application separately.

Embedding the web cam output : web cam HTML Listing 1

The HTML that is listed below in listing 1 will detect if Media Player is installed and if necessary will ask users of IE to install Media Player by providing the link to the download.

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

<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">

In listing 1 you should:

change the width and height of the output with the width and height values (these should match output dimensions of your Windows Media Encoder session if you want the image to appear undistorted)
set the domain name and port number (the domain name must be what you registered with no-ip.com or dyndns.org, and the port number must match what you set in Windows Media Encoder)

In listing 1 you can also:

enable/disable the controls (1/0 and true/false) of the Media Player session which appear in the IE Browser
enable/disable the status bar (1/0 and true/false) of the Media Player session which appear in the IE Browser
enable/disable autostart (1/0 and true/false) of the Media Player session so that the web cam output either automatically starts or has to be started manually (if you put this to "true" then you must enable the controls so that the viewers of the page can manually start the feed themselves)

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

Embedding the web cam output - 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>
<p>
<input type="BUTTON" name="BtnPlay2" value="Play" onClick="StartMeUp()">
<input type="BUTTON" name="BtnStop2" value="Stop" onClick="ShutMeDown()">
</p>

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

In listing 2 you should:

change the width and height of the output with the width and height values (these should match output dimensions of your Windows Media Encoder session if you want the image to appear undistorted)
set the domain name and port number (the domain name must be what you registered with no-ip.com or dyndns.org, and the port number must match what you set in Windows Media Encoder)

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 functions are required, otherwise the viewer of the page 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.

Invoking Windows Media Player to view the web cam output

The HTML required for opening the web cam output in Windows Media Player separately is very simple. You simply place the following HTML within your web page where you want the text and hyperlink to appear:

<p>You can also view this live feed directly in Windows Media Player by <a href="webcam.asx" target="_blank">clicking here</a>.</p>

This HTML will create the following text and link:

You can also view this live feed directly in Windows Media Player by clicking here.

In addition to the HTML listed above you need to create a webcam.asx file in a text editor such as Notepad. The following listing is the the contents of a webcam.asx file:

Within the webcam.asx file you must specify the domain name and port number (the domain name must be what you registered with no-ip.com or dyndns.org, and the port number must match what you set in Windows Media Encoder).