デモ

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

成果物

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

コード

receive.php

解説

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

まとめ

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

参考サイト

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

成果物

しみやそばかすを自動で消してくれるフォトレタッチソフト（落書きっぽいのは後付です）

サンプルはこちら（画面をクリックで白黒画像がとれます）

コード

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.media.Camera;
	import flash.media.Video;
	import flash.text.TextField;

	public class Main extends flash.display.Sprite
	{
		private var camera_width:int = 200;
		private var camera_height:int = 150;
		private var video:Video = new Video(camera_width, camera_height);
		private var tfView:TextField;

		public function Main():void
		{

			tfView = addTextField(220, 0, 200, 150);
			tfView.appendText("start\n");
			var camera:Camera = Camera.getCamera();
			if (camera == null) {
				//error
				return;
			}
			video.attachCamera(camera);
			addChild(video);
			stage.addEventListener(MouseEvent.CLICK, onClick);
		}

		private function onClick(event:MouseEvent):void {
			tfView.appendText("click!\n");
			var s:BitmapData = new BitmapData(camera_width, camera_height)
			s.draw(video);

			var d:BitmapData = new BitmapData(camera_width, camera_height) 

			var r:Rectangle = new Rectangle(0, 0, camera_width, camera_height);
			d.fillRect(r, 0xFFFFFFFF);

			d.threshold(s, r, new Point(0, 0), "<=", 90, 0xFF000000, 255, false);

			var img:Bitmap = new Bitmap(d);
			addChild(img);
			img.x = 0;
			img.y =  160;
		}

		private function addTextField(x:Number, y:Number, w:Number, h:Number):TextField {
			var textField:TextField;
			textField = new TextField();
            addChild(textField);
            textField.x         = x;
            textField.y         = y;
            textField.width     = w;
            textField.height    = h;
            textField.text      ="";
            textField.selectable=true;
            textField.border    =true;

			return textField;
		}
	}
}

まとめ

BitmapDataにthresholdっていうすべてのピクセルを特定の条件で色を変えるっていうずばりそのもののコードがあったのでできた。そしてずばりそのもののコードが載っているサイトがあったのでできた。Webカメラから取り込んでいるというところだけがオリジナル。Webすごい

参考サイト

Flash Player 9/ActionScript3.0/Flex2の勉強日記

BitmapData - ActionScript 3.0 コンポーネントリファレンスガイド

trick7.com blog: BIT-101 : BitmapData Threshold Explorer

成果物

買ったし安くなかった割に読んでない本を自慢できるswf

画面をクリックする度にWebカメラの画像が取り込まれて下につながっていく。それだけ。

コード

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.media.Camera;
	import flash.media.Video;
	import flash.text.TextField;

	public class Main extends flash.display.Sprite
	{
		private var camera_width:int = 200;
		private var camera_height:int = 150;
		private var bitmap_y_offset:int = 160;
		private var video:Video = new Video(camera_width, camera_height);
		private var tfView:TextField;

		public function Main():void
		{

			tfView = addTextField(220, 0, 200, 150);
			tfView.appendText("start\n");
			var camera:Camera = Camera.getCamera();
			if (camera == null) {
				//error
				return;
			}
			video.attachCamera(camera);
			addChild(video);
			stage.addEventListener(MouseEvent.CLICK, onClick);
		}

		private function onClick(event:MouseEvent):void {
			tfView.appendText("click!\n");
			var bd:BitmapData = new BitmapData(camera_width, camera_height)
			bd.draw(video);
			var img:Bitmap = new Bitmap(bd);
			addChild(img);
			img.x = 0;
			img.y =  bitmap_y_offset;
			bitmap_y_offset += bitmap_y_offset;

		}

		private function addTextField(x:Number, y:Number, w:Number, h:Number):TextField {
			var textField:TextField;
			textField = new TextField();
            addChild(textField);
            textField.x         = x;
            textField.y         = y;
            textField.width     = w;
            textField.height    = h;
            textField.text      ="";
            textField.selectable=true;
            textField.border    =true;

			return textField;
		}
	}
}

