Taking a picture with a webcam from FlashWe're developing a small prototype for a system at work, which involves working with a number of people in the system. To make it extra spiffy, we display a picture next to each person, but then the question of how to get the picture came up. I got the idea to build a Flash applet which could capture an image from a webcam and send it to the server. Possible when you know how to do it, but it took me a couple of days to figure out. Of course, it was complicated somewhat by me running Linux and not having access to the usual Macromedia Flash tools.
So, here's how to do it using swfmill and MTASC, two command line utilities for compiling Flash movies.
First, set up a movie with swfmill. This defines the frames and any assets to be used. For a simple webcam capture, we only need to add a movie object to the movie:
-
<movie width="320" height="300" version="8">
-
<frame>
-
<library>
-
<clip id="VideoDisplay" name="VideoDisplay">
-
<frame>
-
<video id="VideoSurface" width="320" height="240" />
-
<place id="VideoSurface" name="video" />
-
</frame>
-
</clip>
-
</library>
-
</frame>
-
</movie>
Save this as movie.xml and use swfmill to compile it:
-
swfmill simple movie.xml movie.swf
This generates an empty flash file with a movie asset in it. Now we can add the logic using ActionScript. This sets up a text field and the movie.
-
import flash.display.BitmapData;
-
import flash.geom.Matrix;
-
import flash.geom.Rectangle;
-
-
class Application extends MovieClip {
-
static function main() {
-
_root.createTextField("info", 0, 0, 5, Stage.width, 20);
-
_root.info.setNewTextFormat(new TextFormat("Arial", 10));
-
_root.info.text = "Webcam: Click the image to capture";
-
-
var display = _root.attachMovie("VideoDisplay", "display", _root.getNextHighestDepth());
-
var cam = Camera.get();
-
display.video._y = 30;
-
display.video._width = 320;
-
display.video._height = 240;
-
display.video.attachVideo(cam);
-
-
display.onPress = function() {
-
var bd = new BitmapData(320, 240);
-
var pixels = new Array();
-
var w = bd.width;
-
var h = bd.height;
-
var out = new LoadVars();
-
-
bd.draw(display.video, new Matrix());
-
for (var a = 0; a <w; a++) {
-
for (var b = 0; b <h; b++) {
-
var tmp = bd.getPixel(a, b).toString(32);
-
pixels.push(tmp);
-
}
-
}
-
out.img = pixels.join(",");
-
out.height = h;
-
out.width = w;
-
out.send("image_upload", "image_upload_frame", "POST");
-
}
-
}
-
}
Save this in Application.as and compile the final flash file:
-
mtasc -version 8 -cp /usr/share/mtasc/std8 -swf movie.swf -main -out webcam.swf -frame 1 Application.as
It's important to include the std8 dir - your installation dir might be different. The command compiles the final flash file in webcam.swf, which can then be included in a webpage like any other flash file.
This will show a live webcam, and when you click on the frame, it will be captured. Unfortunately, it's impossible to send binary data to the server, so we have to encode the image as a normal string. The quick and dirty, but very inefficient, way of doing this is to iterate over all pixels, get the color code for the pixel, and add the color to a list. The list can then be converted to a comma-separated string and sent to the server. This is done using out.send, which in this case sends it to the image_upload url in the frame named image_upload_frame.
The server then needs to parse the received string and use each element as the color of a specific pixel. Here's the Ruby/Rails code to do that:
-
def image_upload
-
img_data = params[:img].split(',')
-
h = params[:height]
-
w = params[:width]
-
-
image = PureImage:Image.new(w, h, 0x000000)
-
-
i = 0;
-
w.times {|x|
-
h.times {|y|
-
p = img_data[i]
-
col = p.to_i(32)
-
r = (col>> 16) & 0xff
-
g = (col>> 8) & 0xff
-
b = col & oxff
-
image.set(x, y, [r,b,g]
-
i = i + 1
-
}
-
}
-
-
png = PureImage::PNGIO.new
-
png.save(image, "/tmp/image.png")
-
end
The picture has now been saved in /tmp/image.png, and can be used to whatever purpose.
Size
A 320x240 picture will result in a string of about 530kb - which is quite a lot. It can be compressed by removing the comma-separation and using a fixed length list instead. Another way is to use back-references for colors, so instead of sending each color full, some fields can point back to a previous field with the same color.
The string can also be compressed, but that's pretty heavy in flash, and even then, the (binary) compressed data must be converted to a string for safe transportation. In the end, I changed the implementation to only send a thumbnail of the image. That was what I needed, so that'll suffice for now. Doing that is simply a question of adding a scale(ratio, ratio) to the empty Matrix object, and setting the BitmapData size to the scaled size.
RSS feeds available for 
