サンプルのVideoPhoneをセットアップ

セットアップ手順は３つです

①Adobe Labsから開発用キーをもらう

②Adobe LabsからサンプルコードをダウンロードしてSWFにコンパイルする

~~③FlashPlayerを10.3にする~~10.3でなくてもいいみたい、10.1 or laterという感じ、でも最新バージョンにしておかないと攻撃されちゃいますが。

Adobe Labsはここ

Signup for a Cirrus beta developer keyをクリックして、専用サイトでキーを取得します。

VideoPhoneのサンプルはここ

ページの一番下にある、Download Video Phone Application source code をクリックしてダウンロードします。

コンパイルするには、Flash Builder 4を使えとか書いてますが、無償版をインストールするにしても相当なボリュームをとります。それに30日間しか使えないし...。

で、ここではフリーな環境を使うことにします。

Red5のページ でご紹介した、FlashDevelopとFlex SDKをつかった環境です。

Red5のところでは、Flex3を使いましたが、ここではFlex4を使います。

FlashDevelopのページにはインストール方法も親切に書かれているので、そちらを参照。

Flex4のほうは、ダウンロードしたら、解凍して適当なところに移してください。例えば、C:\flex_sdk_4みたいな感じです。

FlashDevelopを起動したら、新しいプロジェクトを作ります。

メニュのProject--＞New Projectで、Flex 4 Projectを選びます。

Nameは、VideoPhoneLabsにしておきます。

こんな感じ。

VideoPhoneLabsのフォルダーに４つのフォルダーが作成されます。

ここの、srcフォルダーに、ダウンロードしたVideoPhoneのサンプルファイルをコピーします。先に作成されていたMain.mxmlは削除しておきます。

FlashDevelopの右のパネルでVideoPhoneLabs.mxmlを右クリックして、Always Compileを選びます。

メニュのTools--＞Program Settings--＞AS3Contextを選んで、LanguageのFlex SDK Locationを設定しておきます。

メニュのTools--＞Program Settings--＞FlashViewerを選んで、MovieDisplay StyleをPopupに設定します。

メニュのProject--＞Propertiesを選んで、TargetをFlashPlayer10.1にしておきます。

コンパイルを実行する前に、４点修正しておきます。

まず、ソースを３点修正。

VideoPhoneLabs.mxml

１：Private const DeveloperKey:String に上で取得したキーを入れます。

２：Private const WeｂServerUrl:String に、あなたのサイトのURLを入れます。
    ここで注意する点は、このURLは、reg.cgiを示すURLをフルパスで入れるということ。
    reg.cgiはpeer IDを交換するためのcgiです。交換用のDB作成については、また後ほど。
   例:http://www.sample.com/cgi-bin/reg.cgi

３：ここがやっかいなのですが、726行目あたりに、

return Microphone.getEnhancedMicrophone(micIndex);

というコードがあります。これがエラーになるのですが、現在、意味不明です(TT;

（エコーキャンセルできるマイクロフォンを使うかどうかということのようですが....なんのこっちゃ？
情報をあさってみたところ、 10.3用のplayerglobal.swcを使えとのことですが、そんなもんどこにあんの？
まだ、ようわからん。 )

意味不明なのですが、このままではコンパイラーを通らないので、次のように書き換えます。

//return Microphone.getEnhancedMicrophone(micIndex);
return Microphone.getMicrophone(micIndex);

４：４点目は、flash_sdk_4を修正します。

flex_sdk_4/frameworks/libs/playerの中を確認。

コンパイル中にFlexはplayerglobals.swcというファイルを見にいきますが、TargetをFlashPlayer10.1にしたので、10.1のフォルダーを見にいきます。これが無い場合はエラーになります。

~~無いものはしょうがないんで、10.1のフォルダーが無い場合は、10.2をコピーして10.1に書き直してください。~~ 10.1用のplayerglobals.swcはLabsにありました。ここからダウンロードしてください。で、10.1というフォルダーを作ってそこにコピー。

以上、修正後、メニュのProject--＞Test Movieを選んでコンパイルテストをしてみてください。

コンパイルテストが通ったらOKなので、本体を作成。

メニュのProject--＞Build Projectを選んで、コンパイルしてSWFファイル本体を作成します。SWFファイルは、binフォルダーに生成されます。

Playerを10.3にアップグレードしてSWFファイルを試してみてください。（10.3でなくてもいいかも）

運用の場合は、あなたのWebサイトに例えばcirrusというフォルダーを作ってbinフォルダーの中のファイルをまるごとコピー。

実行画面はこんな感じ。ボタンとかをローカライズしてみました。