まとめ

次はサーバにアップロードされるようにしたいと思う。そうすればサイトにアクセスしてWebカメラをポンとクリックしてスマートURLが発行されて友達に送れるっていう、お前なんかいてもいなくても同じなWebサービスの完成です。

疑問

videoのCLICKイベントを拾いたかったけど拾えなかった、どうやってやるんだろうか？

参考サイト

Flash Player 9/ActionScript3.0/Flex2の勉強日記
AS3でDisplayObjectをBitmapDataに変換してみたよ。 - Humming Via Kitchen

Waiting for Player to connect
Failed to connect; session timed out.
Ensure that:
1. you compiled your Flash movie with debugging on, and
2. you are running the Debugger version of the Flash Player.

とかって出るんですよ
どうもこういうこと↓らしいんです。

GMSBLOG � FlashDevelopのPlayerはIEのヤツ
http://gamusoba.com/blog/item_20070815.html#nucleus_cf

1時間ぐらいFlash CS3とかを入れたりとか出したりしながら悩んでいましたがあっさり解決。
FlashDevelopのデフォルト設定では、IEのFlashPlayerを使うようです。だからIEのやつを9以上のバージョンにしないといけなかったんですね。

もしくは
Tools＞Settings>Plugins>FlashViewer＞Mics＞ExternalPlayerPath
で変更できるので、IEのPlayerのバージョンをわざわざ上げたくない場合はどうぞ

Flash 8 入門講座：ITpro

あたりを読むことから始めましょう。かなり充実しています。（僕はやっと第24回までいきました）

参考資料

今回参考にしたのは下記のサイトです。

• テクササイズ第6回
  FlashMediaServer2を使ってみよう
• メディアアプリケーション 開発ガイド（PDF, 2.0M）

環境と準備

• Windows
• Window版FMSのダウンロードとインストール
• Flash8のインストール

サービスの確認

• Macromedia Flash Media Server 2
• Start Flash Media Admin Server and Flash Media Server

Windows の場合、サーバーが稼動していることを確認するため
に、タスクマネージャを開いて、FMSAdmin.exe と FMSMaster.exe の両方が [ プロセス ] タブに表
示されていることを確認します。

そんな確認方法しかないらしいです。

サーバの準備

アプリケーションのセット

C:¥Program files¥Macromedia¥Flash Media Server 2¥applicationsの中にアプリケーション名でディレクトリを作成します。

今回は「bbs」にしました。

インスタンスの作成

管理画面からインスタンスを作成します。「インスタンスを作成＝サーバを立てた」だと思います。

インスタンスを作成するときに名前を聞かれますが、今回は_defInst_で問題ありません。_defInst_はクライアントからインスタンス名が指定されなかった場合に接続される特別な名前だからです。

掲示板（チャット）の場合だとスレッド（トピック）ごとにインスタンスを作成するんだと思います。

サーバへの接続

アプリケーションは、RTMP (Real-Time Messaging Protocol) または RTMPS (Real-Time Messaging Protocol over SSL (Secure Socket Layer)) を使用して Flash Media Server に 接続できます。


my_nc = new NetConnection();
my_nc.connect("rtmp://localhost/bbs");

こんなコードを書いて実行してみると、サーバに接続できます。2行でいいなんてすごい。

BBSアプリケーションの作成

テクササイズ第6回
FlashMediaServer2を使ってみよう

ここのSharedObjectのスクリプトを参考に作ってみる。

