Using a webcam with HTML 5 <video> via VLC

HTML 5 includes the

Unfortunately, and unlike Flash, there is no way to directly use a webcam with it. However, if you want to experiment with it some VLC+Apache magic can help.

Firstly, you need to setup VLC to do HTTP streaming. These instructions are for windows, but it works on Linux, too (Linux seems a lot less stable. I suspect that is a Firefox problem rather than VLC, though). VLC can be somewhat obtuse to use, so here’s how I got it working

Step 1: Open VLC and select streaming

VLC - Select Streaming

Step 2: Select Capture Device

VLC Select Capture Device

Click the “Stream” button.

Step 3: Stream Dialog

VLC Stream Dialog

Click the “Next” button.

Step 4: Add stream destination

VLC Add Destination

Select “HTTP”, check “Display Locally”, select the “Video - Thora + Vorbis (OGG)” profile and click “Add”

Step 5: Configure the stream

VLC Configure Stream

Note that I changed the port from the default of 8080 to 8081. This is optional, but note what port you use. Verify the profile is correct, and click the “Next” button.

Step 6: Modify the stream path

VLC Modify Stream Path

Carefully alter the “Generated stream output string” to include “/stream.ogg” after the port. You need to do this because Firefox uses the file extension to work out how to handle the file (in the absence of correct headers).

Click Stream, and VLC should display a window showing your webcam.

Step 7: Verify streaming is working

Go to http://localhost:8081/stream.ogg in Firefox. Chrome kind of works, too, sometime (I usually get the first frame, and then it stops playing).

Optional Step

This stream can be embedded in a webpage using the URL above. However, if you want to manipulate it in Javascript at all you will quickly run into the same-origin restriction. It’s possible to get around this by using Apache to proxy the stream onto the same site you serve yout pages and javascript from.

Step 8: Configure Apache to Proxy Stream

I use mod_proxy, and add the following:

ProxyPass /stream/stream.ogg http://localhost:8081/stream.ogg

That will allow you to view the stream from http://yourwebserver:port/stream/stream.ogg.

In my next post I aim to show something you can do with this stream.