This post kind of follows on from my previous post about creating thumbnails from a video. It describes how to take a snapshot with your webcam using Flex and then save the picture to your server. I decided to create my own little app to do this, originally because I wanted to take a snapshot of something and create a blog post from it from within the WordPress editor – it appears that out of the box you can only select and upload an image from your hard drive. There is an option in Facebook to take a picture when sending a message. I wanted something similar for WordPress. I am guessing there is a probably a plugin somewhere out there that does this, which would be nice as it would save me from having to write my own.

So, on with the solution. I came across a number of solutions – like this one – that appeared to involve creating an HTTP request then manually creating a multipart message, which seemed overly complex to me! Anyway, I vaguely remembered writing some Flex code a while back that did what I was looking for and after spending far too long searching for it on my laptop (don’t ask!) the solution turns out to be much simpler than the ones I had come across out there in Internet land.

Basically, you dump the data from the webcam into a bitmap, convert the bitmap into a JPEG, encode the bytes using base64 and then send the data (as a string) in an HTTP POST. I am not going to replicate the code here to do this as you can view it by taking a look at the webcam snapshot example. To view the source, right click on the page then select “View Source”. The example code relies on as3corelib – I use one of the classes in the library (JPGEncoder) to convert the bitmap data into a JPEG.

The example does an HTTP POST to a simple PHP script that just displays the snapshot you took. The code looks like this:

<?php

header("Content-type: image/jpeg");
echo base64_decode($_POST['image']);

?>

Simple eh?

So that is how to take a picture with your webcam and save it to your server using Flex.