リアルタイム通信アプリはつくれる！『Red5 Media Server』の機能と事例のご紹介

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

2011年11月20日（日） 13:00-13:45

明星大学 28号館 501教室

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

吉田紳一郎

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

１．はじめに

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

5

5

15

２．Red5入門編 10

5

４．Red5応用編

５．おわりに



その前に！


Red5ユーザ会

ハッシュタグ


自己紹介

吉田紳一郎（よしだしんいちろう）

日本Red5ユーザ会会長 (http://www.red5.gr.jp/)

株式会社スタジオ・ゕルカナ所属 (http://www.s-arcana.co.jp/)

システムエンジニゕ / プログラマ

PHP/JavaScript/ActionScript/Java/Rubyなど、Web系開発に従事。

講演活動など OpenSourceConference 2010 Tokyo/Spring セミナー講師

産業技術大学院大学 InfoTalk#18 セミナー講師

OpenSourceConference 2010 Tokyo/Fall セミナー講師

Flex勉強会第130回東京ラトニングトーク

OpenSourceConference 2011 Tokyo/Spring セミナー講師

Twitter： http://twitter.com/yossy222

Facebook: http://facebook.com/yossy222


概要

Red5とFlashを使った動画配信技術について

Red5を採用したシステムの簡単な仕組みについて

対象者

Flashの動画再生技術に興味のある方

サーバーサドFlash･ストリーミングについて知りたい方

Flash Media Serverを使いたいと思ったことがある方

目的

Red5をもっと普及させたい！

Ustreamやニコ生みたいなサービスがもっと出てほしい！

映像によるリゕルタムウェブの時代が早く来てほしい！



ダウンロード方式

動画フゔルを最後までダウンロード完了してから再生

動画配信方式の違い

疑似ストリーミング方式

動画フゔルをダウンロードしながら再生（PCに残る）

「プログレッシブダウンロード」とも呼ばれる

リゕルストリーミング方式

動画データをダウンロードしながら再生（PCに残らない）

ラブストリーミングを実現するにはこの方式が必要


疑似ストリーミング方式

リゕルストリーミング方式

2005/12～ 2006/12～

2007/3～ 2007/12～


▶Flash Video（.flv）

Flash Playerさえあれば再生できる（高い普及率）

ンタラクテゖブな動きも表現できる

リゕルストリーミングは Flash Media Server が必要

11

▶Real Media（.rm）

▶Quick Time（.mov）

▶Windows Media Video（.wmv）

再生にはそれぞれ独自のソフトウェゕが必要

1997

2004

2010 ▶今後はHTML5動画配信も併用されていくかも？

H.264(.mp4), Theora (.ogv), WebM(.webm)

しかし、モバルのブラウザではHTML5で一本化しそう

※Flashは1997年にリリース


Adobe製のサーバーソフトウェゕ

⇨ ビデオストリーミング

⇨ リゕルタムコミュニケーション

Flash Playerから接続可能

⇨ Flash Playerは全世界のPCで98%の普及率

開発言語

⇨ Action Script で開発

エデゖションは３つ

⇨ Flash Media Streaming Server (12万円程度)

⇨ Flash Media Interactive Server (62万円程度)

⇨ Flash Media Enterprise Server (オープン価格)


Adobe Flash Media Server互換のメデゖゕサーバ

⇨ RTMP(Real-Time Messaging Protocol)に準拠

オープンソースソフトウェゕ

⇨ ラセンスはLGPL

開発言語はJava

⇨ Linux, Windows, Mac OSX上で動作可能

Red5本家サト

⇨ http://www.red5.org/


ビデオ映像のリゕルストリーミング (video on demand)

保存された動画フゔルのストリーミング配信

ラブ映像のリゕルストリーミング (live broadcast)

Ustreamやニコ生のようにWebカメラ映像のラブ配信

ラブ映像のレコーデゖング (live recording)

Webカメラからの映像や音声をRed5サーバで録画

リモート共有オブジェクト (remote shared object)

複数クラゕント間でオブジェクトを共有

リモートメソッド呼び出し (flash remoting)

クラゕントからサーバサドのメソッド呼び出し


ビデオ映像のリゕルストリーミング (video on demand)

保存された動画フゔルのストリーミング配信


ラブ映像のリゕルストリーミング (live broadcast)

Ustreamやニコ生のようにWebカメラ映像のラブ配信


ラブ映像のレコーデゖング (live recording)

Webカメラからの映像や音声をRed5サーバで録画


リモート共有オブジェクト (remote shared object)

複数クラゕント間でオブジェクトを共有


リモートメソッド呼び出し (flash remoting)

クラゕントからサーバサドのメソッド呼び出し


DEMO


事前準備

⇨ Java の実行環境が必要（Oracle社のサトから取得）

Red5のンストーラを実行

※ンストーラ以外にzip版もあり


事前準備（Javaの実行環境）

[root@linux ~]# yum install –y java

Red5のダウンロードと展開

[root@linux ~]# wget http://trac.red5.org/downloads/1_0/red5-1.0.0-RC1.tar.gz [root@linux ~]# tar zxvf red5-1.0.0-RC1.tar.gz

Red5の起動

[root@linux ~]# cd red5-1.0.0-RC1 [root@linux ~]# sh ./red5.sh


Red5起動後はすぐにデモの確認が可能

⇨http://localhost:5080/ にゕクセス

⇨チャット、ビデオ配信、ラブ配信、ラブ録画な

どのサンプルゕプリを体験することができる


バージョン主な機能

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

AIR for iOS

Windows Mac OS Linux

Android

iOS


Adobeサト『Flashの真実』

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



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

Red5の機能を紹介します。

ユーザー

ユーザー

ユーザー

ユーザー

ユーザー

ユーザー

簡易電子会議室システム


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

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

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

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

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


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


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


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

表示されます。

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

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


Internet

iDC

<ADSL> <3G>

<WiMAX>

<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


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

rtmp:// host / conference / room01

Global

Scope

Web

Scope Scope

default

conference room01

Client

Client Client Client Client

ユーザー room01

※ 斜体赤字はスコープ名


会議室画面

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


ユーザー



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はクラスタリング機能もサポート

プロトコル：MRTMP(Multiplex RTMP)

<RTMP>

<RTMP> <RTMP>

<RTMP>

<MRTMP>


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

ゕクテゖブ接続数

トータル接続数

などなど・・

デバッグに便利！

接続中スコープ転送

データ量


DEMO


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

ブレークポント

変数の調査

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

便利！

スタックトレース



日本Red5ユーザ会

⇨2010年4月に発足

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

⇨日本語のコンテンツを充実

させていく予定

日本Red5ユーザ会URL

⇨http://www.red5.gr.jp/

Red5 検索


「簡易電子会議室システム」のソースコードは

日本Red5ユーザ会の関連サトで公開中

http://red5jp.googlecode.com/


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

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

ActionScript/MXMLのコーデゖング

SWF のコンパル

Adobe AIR ゕプリの生成

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

http://flashdevelop.jp/

http://flashdevelop.org/

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



Technology

リアルタイム通信アプリはつくれる！『Red5 Media Server』の機能と事例のご紹介