BadMagicNumber

I’ve been pretty impressed with some of the stuff ARKit can do, as well as the Microsoft Surface demos.

I decided that we need to do that on the web, too, so I build a virtual keypad, using HTML5 video and a webcam.

In HTML5, a common (example 1, example 2) pattern is to take an image from a video, copy it to a canvas and manipulate it here using Javascript. That’s the general pattern I’ve used.

I use a colored marker (setup in a calibration phase) and track its location. In order to take account of brightness changes, etc, I do cosine similarity tests on average color vectors for each “key” on the keypad using the Sylvester Javascript vector library.

I think there’s a fair bit of potential for video based interfaces. I’d like to see a combination of this and the HTML5 drumkit, for example.

You can try it out here: http://demo.nicklothian.com/keypad/. You’ll need to be using Firefox 3.5+.

Here’s a demo video (ironically as an embedded flash video):

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

Step 2: Select Capture Device

Click the “Stream” button.

Step 3: Stream Dialog

Click the “Next” button.

Step 4: Add stream destination

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

Step 5: Configure the 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

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.

I wrote my first Chrome extension. The APIs are pretty nice.

From the project page:

Chrome-Reload is an extension for the Chrome web browser to allow automatic periodic reloading of a page. It allows the you to configure how often each page reloads and see a count-down until the next load.

This is useful for scenarios such as monitoring constantly changing pages (eg, search results), or for keeping sessions alive in web applications.