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

2009/01/08 │カテゴリ： Flex　スナップショット　カメラ　 Flash　 Tech　

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

松田惇│ コメント(5)│ トラックバック(0)

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

ちょうど一年ぐらい前に、「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");

Flashからローカルへのファイルの保存はいろんな場所で使えそうですね！

- すもも
- 2009年01月09日 18:47
- webｶﾒﾗないで実行すると
  ReferenceError: Error #1069: flash.net.FileReference にプロパティ save が見つからず、デフォルト値もありません。
  at CameraCapture/clickSave()
  at CameraCapture/__btnSave_click()
  がでるがエラー処理キボンヌ。
- 松田惇
- 2009年01月09日 19:02
- >すももさん
  ご連絡ありがとうございます。
  FileReferenceクラスにsave()機能が付いたのはFlashPlayerが10になってからなので、おそらくFlashPlayerのバージョンが古いのではないかと思われます。
  貼り付けてあるFlashはFlashPlayer10以上じゃないと動かないようになってますので、FlashPlayerのバージョンを最新にしてからもう一度試してみていただけないでしょうか。
  説明不足で申し訳ございません。
  
  ↓FlashPlayerのページです。
  http://www.adobe.com/jp/products/flashplayer/
- まちるだ
- 2010年02月26日 04:15
- こんにちわ。初書き込みで失礼します。
  
  まだまだ勉強中な者ですが、
  このツールをとても便利に思い、個人的に利用させて頂こうかと思います。
  PNGではなく、JPGで保存したくて単純に『PNG』を「JPG」に置換しました。
  
  var jpgEncoder:JPGEncoder = new JPGEncoder();
  
  の部分でエラーは出ますが、動かしてみるとPNGで保存ができました。
  JPEGで保存するにはどこを変更すれば良いでしょうか。
  ご教授頂ければ幸いで御座います。
  
  宜しくお願い致します。
- 松田惇
- 2010年02月26日 10:23
- コメントありがとうございます！
  jpg用のエンコーダーも用意されており、使用方法も全く同じなのですが、正式名称はJPGEncoderではなくJPEGEncoderになります。
  ですので、PNGEncoderの部分をすべてJPEGEncoderに置換すればそれだけで動作するかと思います。
  
  また、最後の行でダウンロードするファイル名を決めていますが、ここの拡張子も".png"から".jpg"に変更しておくと良いかと思います。
- まちるだ
- 2010年03月09日 03:27
- お早いお返事有難う御座います。
  ご指摘の通り、JPEGEncoderに変更したら正常に動きました!!!!
  やはりとても便利です☆☆
  
  カウントダウンなんてできたらもっと利便性が上がるかもですね＾＾
  そんな事ってFLEXでは可能なんでしょうか？？
  
  有難う御座いました♪