Using a webcam with HTML 5

HTML 5 includes the <video> tag to enable embedding of video.

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.

9 thoughts on “Using a webcam with HTML 5

  1. Decreasing the framerate and resolution from the capture device, and the bitrate for the encoder, has helped alot. Now the stream plays indefinitely, though there can still be several seconds of delay.

  2. Hi John,

    I’ve tried both Firefox 3 & 3.5 streams on Linux (unsure of the exact versions). Based on your forum posting, though, I think we’re doing something different to you. What I’m doing here is transcoding to Ogg/Vorbis, and then using native HTML5 video support to view the video. It appears you are trying to use a plugin to view video – HTML5 video avoids that approach.

  3. thanks Nick –

    I do understand that the HTML5 approach is different, and does start to work for me on both firefox 3.55 and 3.0.15 linux.

    Your settings described here are also the only way I have been able to get it to work with a plugin. They also work with mplayer on linux and smplayer on xp.

  4. Works like a charm, i want to proxy the stream to a webserver located in a datacenter.. when using proxypass. will apache still build a new connection for every new client to the pc hosting the webcam? or will apache just relay.

    If not, how can i make the apache server in the datacenter relay the stream? perhaps get a vlc daemon running on it?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>