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
