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 (320×240) 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 320×240 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 160×120 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]]
plzzzz let us see u r code !!!
Another save/generate bitmap experiment
http://double-quotes.com/smartchart/smartchart.htm
It is amazing, it would be great if you could share the code.
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 😀
Bye!
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 500×425 pixels which results in about 11x the amount of data of a 160×120 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 320×240 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?
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 320×240 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,
Grant.
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
Mario
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 1600×1200 and above (see the url) i can say that the speed of compressing and creating the palette is no problem at all.
http://doodle.indev.no — thats my attempt.. I’m keeping all 24bits of color, though, as the transparency often create mad gradients.
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
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!
Sander
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 ^^
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^^
Esto es diseño y programación los felicito desde aca..!
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
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.
Hi Marko Ritter and any one else who may know
How were you able to create images over 1600×1200 and above using the BitmapExporter?
I keep getting Error(undefined)
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.
Hola me parece estupendo esta programacion, necesito lograr hacer algo muy parecido y no se por donde empezar ayudenme
ok, it’s perfect, but, cand you send me your code? please. really need it.
Thank’s
Sorry, but where is the source code?
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.
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….
Where can I download the source code of this movie, Saving BitmapData to serve in this very good Flash 8
is it possible to download the sourcecode? mail mee..