0

I've been doing some digging and haven't been able to figure out an answer to my question. I'm not a Flash developer, so please excuse any misinformations I might include.

Essentially, I would like to export a frame of an OSMF VideoElement to an HTML5 <canvas> element. After doing some digging, it looks like it's possible to capture the current frame with the BitmapData object.

Alternatively, can one expose the raw BitmapData via Flash-JS bridge interface? That might be enough for me, albeit slow. Any help is appreciated!

Kelly Sutton
  • 591
  • 5
  • 12
  • Not a complete answer...but you can use Actionscript FileReference class to save the BitmapData: var fileReference:FileReference = new FileReference(); fileReference.save(videoSnapshot.data, "your-filename.jpg"); – redconservatory Jan 04 '11 at 17:23
  • Ah, not exactly what I was looking for, but interesting nonetheless! – Kelly Sutton Jan 04 '11 at 17:33

2 Answers2

0

You can set the src attribute of an HTML image to a base64 encoded image string: http://en.wikipedia.org/wiki/Data_URI_scheme (assuming you don't care about old IEs, which you don't care since you need HTML5 features).

You can use JavaScript for drawing the image data into your canvas afterwards.

Hope this helps, Andrian

Andrian
  • 71
  • 4
  • Yep! I know you can do this and that's how I'll be writing data to the canvas element once I have the data out of the Flash object. Getting it out of the SWF is the issue though... – Kelly Sutton Jan 04 '11 at 22:06
  • You can simply send the base64 string using ExternalInterface: http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/external/ExternalInterface.html – Andrian Jan 04 '11 at 22:10
  • Btw, take a look at the source code of the JavaScriptBridge class in Strobe Media Playback, a BSD licensed OSMF based video player: https://sourceforge.net/adobe/smp – Andrian Jan 04 '11 at 22:12
  • And you'll also need an image encoder. You can try using as3corelib for this: https://github.com/mikechambers/as3corelib/wiki – Andrian Jan 04 '11 at 22:17
0

You can send bitmaps between Flash and Javascript (and thus canvas) without problems and pretty fast via ExternalInterface. I am using an optimized technique in this example in order to run PixelBender Filters on images in an html page: http://www.quasimondo.com/archives/000695.php

The as and js sourcecodes for this can be found here: http://code.google.com/p/quasimondolibs/source/browse/#svn%2Ftrunk%2FPixelBenderForCanvas

In your case you would just need the .as part that encodes the bytes of the bitmapdata in a more efficient way than base64 and sends it from Flash to JS and the .js part that receives the data and writes it into a canvas.

Quasimondo
  • 2,485
  • 1
  • 22
  • 30