AS3でWebカメラの映像をJPEGで保存

4月 25th, 2008 admin Posted in Flash, 今日のコード |

Webカメラ楽しいー！とかって5年遅れぐらいですかね。

デモ

※白黒画像ですがカメラを許可して画面をクリックすると画像が保存されます。
動作サンプルはこちら

成果物

ステージをクリックするとWebカメラに表示されている内容が白黒でサーバ上に保存されます。
パーマリンクとかつけてあげると普通に便利なサイトが出来上がりそうです。
sample.jpg

コード

PLAIN TEXT
ACTIONSCRIPT:
  1. package
  2. {
  3.     import flash.display.Bitmap;
  4.     import flash.display.BitmapData;
  5.     import flash.display.Sprite;
  6.     import flash.events.Event;
  7.     import flash.events.EventDispatcher;
  8.     import flash.events.MouseEvent;
  9.     import flash.geom.Point;
  10.     import flash.geom.Rectangle;
  11.     import flash.media.Camera;
  12.     import flash.media.Video;
  13.     import flash.net.*;
  14.     import flash.text.TextField;
  15.     import flash.utils.ByteArray;
  16.    
  17.     import com.adobe.images.JPGEncoder;
  18.    
  19.     public class Main extends flash.display.Sprite
  20.     {
  21.         private var camera_width:int = 200;
  22.         private var camera_height:int = 150;
  23.         private var video:Video = new Video(camera_width, camera_height);
  24.         private var tfView:TextField;
  25.        
  26.         private var urlRequest:URLRequest;
  27.         private var urlLoader:URLLoader; 
  28.         private var fileReceiver:String = "http://www.jamboree.jp/tmp/cam2jpeg/receive.php";
  29.    
  30.         public function Main():void
  31.         {
  32.            
  33.             tfView = addTextField(220, 0, 200, 150);
  34.             tfView.appendText("start\n");
  35.             var camera:Camera = Camera.getCamera();
  36.             if (camera == null) {
  37.                 //error
  38.                 tfView.appendText("cant get camera!\n");
  39.                 return;
  40.             }
  41.             video.attachCamera(camera);
  42.             addChild(video);
  43.             video.x = 0;
  44.             video.y = 0;
  45.             stage.addEventListener(MouseEvent.CLICK, onClick);
  46.         }
  47.        
  48.         private function onClick(event:MouseEvent):void {
  49.             tfView.appendText("click!\n");
  50.             var s:BitmapData = new BitmapData(camera_width, camera_height)
  51.             s.draw(video);
  52.            
  53.             var d:BitmapData = new BitmapData(camera_width, camera_height)
  54.            
  55.             var r:Rectangle = new Rectangle(0, 0, camera_width, camera_height);
  56.             d.fillRect(r, 0xFFFFFFFF);
  57.            
  58.             d.threshold(s, r, new Point(0, 0), "<=", 90, 0xFF000000, 255, false);
  59.            
  60.             var img:Bitmap = new Bitmap(d);
  61.             addChild(img);
  62.             img.x = 0;
  63.             img.y =  160;
  64.            
  65.             //送信
  66.             var jpgEncoder:JPGEncoder = new JPGEncoder(80);
  67.             var byteArr:ByteArray = jpgEncoder.encode(d);
  68.             urlRequest = new URLRequest(fileReceiver);
  69.             urlLoader = new URLLoader();
  70.             urlRequest.contentType = "application/octet-stream";
  71.             urlRequest.method = URLRequestMethod.POST;
  72.             urlRequest.data = byteArr;
  73.             urlLoader.load(urlRequest);
  74.             urlLoader.addEventListener(Event.COMPLETE,onUpload); 
  75.         }
  76.        
  77.         private function onUpload(event:Event):void {
  78.             tfView.appendText("uploaded!\n");
  79.         }
  80.        
  81.         private function addTextField(x:Number, y:Number, w:Number, h:Number):TextField {
  82.             var textField:TextField;
  83.             textField = new TextField();
  84.             addChild(textField);
  85.             textField.x         = x;
  86.             textField.y         = y;
  87.             textField.width     = w;
  88.             textField.height    = h;
  89.             textField.text      ="";
  90.             textField.selectable=true;
  91.             textField.border    =true;
  92.            
  93.             return textField;
  94.         }
  95.     }
  96. }

receive.php

PLAIN TEXT
PHP:
  1. <?php
  2. $fileName = time()."-".round(rand(1,10000)).".jpg";
  3. $fp = fopen("data/".$fileName, 'wb');
  4. fwrite($fp, $GLOBALS['HTTP_RAW_POST_DATA']);
  5. fclose($fp);
  6. chmod("data/".$fileName,0777);
  7. ?>

解説

as3corelibのJPGEncoderクラスというのをBitmapからJpegへの変換に使用しているのでhttp://code.google.com/p/as3corelib/source/checkoutからチェックアウトして下図の様に配置しておいてください。
tree.gif

まとめ

勉強会とかもみんなWebCamでバシバシとったら面白いんじゃないかと思った。いまどきは動画もいけるんだけどやっぱ写真の面白さはまた別にありますよね。

参考サイト

Flashから画像ファイルを保存する - FICC LABS

One Response to “AS3でWebカメラの映像をJPEGで保存”

  1. niwadesign Says:
    4月 26th, 2008 at 4:37:52

    macで使えなかった...

Leave a Reply