OSC2011 Tokyo/Spring...

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

オープンソースカンフゔレンス 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. 2

１．はじめに

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

5

5

20

２．Red5入門編 10

5

４．Red5応用編

５．おわりに


その前に！


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

http://www.ospn.jp/osc2010-spring/




http://pk.aiit.ac.jp/index.php?InfoTalk/20100521

http://pk.aiit.ac.jp/index.php?InfoTalk/20100521

http://www.ospn.jp/osc2010-fall/






概要

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) ※2011/2/2にRC1公開

RTMPEサポート ※RTMFPは未対応

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


Tomcat

Apache Mina

Red5 API

Spring Framework (DIコンテナ)

Red5 Application

JMX

MBean

Client

<RTMP>

開発が必要

開発が必要

停止

RMI

:9999

:1935


商用ソフトウェゕ Action Script

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

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

Adobe Flash

Adobe Flex

Open Laszlo


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

Adobe製品を購入する必要ゕリですが。。

Adobe Photoshop

Adobe Illustrator

Adobe Fireworks

Adobe Flash Catalyst

Adobe Flash

Adobe Flash Builder

Adobe Flex

Adobe Flash Player

Adobe AIR

デザナーエンジニゕ


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

Adobe Flash Player

Adobe AIR

Web Browser

AIR for Android

Packager for iPhone

Windows Mac OS Linux

Android

iPhone


Adobeサト『Flashの真実』

⇨ http://www.adobe.com/jp/choice/flash.html


簡易電子会議室システムの作り方を通じて

Red5の機能を紹介します。

ユーザー

ユーザー

ユーザー

ユーザー

ユーザー

ユーザー

簡易電子会議室システム


ログン画面部屋選択画面会議室画面

今回開発するシステムは３画面で構成される

シンプルな電子会議室システムです。

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

コンセプトは “宇宙”・・・


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


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


会議室に入室しているメンバーの映像が

表示されます。

部屋選択画面に戻ります。

自分の映像配信のON/OFFを切り替えます。


Internet

iDC

<ADSL> <3G>

<e-mobile>

<FTTH> <Wi-Fi>

インターネット接続とFlash/AIR環境のみ


DEMO

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


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

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

Adobe Flex

Adobe Flash Builder EclipseベースのIDE

Eclipse IDE

Red5

Java

Adobe Photoshop デザナーさんが使用

Adobe Flash Catalyst

青点線は作業効率化のため使用

PSDからMXMLに変換


red5-1.0.0-RC1

conf

webapps

conference

WEB-INF

classes

jp.co.s_arcana.red5

MyApplication.class

web.xml

red5-web.xml

コンテキストパス： /conference

• クラゕントが接続するURIが決まる

Webハンドラ： jp.co.s_arcana.red5.MyApplication

• クラゕントが接続した時に呼び出されるクラス

設定フゔル

デゖレクトリ構成は Servletとほぼ同じ！


ログン画面部屋選択画面

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


ユーザー

var nc: NetConnection = new NetConnection(); nc.connect( “rtmp://red5server/conference” );

クラゕント側（ActionScript）

NetConnection#connect()でFlashPlayerからRed5へ接続

プロトコルや接続先ゕプリケーションはURIで決まる

RTMPはステートフルなので接続は永続的(繋ぎっぱ)


ユーザー

package jp.co.s_arcana.red5; public class MyApplication extends ApplicationAdapter { public boolean connect ( IConnection, IScope, Object[] ) { hogehoge(); }

サーバ側（Java）

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


ApplicationAdapter

org.red5.server.adapter

MyApplication

jp.co.s_arcana.red5

+connect()

+disconnect()

+join()

+leave()

+start()

+stop()

Red5に用意されているAPIの ApplicationAdapter クラスを継承することで、ゕプリケーションのエントリポントとなる仕組み。

開発アプリケーション

：


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()で指定されたメソッドが実行される

引数には、入力した名前が渡される


会議室画面部屋選択画面

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


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

room03

room01

room02


ユーザー

var nc: NetConnection = new NetConnection(); nc.connect( “rtmp://host/conference/room01” );


入室対象部屋はURIにより指定する仕組みにしている

Red5ではURIにより”スコープ”（≒部屋）が自動生成

この例では「room01」の部屋に入室

room01


Red5内では ”部屋” の単位をスコープと呼ぶ。

接続URIに従ってRed5内部で自動的に生成。

rtmp:// host / conference / room01

Global

Scope

Web

Scope Scope

default conference room01

ユーザー room01

URI

※ 斜体赤字はスコープ名


Global

Scope

GlobalScopeはRed5サーバに必ず1つ存在

Red5スコープ階層構造の一番上位のスコープ

通常このスコープを使うことはない

WebScopeはゕプリケーションごとに1つ存在する

このスコープに接続するとappConnect()が呼び出される

Applicationスコープとも呼称される

Web

Scope

Scopeはゕプリケーションごとに複数存在できる

このスコープに接続するとroomConnnect()が呼び出される

Roomスコープとも呼称される

Scope


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


Global

Scope

Web

Scope Scope

default

conference room01

Client

Client Client Client Client

ユーザー room01



rtmp:// host / live / r1 / r2 / r3 / r4 / r5

Global

Scope Web

Scope

Scope

Scope

Scope

Scope

Scope

親親親親親親

default

live

r1

r2

r3

r4

r5

スコープは接続URIの / 区切りで階層構造となる

URI



会議室画面

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


ユーザー



NetStream#publish()で映像を配信する

第1引数で一意の名前を指定、第2引数“live”でラブ配信

var ns: NetStream = new NetStream( nc ); ns.publish( “uniqId” , “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されたときに呼ばれる


ユーザー



NetStream#play()でストリーミングを受信する

第1引数でpublishされている一意の名前を指定

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


映像On/Off

room01 Client

Client

Client

room01

Scope Client

Broadcast

Scope streamA play()


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


Global

Scope

Web

Scope Scope

default conference room01

ユーザー

room01

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

Broadcast

Scope

uniqId

Client


SharedObject

Scope

SharedObjectが使用されると生成される

同じ名前でも親スコープが異なれば別オブジェクト

Broadcast

Scope

NetStreamが使用されると生成される

同じ名前でも親スコープが異なれば別オブジェクト

Web

Scope Scope

Scope

live

r1

r2

SharedObject

Scope

SharedObject

Scope

Broadcast

Scope

Broadcast

Scope

Broadcast

Scope

SharedObject

Scope

SharedObject

Scope

so1

so2

so3

so3

stream1

stream2

stream3


Red5はクラスタリング機能もサポート

プロトコル：MRTMP(Multiplex RTMP)

<RTMP>

<RTMP> <RTMP>

<RTMP>

<MRTMP>


Streaming API

クライアントサーバ

JavaなのでTwitter4Jも使えます

<RTMP>

<HTTP>

<Native>


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/


「FlashDevelop」でもコンパイルできます！

オープンソースのコードエディタ (MIT License)

ActionScript/MXMLのコーディング

SWF のコンパイル

Adobe AIR アプリの生成

日本のコミュニティもあります！

http://flashdevelop.jp/

http://flashdevelop.org/

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

OSC2011 Tokyo/Spring...

Technology

Transcript of OSC2011 Tokyo/Spring...