アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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");



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

Flex2でWebカメラを使ってスナップショット撮影してみた

最近Flex2を勉強しています。
PHPと違って動きのあるものが作れるので作ってて楽しいですね。
Webカメラとの連携も簡単に出来たので、今回はカメラで撮影した静止画をpng形式で保存するサンプルを作ってみました。

画像はBitMap形式でしか取り出せないようですが、参考リンク先で見つけたPNGEncoder.asを使用してPNG形式に変更しています。
「撮影」ボタンを押した後に映像が一時停止してるかのように見えるのは、このBitMap画像をかぶせて表示してるだけです。処理はカッコ悪いですがそれなりによく見えます。

一番悩んだのは、生成した画像データをどうやってユーザーにダウンロードさせるかでした。
いろいろと調べてみると、同じことをやろうとしていた人たちもいたのですが、結局一度サーバーにアップロードするしかないという結論になってました。
メモリ内の画像ファイルをダウンロードさせるくらいならサーバーを介さずに出来てもよさそうだと思ったのですが、何か方法はないんでしょうかね

このサンプルでは、生成した画像をupload.phpに投げて一旦アップロードし、その直後にdownload.phpでユーザーにダウンロードさせるようにしてます。
このへんはグダグダなので何とかしたいです。



Webカメラが接続されているPCでしか動作しません。
最初にWebカメラを動作させる許可を求められるので、「許可」を選択してください。
カメラの映像が表示されたら、「撮影」を押した後に「保存」を押すと画像をダウンロードできます。
ダウンロードはポップアップで実行されるので、一時的にポップアップの許可をしてあげてくださいm(_ _)m


・upload.php


<?php
session_start();
session_regenerate_id();
$id = session_id();
$png = file_get_contents('php://input');
$fp = fopen('/tmp/' . $id, 'wb');
fwrite($fp, $png);
fclose($fp);


・download.php


<?php
session_start();
$id = session_id();
$file = file_get_contents('/tmp/' . $id); 

ob_end_clean();
header ("Content-Disposition: attachment; filename=" . 'capture.png');
header ("Content-Type: application/octet-stream");
echo $file;



Flexアプリケーションのソースコードはアプリケーションを右クリックして「ソースの表示」を選択して下さい。


ちなみにこのソースコードの表示機能、いろんなところで見かけたのですが、どうやるのか分からなかったので調べてみました。
正式名称かは分かりませんが、Publish Application Source機能とか言うらしいです。
Flex Builder2の場合、メニューの「プロジェクト」→「アプリケーションのソースをパブリッシュ」でソースを公開できるようになります。こりゃ便利。
みなさんもいいサンプルが出来たらソースコードをガンガン公開しちゃいましょう。

[参考リンク]
http://www.trick7.com/blog/2007/05/14-235503.php
http://www.fxug.net/modules/xhnewbb/viewtopic.php?viewmode=flat&topic_id=466&forum=1