Labsのサンプルページ で試してみました。
２人での使い方は
まずユーザーネームを適当（Adobeはユニークにするためにメールアドレスを使え、とかいってます）に入れて、peerIDを発行してもらう。
相方も同じ。
で接続したら、どちらかが相方のユーザーネームでコールする。
そうすると、相方のほうで、受け入れるか拒否するかのボタンが出てくる。
相方が受け入れれば、めでたく相互接続が完了する....という次第。
なるほど、です。
ちなみに、送信（SEND)は相互接続が完了しないと機能しません。
送信（SEND)というのは、テキストチャットのことです。

統計(STATISTIC)ボタンをクリックすると通信状況を確認できます。
送受信のオーディオ・レート、ビデオ・レート。
ラウンドトリップタイムなど。

新規に作成したもので試して見ます。

相互にユーザーネームをいれて接続(CONNECT）します。

reg.cgiが機能して、ネームに対応してpeerIDが作られます。

右の人が、左の人に接続要求(CALL)してみます。

こんな感じ。

左の人の画面に要求を受けるか拒否するかのボタンが出ます。

こんな感じ。

要求を受ける（ACCEPT)をクリックすると接続が完了します。

こんな感じ。

接続時の状態はこんな風です。

Connecting to rtmfp://p2p.rtmfp.net/
NetConnection event: NetConnection.Connect.Success
Connected, my ID: cc3c2fb8872d791073ed5dc45852c4c786863105b8429e2fd162be6fa92e2ad6
ID event: registerSuccess
Request: invite from: c093ef4771804e2332203d9890fe4dbf99d8332626d8352c62a2a57229076d85 (wisteriahill)
Incoming stream event: NetStream.Play.Reset
Incoming stream event: NetStream.Play.Start
NetConnection event: NetStream.Connect.Success
Connection

cc3....とかc093...とかが、peerID。接続のたびに新しく発行されます。

サンプルサイトを近々にリリースしますが、要件として、UDPポートがオープンされている必要があります。ファイヤーウォールで遮断されている場合は、接続できません。
NAT超えの方法もあるようなので、それも含めてアナウンスします（proxyを使えばできる...とか）。

ユーザー管理もまた別途ということで.....。
Readme.txtを読めばわりと簡単にできます。

管理用のCGiソースを見ると、データベースは、SQLite3を使っているようです。CGiはPython。
最近のPythonはsqlite3をサポートしているので、らくちんです。

続く

TOP

RTMFP Groups

グループで使おうという場合の、RTMFP Groupsについて、若干。

Web（TV）会議や（グループ）ビデオチャット、eラーニングといった使い方を想定している感じ。

サンプルコードは、このページからダウンロード(p2p_rtmfp_groups.zip)。

RTMFP Groupsのページでは、Flash Builder を使えとか書いてますが、ここでもFlashDevelopとFlex4で行きます。

解凍したフォルダーの中に、Devnet_P2P_FP10_dot_1_rev2.fxpというファイルがあります。これは、Adobe的なZIPファイルです。

GoogleのMapsやEarthで使われているKMZみたいなもんかな（？）。

ということで、fxp拡張子をzipにして、解凍します。

解凍フォルダーの中に、srcとlibsというフォルダーがあります。libsの中にあるのは、10.1用のplayerglobals.swcです。この取り扱いについては上で書いたとおりです。

srcフォルダーの中にあるDevnet_P2P_FP10_dot_1.mxmlとcomフォルダーを使います。

基本的なセットアップは上のVideoPhoneLabsでやったことと同じです。新しいプロジェクトのsrcフォルダーに、Devnet_P2P_FP10_dot_1.mxmlとcomフォルダーをそのままコピー。

２点修正があります。

１：Devnet_P2P_FP10_dot_1.mxmlで、mxのライブラリを読むのにhaloを使っていますが、Flex4ではmxです。書き直してください。

２：private const DEVKEY:Stringに開発用キーを書き入れます。

これでコンパイルできるはず。

使い方は...まだよく分かっていません。

というか、Devnet_P2P_FP10_dot_1.mxmlは、かなり試験的色合いの濃いソースで、これ自体で何かが完結しているわけではないようです。

group名も、com.realeyes.rtmfpdemos.RealEyes_Devnet_P2PIntroとなっていますが、実は何でもいいです。ソースを見ると、起動時に何かが入ってないといけないという程度の理由で、こうなっています。はなから、connectedボタンがenabled=falseになっているわけです。ボタンにする必要もないはずなんですけど....。

まあ、Cirrus2でこういうことができますよ、ということをソースをいじりながら実感してください、ということですかね。

オリジナルソースの画面はこんな感じです。

ソースをいじって、２者間のチャット風にしてみました、こんな感じです。

三者会談の場合は、こんな感じ。

