Flash

HOME
Flash
Flex勉強会第156回＠熊本＋RIA セミナーへ行ってきました

2011年10月31日 / 最終更新日時 : 2011年10月31日 Yoshida@DigiFie Flash

Flex勉強会第156回＠熊本＋RIA セミナーへ行ってきました

10月29日（土曜日）に熊本市で開催されたFxUGのRIAセミナーへ参加させていただきました。

セミナーの内容は、廣畑さんによる「Adobe MAX 2011」の報告、舩倉さんによる「RIA開発におけるサービス開発のイロハ」、成田さんによる「Flex/AIRを利用したRIA開発について」、有川さんによる「Flash Player 11/AIR 3の新機能の可能性」と盛りだくさんの内容で、有川さんによるFlexモバイルアプリケーションのライブコーディングも行われました。

このセミナーに参加して、FlashPlayer11やAIR3.0での開発に関してのモヤモヤしていたものが多少スッキリした気がするので、有意義なセミナーとなりました。

そんなセミナーの中、LTで少しばかり僕もしゃべらせていただきましたので、その内容をちょっと紹介させていただきます。

僕がお話しさせていただいた内容は「RTMFPを使ったiPhone/AndroidとFlashの連携について」でした。
このブログでも数回紹介している内容ですが、その内容を少し整理して、10分程度で発表できる内容にしてみましたので、発表資料をここに転載しておきます。

—————————————————————————-

RTMFPを使ったiPhone/AndroidとFlashの連携について

—

RTMFPって何？

ウィキペディア（http://ja.wikipedia.org/wiki/Real_Time_Media_Flow_Protocol）によると…

Real Time Media Flow Protocol (RTMFP) は Adobe が開発しているプロトコル。
RTMFP は低レイテンシの UDP ストリーミングや複数の Adobe Flash プレーヤー間の P2P 通信を可能にし、リッチなライブのリアルタイムコミュニケーションを可能にする。Flash Player 10.0 から利用可能。サーバー側は Adobe Flash Media Server が対応。

従来はFMS（RTMP）を介しなければできなかった端末間のリアルタイムコミュニケーションがP2Pでもできる。
Flash Player 10.1からはアプリケーションレベルでマルチキャストができ、サーバレスでも通信できる。

—

で、UDPって？

RTMFP は User Datagram Protocol (UDP) を利用するのに対して、RTMP は Transmission Control Protocol (TCP) を利用する。
ライブストリーミングメディアを配信する際、レイテンシやオーバーヘッドを減らしたり、信頼性を犠牲にしてもパケット損失により大きな耐性があるなど、
UDP を利用するプロトコルはTCP を利用するプロトコルに比べていくつかの利点がある。

通信プロトコルにTCPを使用しているRTMPよりもUDPを使用しているRTMFPはパケットの信頼性は低いけど速い。

—

とりあえず簡単なデモを紹介

デモ1：スマートフォンのカメラで撮影した画像をパソコンへ転送して表示
wonderflに投稿しているサンプル

デモ2：スマートフォンでパソコン上のFlashコンテンツを動かしてみる
デモンストレーションの動画

デモ3：H.264SoftwereEncord + RTMFP + StageVideo
この内容について以前ブログで書いた記事

—

RTMFPを使うための接続手順

引数に “rtmfp:” を渡してNetConnectionを接続します。

private var _nc:NetConnection;

_nc = new NetConnection();
_nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
_nc.connect("rtmfp:");

次にNetGroupのインスタンスを作り同じ名前のグループに入ります。

private var _ng:NetGroup;
private var _gs:GroupSpecifier;

_gs = new GroupSpecifier("テキトーなグループ名");
_gs.postingEnabled = true;
_gs.ipMulticastMemberUpdatesEnabled = true;
_gs.multicastEnabled = true;
_gs.addIPMulticastAddress("225.225.0.1:30303");
_ng = new NetGroup(_nc, _gs.groupspecWithAuthorizations());
_ng.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);

そして、同じグループの仲間を見つけると…

NetStatusEvent.info.code から “NetGroup.Neighbor.Connect” が出力されます。

送信は、送信用のオブジェクトを作り、その中に送りたい値を入れて…

var message:Object = new Object();
message.text = str;
message.sender = _ng.convertPeerIDToGroupAddress(_nc.nearID);
_ng.post(message);

こんな感じで送ります。
ただ…
UDPを使っているため無事送信できたかのチェックはできない？

—

受信は…

NetStatusEvent.info.code から “NetGroup.Posting.Notify” が出力され、NetStatusEvent.info.code.info.message（上記で送信が行われた場合）としてオブジェクト形式でデータが送信されてくるので、受信してこのデータを使ってもじゃもじゃします。

と、比較的簡単な手順で使うことができるので便利です。

—

じゃぁさっきのデモではRTMFPをどう使っているの？

デモ1のスマートフォンのカメラで撮影した画像をパソコンへ転送して表示では…

iPhone側のアプリ（AIR for iOSで作成）では、カメラで撮影した画像を BitmapData.getVector(Rectangle); で各ピクセルのARGBの値をベクター配列に突っ込んで送信します。
また、撮影した画像（BitmapData）の大きさを受け側のアプリケーションに知らせるため先ほど引数に付けた Rectangle の値も同時に送信しています。

受信側のFlashでは、BitmapData.setVector(さっき送ったRectangle, さっき送ったVector.); で画像として復元しています。

デモ2のスマートフォンでパソコン上のFlashコンテンツを動かしてみるでは…

iPhone側のアプリ（AIR for iOSで作成）では、iPhoneの加速度センサから取得した座標情報（x, y）を送信しています。
受信側のFlashでは、送られてきた座標情報をもとに画面上にグラフィックを描画しています。

RTMFPとNetGroupを使用すると、1台のiPhoneから複数台のパソコン上のFlashコンテンツを操作することもできます。

デモ3の H.264SoftwereEncord + RTMFP + StageVideo では…

RTMFPで端末間を接続し、双方向でビデオストリームを送受信しています。
また、ビデオストリームのコーデックにはH.264、ビデオを表示するビデオコンテナにはFlashPlayer10.2から使用できるようになったStageVideoを使用しています。

今回紹介させていただいたのは至極シンプルなデモでしたが、スマートフォンのアプリをデバイスネイティブのプログラムではなく、AIRで作成すると何の苦労もなくFlashと連携できるので、AIRで開発すれば、Flashに慣れている人は比較的簡単にマルチデバイスのアプリケーション（システム？）が構築できるのではないでしょうか。

カテゴリー: Flash