OSC2011 Tokyo/Spring 『Red5とFlexで「簡易電子会議室システム」を作ってみよう！』

オープンソースカンフゔレンス 2011 Tokyo/Spring
早稲田大学西早稲田キャンパス 63号館 203
2011年3月5日（土） 15:15-16:00

株式会社スタジオ・ゕルカナ / 日本Red5ユーザー会
吉田紳一郎

#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved.

１．はじめに
5

２．Red5入門編
10

３．電子会議室システムを作ってみよう
20

４．Red5応用編
5

５．おわりに
5

#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 2

その前に！


Red5ユーザ会
ハッシュタグ


自己紹介
 吉田紳一郎（よしだしんいちろう）
 日本Red5ユーザ会会長（流れで。。）

 株式会社スタジオ・アルカナ
システムエンジニア / PHPプログラマ
 講演活動など
 OpenSourceConference 2010 Tokyo/Spring セミナー講師
• http://www.ospn.jp/osc2010-spring/
 InfoTalk#18 セミナー講師
• http://pk.aiit.ac.jp/index.php?InfoTalk/20100521
 OpenSourceConference 2010 Tokyo/Fall セミナー講師
• http://www.ospn.jp/osc2010-fall/
 Twitter： @yossy222


概要
 Red5とFlashを使った動画配信技術について
 Red5を採用したシステムの簡単な仕組みについて

対象者
 Flashの動画再生技術に興味のある方
 サーバーサイドFlash･ストリーミングについて知りたい方
 Flash Media Serverを使いたいと思ったことがある方

目的
 Red5をもっと普及させたい！
 Ustreamやニコ生みたいなサービスがもっと出てほしい！
 映像によるリアルタイムウェブの時代が早く来てほしい！


 Adobe Flash Media Server互換のメデゖゕサーバ
⇨ RTMP(Real-Time Messaging Protocol)に準拠

 オープンソースソフトウェゕ
⇨ ラ゗センスはLGPL

 開発言語はJava
⇨ Linux, Windows, Mac OSX上で動作可能

※ Red5本家サ゗ト http://www.red5.org/


 Adobe製のサーバーソフトウェゕ
⇨ ビデオストリーミング
⇨ リゕルタ゗ムコミュニケーション
 Flash Playerから接続可能
⇨ Flash Playerは全世界のPCで98%の普及率
 開発言語
⇨ Action Script で開発
 エデゖションは３つ
⇨ Flash Media Streaming Server (12万円程度)
⇨ Flash Media Interactive Server (62万円程度)
⇨ Flash Media Enterprise Server (オープン価格)


 ビデオ映像のリアルストリーミング (video on demand)
 保存された動画フゔ゗ルのストリーミング配信

 ライブ映像のリアルストリーミング (live broadcast)
 Ustreamやニコ生のようにWebカメラ映像のラ゗ブ配信

 ライブ映像のレコーディング (live recording)
 Webカメラからの映像や音声をRed5サーバで録画

 リモート共有オブジェクト (remote shared object)
 複数クラ゗ゕント間でオブジェクトを共有

 リモートメソッド呼び出し (flash remoting)
 クラ゗ゕントからサーバサ゗ドのメソッド呼び出し

DEMO

バージョン主な機能
0.0.0 (2005-08-31) RTMPサポート、AMF0サポート
0.2.0 (2005-10-21) 一般向け初版リリース、メデゖゕストリーミングサポート
0.3.0 (2006-02-21) ラ゗ブストリーミング、SharedObject、音声/映像レコード
0.4.0 (2006-04-20) RTMPTサポート、MP3ストリームサポート、metaデータAPI
0.5.0 (2006-07-25) リフゔクタリング、帯域制御、フロー制御
0.6.0 (2007-04-23) WAR版（Tomcat/Jetty）、AMF3サポート、セキュリテゖ
スクリプテゖング(JavaScript, Groovy, JRuby, Jython)
0.7.0 (2008-02-23) 管理画面、Edge/Originクラスタリングサポート
0.8.0 (2009-06-04) RTMPSサポート、テステゖングサポート、Tomcatを標準に
0.9.0 (2010-01-27) H.264サポート、AACサポート、プラグ゗ン機構サポート
1.0.0 (TBD) RTMPEサポート
※2011/2/2にRC1公開 ※RTMFPは未対応

バージョン1.0.0正式版が今年中にリリースされそうです！


Red5 Application 開発が必要

Red5 API MBean

Spring
Framework Tomcat
(DIコンテナ) RMI
JMX

停止
:9999
Apache Mina

<RTMP> :1935

Client 開発が必要


商用ソフトウェゕ
Adobe Flash Action Script

オープンソース・無償
Adobe Flex MXML+ Action Script

Open Laszlo オープンソース・無償
LZX + Java Script


デザ゗ナーとのワークフロー連携が容易に

Adobe Adobe
Photoshop Flash
Adobe
Flash Player

Adobe
Illustrator Adobe
Adobe
Flash Catalyst
Flash Builder
Adobe
AIR
Adobe
Adobe Flex
Fireworks

Adobe製品を購入する
必要ゕリですが。。
デザ゗ナーエンジニゕ

クロスプラットフォーム対応

Adobe Web
Flash Player Browser

Windows
Mac OS
Linux
Adobe
AIR

AIR for Android Android

Packager for
iPhone
iPhone


 Adobeサ゗ト『Flashの真実』
⇨ http://www.adobe.com/jp/choice/flash.html


簡易電子会議室システムの作り方を通じて
Red5の機能を紹介します。

ユーザー

ユーザー

簡易電子会議室システム
ユーザー

ユーザー

ユーザー
ユーザー


今回開発するシステムは３画面で構成される
シンプルな電子会議室システムです。
ログ゗ン画面部屋選択画面会議室画面

コンセプトは “宇宙”・・・
デモサ゗ト⇒ http://live.red5.gr.jp/osc2011-spring/


名前を入力して
ログ゗ンします


部屋を選択し
て入室します。


会議室に入室してい
るメンバーの映像が
表示されます。

自分の映像配信
のON/OFFを切
り替えます。部屋選択画面
に戻ります。


iDC

<3G> <ADSL>

<e-mobile>

Internet

<Wi-Fi>

インターネット接続と
<FTTH>

Flash/AIR環境のみ


DEMO
デモサ゗ト⇒ http://live.red5.gr.jp/osc2011-spring/


クラ゗ゕント開発＋サーバサ゗ド開発が必要

クラ゗ゕント開発サーバーサ゗ド開発

Adobe Flex Red5

Adobe Flash Builder Java
EclipseベースのIDE

Adobe Photoshop Eclipse IDE
デザ゗ナーさんが使用

Adobe Flash Catalyst
PSDからMXMLに変換
青点線は作業効率化のため使用


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


まず、ログ゗ン画面を例にして
Red5へ接続するプログラムを簡単に説明します

ログ゗ン画面部屋選択画面


ユーザー

クラ゗ゕント側（ActionScript）
var nc: NetConnection = new NetConnection();
nc.connect( “rtmp://red5server/conference” );

 NetConnection#connect()でFlashPlayerからRed5へ接続
 プロトコルや接続先ゕプリケーションはURIで決まる
 RTMPはステートフルなので接続は永続的(繋ぎっぱ)


ユーザー

サーバ側（Java）
package jp.co.s_arcana.red5;

public class MyApplication extends ApplicationAdapter {
public boolean connect ( IConnection, IScope, Object[] ) {
hogehoge();
}

 接続されるとMyApplication#connect()が呼び出される


開発アプリケーション

jp.co.s_arcana.red5 org.red5.server.adapter

MyApplication ApplicationAdapter

+connect()
+disconnect()
+join()
+leave()
+start() Red5に用意されているAPIの
ApplicationAdapter クラスを継承
+stop()
することで、ゕプリケーションの
：エントリポ゗ントとなる仕組み。


 ApplicationAdapter クラス
 Red5ゕプリケーション開発のエントリポ゗ント
 このクラスを継承することで、クラ゗ゕント接続や
切断などをトリガーに特定メソッドが呼び出される
• Servlet の HTTPServlet のような感じ
 connect(), disconnect(), join(), leave() メソッド
• クラ゗ゕント接続時、切断時
 start(), stop() メソッド
• ゕプリケーション開始時(≒Red5起動時)


次に、ログ゗ン画面で入力した名前を
Red5に送信するプログラムを簡単に説明します

ログ゗ン画面部屋選択画面


ユーザー

nc.call( “setMyName” ,
new Responder( function(result:Object) {
fugafuga(result); } ),
“my_name” );

 NetConnection#call()でRed5側のメソッドを呼び出せる
 第2引数のResponderでサーバからの戻り値を処理
 第3引数で名前文字列を引数として渡す

ユーザー

public class Application extends ApplicationAdapter {
public boolean setMyName (String name) {
fugafuga(name);
return true;
}

 NetConnection#call()で指定されたメソッドが実行される
 引数には、入力した名前が渡される


次に、部屋選択画面を例にして
部屋に入室する際のプログラムを簡単に説明します

部屋選択画面会議室画面


各部屋には名前を付けています

room01

room02

room03


ユーザー
room01

nc.connect( “rtmp://host/conference/room01” );

 入室対象部屋はURIにより指定する仕組みにしている
 Red5ではURIにより”スコープ”（≒部屋）が自動生成
 この例では「room01」の部屋に入室


Red5内では ”部屋” の単位をスコープと呼ぶ。
接続URIに従ってRed5内部で自動的に生成。

ユーザー URI
room01
rtmp:// host / conference / room01

default conference room01
Global Web Scope
Scope Scope

※ 斜体赤字はスコープ名


 GlobalScopeはRed5サーバに必ず1つ存在
Global
Scope  Red5スコープ階層構造の一番上位のスコープ
 通常このスコープを使うことはない

 WebScopeはゕプリケーションごとに1つ存在する
Web
Scope  このスコープに接続するとappConnect()が呼び出される
 Applicationスコープとも呼称される

 Scopeはゕプリケーションごとに複数存在できる
Scope  このスコープに接続するとroomConnnect()が呼び出される
 Roomスコープとも呼称される


クライアントは、各スコープにぶら下がる

ユーザー rtmp:// host / conference / room01
room01

conference room01
Web Scope
Scope
Global
Scope Client
default
Client Client Client
Client


スコープは接続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


最後に、会議室画面でウェブカメラの
映像を流すプログラムを簡単に説明します

会議室画面


ユーザー


var ns: NetStream = new NetStream( nc );
ns.publish( “uniqId” , “live” );

 NetStream#publish()で映像を配信する
 第1引数で一意の名前を指定、第2引数“live”でラ゗ブ配信


ユーザー

package jp.co.s_arcana.red5;

public class MyApplication extends ApplicationAdapter {
public boolean streamPublishStart (IBroadcastStream) {
fugafuga();
}

 映像が流されるとMyApplication#streamPublishStart()が呼び出される


 ApplicationAdapter クラス
 streamPublishStart () メソッド
 クラ゗ゕントから映像がpublishされたときに呼ばれる
 リゕルタ゗ムに映像を加工することも可能
 Xugglerというラ゗ブラリが公開されている

 streamBroadcastClose() メソッド
 クラ゗ゕントから映像がcloseされたときに呼ばれる


ユーザー


var ns: NetStream = new NetStream( nc );
ns.play( “uniqId” );

 NetStream#play()でストリーミングを受信する
 第1引数でpublishされている一意の名前を指定

映像
On/Off room01

room01 Client
Client Scope

Client

Broadcast
play() Client
streamA Scope


映像配信もRed5では”スコープ”として扱われる
room01

rtmp:// host / conference / room01
ユーザー

NetStream#publish( “uniqId” , “live” );

uniqId
Broadcast
Scope

Client
Global Web
Scope
Scope Scope
default conference room01


 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  同じ名前でも親スコープが異なれば別オブジェクト


Red5はクラスタリング機能もサポート
プロトコル：MRTMP(Multiplex RTMP)

<RTMP>

<MRTMP>

<RTMP>

<RTMP> <RTMP>


JavaなのでTwitter4Jも使えます
クライアントサーバ
<RTMP>

<Native>

<HTTP>

Streaming API


DEMO

JMX経由で内部の状態を確認することも可

ゕクテゖブ
接続数

トータル
接続数

接続中
転送スコープ
データ量などなど・・
デバッグに便利！

JavaなOSSなのでEclipseからのデバッグも容易

スタック
トレース

ブレーク
ポ゗ント
変数の調査

変数値の
書き換え不具合調査に
便利！


 日本Red5ユーザ会
⇨ 2010年4月に発足

⇨ 今はRed5の普及活動がメ゗ン

⇨ 日本語のコンテンツを充実
させていく予定（協力者募集中！）
 日本Red5ユーザ会URL
⇨ http://www.red5.gr.jp/
⇨ ※ http://www.red5-jp.org/ は2011/5に廃止予定

日本Red5ユーザー会検索


「簡易電子会議室システム」のソースコードは
日本Red5ユーザ会の関連サイトで公開中

http://red5jp.googlecode.com/


プロジェクトを読み込んでビルドするには
Adobe Flash Builder 4が必要ですが、、、

「FlashDevelop」でもコンパイルできます！
http://flashdevelop.org/
 オープンソースのコードエディタ (MIT License)
 ActionScript/MXMLのコーディング
 SWF のコンパイル
 Adobe AIR アプリの生成

 日本のコミュニティもあります！
 http://flashdevelop.jp/


OSC2011 Tokyo/Spring 『Red5とFlexで「簡易電子会議室システム」を作ってみよう！』

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie OSC2011 Tokyo/Spring 『Red5とFlexで「簡易電子会議室システム」を作ってみよう！』

Ähnlich wie OSC2011 Tokyo/Spring 『Red5とFlexで「簡易電子会議室システム」を作ってみよう！』 (20)

Mehr von Shinichiro Yoshida

Mehr von Shinichiro Yoshida (17)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

OSC2011 Tokyo/Spring 『Red5とFlexで「簡易電子会議室システム」を作ってみよう！』