my_nc = new NetConnection();
my_nc.connect("rtmp://localhost/bbs");
bbs();
function bbs(){
//sharedObjectを作る
//getRemoteメソッドの第一引数はSharedObjectの名前、第二引数はURL。URLはNetConnection.uriプロパティで取得できる。
so = SharedObject.getRemote("shared_text",my_nc.uri);
//SharedObjectが変更されたときの処理
//SharedObjectが変更されるとonSyncイベントが呼び出されるのでイベントハンドラメソッドを作る
so.onSync=function(){
trace("SharedObjectが変更されました");
comments.text=this.data.comments;//このスコープの中ではthisはsoを指す
}
//SharedObjectをサーバーに接続
so.connect(my_nc);
send.onRelease=function(){
so.data.comments += "\n" + myComment.text;
myComment.text = "";
}

テスト

なぜか最初にundefinedと表示されてしまうが、通信できるようになりました。
BBSを作る予定でしたがどちらかというとCHATですね。

connect()で指定しているアドレスをlocalhostから変更してやれば別のPCからでも接続できます。

サンプル

bbs.zip

Flash Media Server 2とは

オーディオとビデオをオンデマンド、またはリアルタイムで Flash クライアントに配信する、スケーラブルなストリーミングメディアサーバー

http://www.adobe.com/jp/products/flashmediaserver/

公式ドキュメント

Adobe - Flash Media Server 2 セットアップガイド

http://www.adobe.com/jp/products/flashmediaserver/guide/

• FMSインストールガイド
• FMSファーストステップガイド
• メディアアプリケーション開発ガイド
• FMSクライアントサイドASリファレンスガイド
• サーバサイドASリファレンスガイド
• FMS管理ガイド
• サーバ管理ASリファレンスガイド
• FMSエッジサーバユーザガイド

Adobe – Flash Media Serverデベロッパーセンター

http://www.adobe.com/jp/devnet/flashmediaserver/
大規模配信のレポート、オンラインゲームのチュートリアルなどFMSに関するドキュメント集

Flash Media Server

http://livedocs.adobe.com/fms/2/docs/wwhelp/wwhimpl/js/html/wwhelp.htm
FMSの公式ライブドキュメント

そのほか参考ドキュメント

heteml | WEBカメラからの映像配信マニュアル

http://heteml.jp/support/manual/webcam/
WEBカメラで動画をリアルタイム配信する方法。hetemlでのFMS設定から映像を配信するまでのチュートリアル。サンプルもDLできる。

言語ゲーム - Flash Media Server

http://d.hatena.ne.jp/propella/20070218/p1
FMSの概要が簡単にまとめられている。まったく知らない人向け

s.h.log: テクササイズ第6回：FMSでお絵かきチャット

http://web.sfc.keio.ac.jp/~shokai/archives/2006/12/fms-shared-paint.html
FMSのSharedObjectを使った、お絵かきチャットのサンプルがあります。

テクササイズ第6回FlashMediaServer2を使ってみよう

http://web.sfc.keio.ac.jp/~ussy/oklab/2006f/texe/?p=1
ビデオ録画、SharedObject、複数ディルプレイ連携のサンプルがあります。

Flash Communication Server MX チュートリアル - Flash

http://www.game3rd.com/flash/action/fcs.htm
チュートリアルムービー、チャットサンプル、Fireworksオンライン、ビデオメールなど充実
「おしえて!!」シリーズの著者。ActionScriptの講座もある。

工藤めぐみ：続 ブロードバンド時代のコミュニケーション術：RBB NAVi

http://www.rbbtoday.com/column/kudo/
寄せ書き、監視カメラ、ライブストリームのチュートリアル
皆既日食のライブ中継のレポートなど

ITmedia エンタープライズ：特集：Flashサーバテクノロジー――Flash Communication Server構築編 (1/8)

http://www.itmedia.co.jp/enterprise/articles/0502/15/news008.html
FCSのサーバ構築から、録画アプリケーションの作成まで

さらにその他

Open Source Flash - red5

http://osflash.org/red5
FMSのオープンソース実装。JAVA。

参考になりそうな書籍

続FLASH ActionScriptバイブル MXのツボ with Flash Communication Server MX

Programming Flash Communication Server

追記 2008-02-25 Flash Media Server3以降

Server-Side ActionScript Language Reference for Adobe Flash Media Interactive Server

Flash Media Server resources
adobe公式