14. Red5 Application 開発が必要
Red5 API MBean
Spring
Framework Tomcat
(DIコンテナ) RMI
JMX
停止
:9999
Apache Mina
<RTMP> :1935
Client 開発が必要
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 14
15. 商用ソフトウェゕ
Adobe Flash Action Script
オープンソース・無償
Adobe Flex MXML+ Action Script
Open Laszlo オープンソース・無償
LZX + Java Script
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 15
16. デザナーとのワークフロー連携が容易に
Adobe Adobe
Photoshop Flash
Adobe
Flash Player
Adobe
Illustrator Adobe
Adobe
Flash Catalyst
Flash Builder
Adobe
AIR
Adobe
Adobe Flex
Fireworks
Adobe製品を購入する
必要ゕリですが。。
デザナー エンジニゕ
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 16
17. クロスプラットフォーム対応
Adobe Web
Flash Player Browser
Windows
Mac OS
Linux
Adobe
AIR
AIR for Android Android
Packager for
iPhone
iPhone
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 17
18. Adobeサト『Flashの真実』
⇨ http://www.adobe.com/jp/choice/flash.html
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 18
19. #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 19
20. 簡易電子会議室システムの作り方を通じて
Red5の機能を紹介します。
ユーザー
ユーザー
簡易電子会議室システム
ユーザー
ユーザー
ユーザー
ユーザー
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 20
21. 今回開発するシステムは3画面で構成される
シンプルな電子会議室システムです。
ログン画面 部屋選択画面 会議室画面
コンセプトは “宇宙”・・・
デモサト⇒ http://live.red5.gr.jp/osc2011-spring/
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 21
22. 名前を入力して
ログンします
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 22
23. 部屋を選択し
て入室します。
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 23
24. 会議室に入室してい
るメンバーの映像が
表示されます。
自分の映像配信
のON/OFFを切
り替えます。 部屋選択画面
に戻ります。
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 24
25. iDC
<3G> <ADSL>
<e-mobile>
Internet
<Wi-Fi>
インターネット接続と
<FTTH>
Flash/AIR環境のみ
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 25
26. DEMO
デモサト⇒ http://live.red5.gr.jp/osc2011-spring/
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 26
27. クラゕント開発+サーバサド開発が必要
クラゕント開発 サーバーサド開発
Adobe Flex Red5
Adobe Flash Builder Java
EclipseベースのIDE
Adobe Photoshop Eclipse IDE
デザナーさんが使用
Adobe Flash Catalyst
PSDからMXMLに変換
青点線は作業効率化のため使用
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 27
28. red5-1.0.0-RC1 コンテキストパス: /conference
• クラゕントが接続するURIが決まる
conf Webハンドラ: jp.co.s_arcana.red5.MyApplication
• クラゕントが接続した時に呼び出されるクラス
webapps
conference 設定フゔル
WEB-INF web.xml
red5-web.xml
classes
jp.co.s_arcana.red5
デゖレクトリ構成は
Servletとほぼ同じ! MyApplication.class
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 28
29. まず、ログン画面を例にして
Red5へ接続するプログラムを簡単に説明します
ログン画面 部屋選択画面
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 29
30. ユーザー
クラゕント側(ActionScript)
var nc: NetConnection = new NetConnection();
nc.connect( “rtmp://red5server/conference” );
NetConnection#connect()でFlashPlayerからRed5へ接続
プロトコルや接続先ゕプリケーションはURIで決まる
RTMPはステートフルなので接続は永続的(繋ぎっぱ)
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 30
31. ユーザー
サーバ側(Java)
package jp.co.s_arcana.red5;
public class MyApplication extends ApplicationAdapter {
public boolean connect ( IConnection, IScope, Object[] ) {
hogehoge();
}
接続されるとMyApplication#connect()が呼び出される
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 31
32. 開発アプリケーション
jp.co.s_arcana.red5 org.red5.server.adapter
MyApplication ApplicationAdapter
+connect()
+disconnect()
+join()
+leave()
+start() Red5に用意されているAPIの
ApplicationAdapter クラスを継承
+stop()
することで、ゕプリケーションの
: エントリポントとなる仕組み。
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 32
34. 次に、ログン画面で入力した名前を
Red5に送信するプログラムを簡単に説明します
ログン画面 部屋選択画面
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 34
35. ユーザー
クラゕント側(ActionScript)
nc.call( “setMyName” ,
new Responder( function(result:Object) {
fugafuga(result); } ),
“my_name” );
NetConnection#call()でRed5側のメソッドを呼び出せる
第2引数のResponderでサーバからの戻り値を処理
第3引数で名前文字列を引数として渡す
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 35
36. ユーザー
サーバ側(Java)
public class Application extends ApplicationAdapter {
public boolean setMyName (String name) {
fugafuga(name);
return true;
}
NetConnection#call()で指定されたメソッドが実行される
引数には、入力した名前が渡される
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 36
37. 次に、部屋選択画面を例にして
部屋に入室する際のプログラムを簡単に説明します
部屋選択画面 会議室画面
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 37
38. 各部屋には名前を付けています
room01
room02
room03
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 38
39. ユーザー
room01
クラゕント側(ActionScript)
var nc: NetConnection = new NetConnection();
nc.connect( “rtmp://host/conference/room01” );
入室対象部屋はURIにより指定する仕組みにしている
Red5ではURIにより”スコープ”(≒部屋)が自動生成
この例では「room01」の部屋に入室
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 39
40. Red5内では ”部屋” の単位をスコープと呼ぶ。
接続URIに従ってRed5内部で自動的に生成。
ユーザー URI
room01
rtmp:// host / conference / room01
default conference room01
Global Web Scope
Scope Scope
※ 斜体赤字 はスコープ名
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 40
41. GlobalScopeはRed5サーバに必ず1つ存在
Global
Scope Red5スコープ階層構造の一番上位のスコープ
通常このスコープを使うことはない
WebScopeはゕプリケーションごとに1つ存在する
Web
Scope このスコープに接続するとappConnect()が呼び出される
Applicationスコープとも呼称される
Scopeはゕプリケーションごとに複数存在できる
Scope このスコープに接続するとroomConnnect()が呼び出される
Roomスコープとも呼称される
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 41
42. クライアントは、各スコープにぶら下がる
ユーザー rtmp:// host / conference / room01
room01
conference room01
Web Scope
Scope
Global
Scope Client
default
Client Client Client
Client
※ 斜体赤字 はスコープ名
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 42
43. スコープは接続URIの / 区切りで階層構造となる
URI
rtmp:// host / live / r1 / r2 / r3 / r4 / r5
r1 r3 r5
Scope Scope Scope
Global
親 親 親 親 親
Scope 親
Web
default Scope Scope Scope
live r2 r4
※ 斜体赤字 はスコープ名
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 43
44. 最後に、会議室画面でウェブカメラの
映像を流すプログラムを簡単に説明します
会議室画面
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 44
45. ユーザー
クラゕント側(ActionScript)
var nc: NetConnection = new NetConnection();
nc.connect( “rtmp://host/conference/room01” );
var ns: NetStream = new NetStream( nc );
ns.publish( “uniqId” , “live” );
NetStream#publish()で映像を配信する
第1引数で一意の名前を指定、第2引数“live”でラブ配信
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 45
46. ユーザー
サーバ側(Java)
package jp.co.s_arcana.red5;
public class MyApplication extends ApplicationAdapter {
public boolean streamPublishStart (IBroadcastStream) {
fugafuga();
}
映像が流されるとMyApplication#streamPublishStart()が呼び出される
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 46
47. ApplicationAdapter クラス
streamPublishStart () メソッド
クラゕントから映像がpublishされたときに呼ばれる
リゕルタムに映像を加工することも可能
Xugglerというラブラリが公開されている
streamBroadcastClose() メソッド
クラゕントから映像がcloseされたときに呼ばれる
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 47
48. ユーザー
クラゕント側(ActionScript)
var nc: NetConnection = new NetConnection();
nc.connect( “rtmp://host/conference/room01” );
var ns: NetStream = new NetStream( nc );
ns.play( “uniqId” );
NetStream#play()でストリーミングを受信する
第1引数でpublishされている一意の名前を指定
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 48
49. 映像
On/Off room01
room01 Client
Client Scope
Client
Broadcast
play() Client
streamA Scope
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 49
50. 映像配信もRed5では”スコープ”として扱われる
room01
rtmp:// host / conference / room01
ユーザー
NetStream#publish( “uniqId” , “live” );
uniqId
Broadcast
Scope
Client
Global Web
Scope
Scope Scope
default conference room01
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 50
51. NetStreamが使用されると生成される
Broadcast
Scope 同じ名前でも親スコープが異なれば別オブジェクト
r1 so3 stream1
SharedObject Broadcast
Scope Scope Scope
stream2
so2 r2 Broadcast
Web SharedObject Scope Scope
Scope Scope
live SharedObject
SharedObject Broadcast
Scope Scope
Scope so3 stream3
so1
SharedObject
SharedObjectが使用されると生成される
Scope 同じ名前でも親スコープが異なれば別オブジェクト
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 51
52. #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 52
53. Red5はクラスタリング機能もサポート
プロトコル:MRTMP(Multiplex RTMP)
<RTMP>
<MRTMP>
<RTMP>
<RTMP> <RTMP>
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 53
54. JavaなのでTwitter4Jも使えます
クライアント サーバ
<RTMP>
<Native>
<HTTP>
Streaming API
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 54
55. DEMO
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 55
56. JMX経由で内部の状態を確認することも可
ゕクテゖブ
接続数
トータル
接続数
接続中
転送 スコープ
データ量 などなど・・
デバッグに便利!
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 56
57. JavaなOSSなのでEclipseからのデバッグも容易
スタック
トレース
ブレーク
ポント
変数の調査
変数値の
書き換え 不具合調査に
便利!
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 57
58. #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 58
59. 日本Red5ユーザ会
⇨ 2010年4月に発足
⇨ 今はRed5の普及活動がメン
⇨ 日本語のコンテンツを充実
させていく予定(協力者募集中!)
日本Red5ユーザ会URL
⇨ http://www.red5.gr.jp/
⇨ ※ http://www.red5-jp.org/ は2011/5に廃止予定
日本Red5ユーザー会 検索
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 59
60. 「簡易電子会議室システム」のソースコードは
日本Red5ユーザ会の関連サイトで公開中
http://red5jp.googlecode.com/
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 60
61. プロジェクトを読み込んでビルドするには
Adobe Flash Builder 4が必要ですが、、、
「FlashDevelop」でもコンパイルできます!
http://flashdevelop.org/
オープンソースのコードエディタ (MIT License)
ActionScript/MXMLのコーディング
SWF のコンパイル
Adobe AIR アプリの生成
日本のコミュニティもあります!
http://flashdevelop.jp/
#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 61
62. #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 62
63. #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved.