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

2011年11月20日（日） 13:00-13:45
明星大学 28号館 501教室

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

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

１．はじめに
5

２．Red5入門編
10

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

４．Red5応用編
5

５．おわりに
5

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

その前に！


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～


1997 ▶ Real Media（.rm）
▶ Quick Time（.mov）
▶ Windows Media Video（.wmv）
 再生にはそれぞれ独自のソフトウェゕが必要

2004 ▶Flash Video（.flv） ※Flashは1997年にリリース

 Flash Playerさえあれば再生できる（高い普及率）
 ゗ンタラクテゖブな動きも表現できる

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

2010 ▶ 今後はHTML5動画配信も併用されていくかも？
 H.264(.mp4), Theora (.ogv), WebM(.webm)
 しかし、モバ゗ルのブラウザではHTML5で一本化しそう

 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) 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

AIR for iOS iOS


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


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

ユーザー

ユーザー

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

ユーザー

ユーザー
ユーザー


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

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


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


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


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

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


iDC

<3G> <ADSL>

<WiMAX>

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
※ 斜体赤字はスコープ名


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

会議室画面


ユーザー


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はクラスタリング機能もサポート
プロトコル：MRTMP(Multiplex RTMP)

<RTMP>

<MRTMP>

<RTMP>

<RTMP> <RTMP>


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

ゕクテゖブ
接続数

トータル
接続数

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

DEMO

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

スタック
トレース

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

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


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

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

⇨ 日本語のコンテンツを充実
させていく予定
 日本Red5ユーザ会URL
⇨ http://www.red5.gr.jp/

Red5 検索


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

http://red5jp.googlecode.com/


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

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

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


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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (11)

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

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

Plus de Shinichiro Yoshida

Plus de Shinichiro Yoshida (16)

Dernier

Dernier (9)

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