少々、レイアウト変更。これだと、参加人数を任意に増やせます。

試した環境

Flashのバージョンは、10.3.181.26

①Win2K(SP4)、1.2GHz,500MB,Video4MB
②WinXP(SP3)、2.8GHｚ,1.5GB,Video128MB
③WinXP(SP3)、3.0GHｚ,1GB,Video8MB

この３台でやってみました。②、③は問題なかったけど、①はとにかくきつかったです。
受けるほうはなんとかなっても、送る方はまともにストリームできませんでした。
P2Pは、端末性能が重要だと実感。

いろいろ試した結果、端末の問題じゃありませんでした。なんだろう？

時々、遅延が発生しますが、これはカメラの問題（なんせ、日本橋のえたいのしれないショップで、４８０円也で買ったしろものだし）。

もう少し調べてみます。

チャットの場合の注意

●テキストチャットなんかでよくある、自分の発言も表示するような、エコーバックがありません。
●同じ発言は発信されません。

あるいは、同じビデオを見ながら、２人でチャットしている....の図
参加者がいない場合は、カラーバーになってます。

VideoPhoneLabsのサンプルと違って、ここではユーザー管理という考え方はなく、グループIDのみで動いている感じです。

ってことは、VideoPhoneLabsの場合は、だれか１人はWebサーバーを動かしてユーザー管理する必要があったけど、これには必要ないってこと？

ソースを見ると、アクセスしているのはAdobeのサーバーだけのようですし。

~~ホンマかいな？~~ ホンマでした(^^)。

で..ん、基本グループIDだけでいいですけど、グループ内で個別を判定するロジックが必要な場合は、実装が必要(3人以上の場合)。

可能だけど、ちょっと複雑になります。三者会談の場合がそうでした。そういう関数はないのかな？

余談ですが、Object Replicationという機能を使えば、画像や文字といったオブジェクトを共有というかコピーできます。

こんな感じ

お絵かきをレプリケートするとこんな感じ（フリーハンドバージョン）
（縦横比は同じにする必要があります）
レプリケートですが、データを随時ポストしているので、オブジェクト共有ってな雰囲気です。

こんな使い方もできますです。簡易な共有ホワイトボード（幾何図形と文字バージョン）
フリーハンドバージョンは、あほみたいな量のデータがポストされますが、こっちは軽量です。

ここでは、画像を扱っていますが、次回はObject Replicationでエクセルの表やグラフをやってみます。
DataGridを使うってことになりますわな。

続く

TOP

サンプル1

~~サンプルの使用に際して、グループ名のバッティングを避けるため、認証APIを使用します。~~

Adobe Cirrus ビデオチャット(ペア)

ご説明
(これだけ、日本語化してます。レイアウトも若干変更)

３人でチャット

 ４人でチャット

 ５人でチャット

使い方は、どれも共通

右側の黒い領域に、ストリーミングが反映されます。

①はテキストチャット表示領域

②は制御領域

１：アクセスする前に、webカメラを接続しておいてください。

接続手順

２：Aにグループ名を入れて、接続をクリック。

３：後は、順次、「グループに参加」、「ストリーム送信」、「ストリーム受信」のボタンをクリック。

途中で、確認用のダイアログが開きますが、「許可」をクリックすればいいです。

４：同じグループの誰かがストリーム送信していれば、空いたチャンネルにストリームが接続されます。

５：誰かがブラウザーを閉じれば、IDが消えて、数秒後にストリームの表示領域がブラックアウトします。

テキストチャットの場合

Cにニックネーム、Bにメッセージを入れます。

チャットボタンの横にあるのは、メッセージを色分けする場合に使います。

ニックネームとメッセージを入れて、「チャット」をクリックすれば、自分以外の人にメッセージが送信されます。

TOP

サンプル2

お絵かき（フリーハンド2）

お絵かき（ホワイトボード）

初期画面

①   まず、CONNECTをクリックして、ネットワークに入ってください。

     グループ名は、なるべくユニークになるようにしてください。

     サーバーサイドではグループ名の管理はしていません。

②   ラジオボタンをクリックして、描画のタイプを選んでください。

④   お絵かきの背景画を指定できます。600ｘ400のjpgをお使いください。

③   文字入力の場合

     ラジオボタンをクリックして、フィールドに入力文字をいれておきます。

     次に「A」ボタンをクリックすると、画面の左上に表示されます。

     画面上でクリックすれば、文字はそこへ移動します。

     文字の色や大きさは、線の色・線の幅で指定できます。

TOP

カスタム検索

Cirrusを使ってみる

サンプルのVideoPhoneをセットアップ

RTMFP Groups

サンプル1

サンプル2