2009年1月8日

FlexでWebカメラを使ってスナップショット撮影し、サーバーを経由せずにローカルに保存させてみた

こんばんは。まだまだ正月ボケが抜けてない松田です。

ちょうど一年ぐらい前に、「Flex2でWebカメラを使ってスナップショット撮影してみた」という記事をあげました。これは、Webカメラで撮影した画像をローカルに保存するというモノだったのですが、撮影した画像をローカルにダウンロードさせるには、一度サーバーにアップロードしてサーバースクリプトでダウンロードさせるしかない、という非常に使いづらいものでした。
あれから1年が過ぎ、サーバーを経由せずに保存する方法が出来ているようなので作ってみました。

以前のFlashPlayerでは、ローカルへのファイルの保存が許可されていなかったため、それ以上どうしようも無かったのですが、FlashPlayer10からはFlashからのローカルへのファイルの保存ができるようになったようです。
というわけで、今回は以前のスクリプトを改造して、スナップショット撮影から画像の保存までをFlashアプリ単体でやってみました。

まずはFlexBuilder側でFlashPlayer10に対応したアプリをつくるための設定が必要になるのですが、これは以下のサイトで詳しく解説されていましたのでこちらを参考にしました。
Flex Builder 3をFlash Player 10に対応させる at AS3S.ORG

そして完成品が↓です。ソースコードは画面内を右クリックして「ソースの表示」を選択して下さい。

Webカメラが接続されているPCでしか動作しません。
動くっちゃ動きますが真っ黒い画像がダウンロードされるだけです。

以前のスクリプトから修正したポイントは、保存ボタンが押されたときに呼び出されるclickSave()メソッドのみです。
以下のスクリプトでファイルをローカルに保存しています。


var ff:FileReference = new FileReference();
ff.addEventListener(Event.OPEN, function(e:Event):void {} );
ff.addEventListener(ProgressEvent.PROGRESS, function(e:ProgressEvent):void {} );
ff.addEventListener(Event.COMPLETE, function(e:Event):void {} );
ff.addEventListener(Event.CANCEL, function(e:Event):void {} );
ff.addEventListener(Event.SELECT, function(e:Event):void {} );
ff.addEventListener(IOErrorEvent.IO_ERROR, function(e:IOErrorEvent):void {} );
var date:Date = new Date();
// pngはByteArrayデータ
ff.save(png, "snapshot" + date.getTime() + ".png");