All posts tagged coding

Video Doorbell with Raspberry Pi

I’ve been wanting to play with some video streaming for a while now, so last weekend I decided to order the Raspberry Pi Camera Board and see what it was capable of. This little camera – it’s tiny! – packs a punch! The still images are great, and the video is super clear. After messing around with it for a few hours, I figured I should do something constructive with it so set about thinking what would be useful/fun/something I always wanted to do.

Video Doorbell.

Yep. I’ve always fancied the idea of having a doorbell ping my mobile phone and let me see and speak to the person who rang it, there are probably already commercial products that do that (I haven’t looked) but quite frankly it wouldn’t be half as fun as building my own.

The general idea I currently have is:

  • Button is connected to GPIO, when pressed sends a message to a remote server to contact the device(s) registered
  • At the same time the camera is fired up and starts to send data to the remote server
  • If the mobile device accepts the ‘call’ then it connects to the video stream
  • If the mobile user hangs up (and there are no other mobile users viewing) then a message is sent to the remote server, and then onto the Pi to terminate the stream
  • If the hang up button is pressed on the Pi, then a message is sent to the remote server to contact the mobile device(s) to terminate the connection to the stream, and put the app back in the background

Something like that. I’m still not entirely sure what language(s) will be used, I had wanted to use Go so I could have a play with that, but I’m also thinking it would be quite cool if the entire stack – pi, server, mobile – was all written in JavaScript (node and Titanium) but I’m not sure yet, leaning more towards Go and native mobile apps, but we shall see Smile

I’ll be updating this post as things progress, stay tuned!

SnowCam: A WebRTC experiment with getUserMedia

I’d heard about WebRTC and navigator.getUserMedia as a way to access webcams and microphones, so after I somehow ended up here the other day, I figured it should be possible to do the same in JS and HTML5.

The basic idea was to take a webcam feed, apply a falling snow effect to it, and let the snow settle on any horizontal edges in the video. Just show me already!

Connecting it all up

Getting the webcam connected up to a <;video>; tag was pretty easy, just make sure to use the right vendor prefix and take note of the slight differences between the supported browsers (Firefox Nightly, Chrome, Opera). There is a shim available called The gUM Shield, but I found that after I’d put something together.

Next step was to apply some snow, so I placed a <;canvas>; tag over the top of the <;video>; tag, found simple example of particle generation, and had some snow.

Getting the snow to settle was a bit trickier. A bit of searching revealed that I would want to use a sobel convolution filter (Nice tut here) to find the edges in the current frame, and rather than combine the results from the 2 computations (horizontal and vertical) and place onto a canvas, just take the horizontal edges and put into a hash that I can check when placing the snow flake.

My first attempt at this ran pretty damn slow, the snow effect was stuttering the whole way through. That kind of made sense since I was trying to update ~300 flakes constantly on 1 canvas, and applying a fairly heavy computation to each frame of the webcam on another. This seemed to me to be the ideal time for a WebWorker. I moved the edge detection into the worker, and then just post the resulting hash back which gets injected into the snow object, this way as the snow is falling I can just check if there is a ledge to settle on by checking this.ledges[x][y] and if it exists we can ‘stick’ to the current x,y position, otherwise assume that it is falling – this lets us wipe away the snow from ledges as well.

This works pretty well, but I’m sure it can be optimised a fair bit more – there are some extra elements I probably don’t need to use, and some processing that could be removed – but for the moment I think it’s quite cool being able to see the various stages. I’ve tested this on Firefox Nightly, and the latest version of Chrome. It does run on Opera, but very slowly – I should probably look into that…

There are a couple of enhancements I want to add at some point:

  • Snow piling up when it lands on an existing flake
  • Connect to the microphone to allow the snow to be blown away

Give it a whirl

See it in action:
Get the code:

If you are using Firefox nightly, you will need to enable the feature:

  • Type “about:config” in the address bar and say yes that you want to make changes
  • Find the “media.navigator.enabled” entry and set it to true


My first time with WordPress

Having decided that I was going to setup a website this weekend, the time came to put something together. Normally I would start from scratch, playing around in Photoshop then knocking up some prototypes, then onto the full layout etc. This time round I couldn’t face doing any more coding – pretty hectic at work – so I figured I’d give WordPress a go. I’d never really considered it before, no real reason not to it just never entered my mind.

A quick install later, and it was up and running. Very nice bit of kit it is too!

I spent a few hours searching around for a theme to use, eventually settling on one from Pixel Perfect. A couple more hours of configuring, installing plugins, modifying plugins and templates and testing, and I had a pretty decent first pass at a new site – in a lot less time than it would have taken me normally.

The process was simple, painless, and even enjoyable! Defiantly going to be using it again.