A while back, I posed a challenge to devise a system that would let you save BitmapData objects to the server from Flash 8 (in AS2). Since then, I have seen a few great attempts, all of which were too slow and intensive to be of much use (imho). I've also seen one successful implementation by Craig Swann at webcamtastic (which is a great use of Flash 8 btw).
In the meantime, I've been working on my own system. I had 3 goals:
- It must run quickly enough with webcam sized images (320x240) to not require chunking (spreading execution over multiple frames)
- The upload to the server must be reasonably fast and small (<200kb for a 320x240 image)
- The resulting image must be of reasonable quality
I managed to build out the compression/encoding routine in Flash a couple months ago, but then things got busy and we never finished the back-end support. In the last week we finally freed up a couple hours and put together a proof of concept. Overall I'm really happy with it.
It uses down-sampling (to 12bit color) and run-length compression to convert a BitmapData object into a UTF-8 string and sends it to the server via Remoting. It can convert a 320x240 image in just over one second on my G5, resulting in 50-150kb of string data. This is uploaded to the server in a few seconds (dependent on connection speed), and converted into a 50% JPEG, which is of pretty decent quality except for some banding on areas of solid color as a result of the downsampling.
This demo is super simple, but will give you an idea of the functionality. It uses 160x120 images because that was the original size of the bitmaps in the fire demo. These bitmaps are encoded/compressed to about 10-30kb in less than half a second, and results in a <3kb JPG on the server.
I also have engines that work with greyscale and black and white images (which of course are even smaller). More demos to come, I'm sure. ActionScript 3 invalidates all this of course, but it's always fun to tackle a challenge.
[[UPDATE: Added to Gallery Incomplet]]
Comments (24)
plzzzz let us see u r code !!!
Posted by: reremoon at March 15, 2006 10:45 AMURL: http://www.is-webdesign.com
Another save/generate bitmap experiment
http://double-quotes.com/smartchart/smartchart.htm
Posted by: Jerome at March 15, 2006 11:01 AMURL:
It is amazing, it would be great if you could share the code.
Posted by: S Yeh at March 15, 2006 06:05 PMURL:
Now im doing something similar and without compression the results are good too.
I take all the pixels of the image with two for loops (one for x axis and one for y axis) and with getPixel() method, i put this info into one array and send it to the server.
The funniest of all of this is merge your gOOifier with this method to save images :D
Bye!
Posted by: Elecash at March 16, 2006 05:21 AMURL: http://www.elecash.org/blog
Hmmm, I must say that I feel a bit hurt. "slow and intensive" - I fear that you are referring to my BitmapExporter class?
Did you check out its latest version? If the drawing demo appears slow it might be because the image size is 500x425 pixels which results in about 11x the amount of data of a 160x120 webcam image. For sizes like these you simply have to go for multiple-passes because otherwise you will get the "Flash player is running slow" warning message. For tiny images like webcam-shots my class includes also fast modes because for those sizes the time to compress the data often takes longer than if you simply send it uncompressed.
But well - I'm really looking forward to see more demos of your class - how about one handling a 320x240 or bigger image? BTW - do you use a special encoding scheme in order to make up for the data size doubling that internally happens when you send strings via remoting?
Posted by: Mario Klingemann at March 16, 2006 05:40 AMURL: http://www.quasimondo.com/archives/000572.php
Mario,
Just about to jump on a plane, so quick response for now:
I definitely wasn't picking on you. :) I've seen a number of attempts made. Yours was the first, and one of the best, and I'm still impressed by it.
My solution definitely appears to be faster though. Saving an image from your demo took just under 2.5 minutes (and the resulting image was actually incomplete... the bottom 250px were black). For a rough comparison, saving a 320x240 image using my technique takes just over 5 seconds on the same computer (this would likely almost double to 10 seconds for an image the same size as your demo).
Bear in mind though that mine will always downsample the color palette, whereas it sounds like yours is using adaptive palettes or something similar (which is much more CPU intensive, but results in much nicer output).
Gotta run. Much respect,
Posted by: Grant Skinner at March 16, 2006 07:29 AMGrant.
URL: http://gskinner.com/
Ah - thanks for making me feel better. 2.5 minutes? Whoa that's really strange. I fear that the bottleneck in this case is my server and GD, but maybe that's just a lame excuse. Well, it looks like I have to keep on improving it.
Cheers
Posted by: Mario Klingemann at March 16, 2006 07:58 AMMario
URL: http://www.quasimondo.com/archives/000572.php
getting rid of chunking is a smart move, as that can add quite a lot of overhead for every chunk and hence slow down the whole process when used with small pictures.
to do mario justice: after having used marios class on pictures sized 1600x1200 and above (see the url) i can say that the speed of compressing and creating the palette is no problem at all.
Posted by: marko ritter at March 24, 2006 07:38 AMURL: http://www.spamrecycling.com
http://doodle.indev.no -- thats my attempt.. I'm keeping all 24bits of color, though, as the transparency often create mad gradients.
Posted by: einaros at March 30, 2006 01:41 PMURL: http://www.indev.no
Hey Grant,
Very slick man.
It would be interesting to do a test by implementing a snapshot interval to capture the webcam video to the server. Then allow the user to play back the frames captured.
Great stuff!
cheers,
Eric
Posted by: Eric at March 30, 2006 05:31 PMURL: http://eepmon.com
great app!
I've been playing with similar techniques, using LZW compression in stead of RLE, and also downgrading the palette.
I'm building my app to automatically make thumbnails of SWF files after uploading them to the server.
It works pretty well, But I'm still trying to find the balance between client side load and serverload.
compression takes time..so does uploading data :)
What do you use for color reduction?
I just started playing with bitmap objects, and I have a feeling it can be done quicker then my way..
keep up the good work!
Posted by: Sander at April 24, 2006 10:00 AMSander
URL: http://peper.cover05.nl
hi
I was impressed by your exploit while looking on your site of gallery impcomplet… and I wondered whether one could for example thank you put the man fire in bottom of screen
thank you
PS: good work ^^
Posted by: remi at May 31, 2006 07:06 AMURL:
I was impressed by your exploit while looking on your site of gallery impcomplet…
and I wondered whether one could for example put the man in fire in bottom of screen
thank you
PS: sorry for the first message^^
Posted by: remi at May 31, 2006 07:11 AMURL:
Esto es diseño y programación los felicito desde aca..!
Posted by: Ricardo at June 4, 2006 11:45 AMURL:
I am a programmer but i don't use Flash, I am mwriting a security program for schools and i need something just like this to take pictures of parents for the system. Can you e-mail me so i can ask you some questions. ASAP please for i need to have this type of thing running by October 22nd
Posted by: Jeffrey Meyer at October 16, 2006 08:47 AMURL: http://www.eyemetric.com
The project we are trying to provide to a Children's museum allows the kids to climb to the top of a rocket where there will be a wireless web cam that will feed the video down to a station for parents at the bottom. In that station they would have a touchscreen to take a photo of their child and email it to themselves.
We can get to the point where it takes a snapshot of the video, but don't have the expertise to save that image to a file. We have the capability to email the file once it is saved. So we need help with the all important saving aspect.
If anyone can help with this project, please let me know.
Posted by: Jeremy Gavin at December 19, 2006 08:48 PMURL: http://treefort.com
Hi Marko Ritter and any one else who may know
How were you able to create images over 1600x1200 and above using the BitmapExporter?
I keep getting Error(undefined)
Posted by: DayStruct at February 21, 2007 08:43 PMURL:
Hi,
I am very much impressed with your work and am inspired to do such experiments.
This is one of my atttempts. Plz help me.
Is there a way to store the captured picture in the hard disk or sending it to the server by using flash AS-2? If there is one then, we can view the same picture in flash from server.
Posted by: Johny at May 16, 2007 12:18 AMURL:
Hola me parece estupendo esta programacion, necesito lograr hacer algo muy parecido y no se por donde empezar ayudenme
Posted by: DAVER at May 21, 2007 09:46 AMURL:
ok, it's perfect, but, cand you send me your code? please. really need it.
Thank's
Posted by: Skualo at October 2, 2007 09:59 AMURL:
Sorry, but where is the source code?
Posted by: vale16381 at February 24, 2008 04:30 AMURL:
Hi,
Can someone help me in creating a PDF out of the Bitmapdata that i send from flash to php? Or if there is any 3 party component to directly output pdf from flash, that will solve my issue. i have heard about blazepdf, but that doesnt seem to be free anymore. i dont have the budget to pay for components. Please help. thanks in advance.
Posted by: yashin at February 25, 2008 04:45 AMURL:
i am working on a project similar to this i have done capturing images from camera but don't know how to save them on server please help me... i need it very urgent....
Posted by: Om Bissa at May 8, 2008 02:22 AMURL:
Where can I download the source code of this movie, Saving BitmapData to serve in this very good Flash 8
Posted by: abrahan at June 14, 2008 01:51 PMURL: