OSC2011 Tokyo/Spring 『Red5とFlexで「簡易電子会議室システム」を作ってみよう!』
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 5,389 views

オープンソースカンファレンス2011 Tokyo/Spring (http://www.ospn.jp/osc2011-spring/) の

オープンソースカンファレンス2011 Tokyo/Spring (http://www.ospn.jp/osc2011-spring/) の
日本Red5ユーザ会(http://www.red5.gr.jp/)セミナー資料です。

Statistics

Views

Total Views
5,389
Views on SlideShare
5,000
Embed Views
389

Actions

Likes
1
Downloads
42
Comments
1

10 Embeds 389

http://www.red5.gr.jp 289
http://papasan.mydns.jp 71
http://dojo.tec.ntts.co.jp 15
http://red5.gr.jp 4
http://sub 3
http://twitter.com 2
http://webcache.googleusercontent.com 2
http://b.hatena.ne.jp 1
http://static.slidesharecdn.com 1
http://s.deeeki.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • オープンソースカンフゔレンス 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.
  • 1.はじめに 5 2.Red5入門編 10 3.電子会議室システムを作ってみよう 20 4.Red5応用編 5 5.おわりに 5#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 2
  • #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 3
  • その前に!#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 4
  • Red5ユーザ会 ハッシュタグ#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 5
  • 自己紹介  吉田 紳一郎(よしだ しんいちろう)  日本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#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 6
  • 概要  Red5とFlashを使った動画配信技術について  Red5を採用したシステムの簡単な仕組みについて 対象者  Flashの動画再生技術に興味のある方  サーバーサイドFlash・ストリーミングについて知りたい方  Flash Media Serverを使いたいと思ったことがある方 目的  Red5をもっと普及させたい!  Ustreamやニコ生みたいなサービスがもっと出てほしい!  映像によるリアルタイムウェブの時代が早く来てほしい!#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 7
  • #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 8
  •  Adobe Flash Media Server互換のメデゖゕサーバ ⇨ RTMP(Real-Time Messaging Protocol)に準拠  オープンソースソフトウェゕ ⇨ ラ゗センスはLGPL  開発言語はJava ⇨ Linux, Windows, Mac OSX上で動作可能 ※ Red5本家サ゗ト http://www.red5.org/#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 9
  •  Adobe製のサーバーソフトウェゕ ⇨ ビデオストリーミング ⇨ リゕルタ゗ムコミュニケーション  Flash Playerから接続可能 ⇨ Flash Playerは全世界のPCで98%の普及率  開発言語 ⇨ Action Script で開発  エデゖションは3つ ⇨ Flash Media Streaming Server (12万円程度) ⇨ Flash Media Interactive Server (62万円程度) ⇨ Flash Media Enterprise Server (オープン価格)#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 10
  •  ビデオ映像のリアルストリーミング (video on demand)  保存された動画フゔ゗ルのストリーミング配信  ライブ映像のリアルストリーミング (live broadcast)  Ustreamやニコ生のようにWebカメラ映像のラ゗ブ配信  ライブ映像のレコーディング (live recording)  Webカメラからの映像や音声をRed5サーバで録画  リモート共有オブジェクト (remote shared object)  複数クラ゗ゕント間でオブジェクトを共有  リモートメソッド呼び出し (flash remoting)  クラ゗ゕントからサーバサ゗ドのメソッド呼び出し#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 11
  • DEMO#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 12
  • バージョン 主な機能 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正式版が今年中にリリースされそうです!#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 13
  • 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
  • 商用ソフトウェゕ 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
  • デザ゗ナーとのワークフロー連携が容易に 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
  • クロスプラットフォーム対応 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
  •  Adobeサ゗ト『Flashの真実』 ⇨ http://www.adobe.com/jp/choice/flash.html#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 18
  • #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 19
  • 簡易電子会議室システムの作り方を通じて Red5の機能を紹介します。 ユーザー ユーザー 簡易電子会議室システム ユーザー ユーザー ユーザー ユーザー#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 20
  • 今回開発するシステムは3画面で構成される シンプルな電子会議室システムです。 ログ゗ン画面 部屋選択画面 会議室画面 コンセプトは “宇宙”・・・ デモサ゗ト⇒ http://live.red5.gr.jp/osc2011-spring/#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 21
  • 名前を入力して ログ゗ンします#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 22
  • 部屋を選択し て入室します。#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 23
  • 会議室に入室してい るメンバーの映像が 表示されます。 自分の映像配信 のON/OFFを切 り替えます。 部屋選択画面 に戻ります。#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 24
  • iDC <3G> <ADSL> <e-mobile> Internet <Wi-Fi> インターネット接続と <FTTH> Flash/AIR環境のみ#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 25
  • DEMO デモサ゗ト⇒ http://live.red5.gr.jp/osc2011-spring/#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 26
  • クラ゗ゕント開発+サーバサ゗ド開発が必要 クラ゗ゕント開発 サーバーサ゗ド開発 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
  • 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
  • まず、ログ゗ン画面を例にして Red5へ接続するプログラムを簡単に説明します ログ゗ン画面 部屋選択画面#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 29
  • ユーザー クラ゗ゕント側(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
  • ユーザー サーバ側(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
  • 開発アプリケーション 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
  •  ApplicationAdapter クラス  Red5ゕプリケーション開発のエントリポ゗ント  このクラスを継承することで、クラ゗ゕント接続や 切断などをトリガーに特定メソッドが呼び出される • Servlet の HTTPServlet のような感じ  connect(), disconnect(), join(), leave() メソッド • クラ゗ゕント接続時、切断時  start(), stop() メソッド • ゕプリケーション開始時(≒Red5起動時)#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 33
  • 次に、ログ゗ン画面で入力した名前を Red5に送信するプログラムを簡単に説明します ログ゗ン画面 部屋選択画面#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 34
  • ユーザー クラ゗ゕント側(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
  • ユーザー サーバ側(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
  • 次に、部屋選択画面を例にして 部屋に入室する際のプログラムを簡単に説明します 部屋選択画面 会議室画面#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 37
  • 各部屋には名前を付けています room01 room02 room03#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 38
  • ユーザー 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
  • 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
  •  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
  • クライアントは、各スコープにぶら下がる ユーザー 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
  • スコープは接続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
  • 最後に、会議室画面でウェブカメラの 映像を流すプログラムを簡単に説明します 会議室画面#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 44
  • ユーザー クラ゗ゕント側(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
  • ユーザー サーバ側(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
  •  ApplicationAdapter クラス  streamPublishStart () メソッド  クラ゗ゕントから映像がpublishされたときに呼ばれる  リゕルタ゗ムに映像を加工することも可能  Xugglerというラ゗ブラリが公開されている  streamBroadcastClose() メソッド  クラ゗ゕントから映像がcloseされたときに呼ばれる#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 47
  • ユーザー クラ゗ゕント側(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
  • 映像 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
  • 映像配信も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
  •  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
  • #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 52
  • Red5はクラスタリング機能もサポート プロトコル:MRTMP(Multiplex RTMP) <RTMP> <MRTMP> <RTMP> <RTMP> <RTMP>#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 53
  • JavaなのでTwitter4Jも使えます クライアント サーバ <RTMP> <Native> <HTTP> Streaming API#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 54
  • DEMO#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 55
  • JMX経由で内部の状態を確認することも可 ゕクテゖブ 接続数 トータル 接続数 接続中 転送 スコープ データ量 などなど・・ デバッグに便利!#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 56
  • JavaなOSSなのでEclipseからのデバッグも容易 スタック トレース ブレーク ポ゗ント 変数の調査 変数値の 書き換え 不具合調査に 便利!#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 57
  • #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 58
  •  日本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
  • 「簡易電子会議室システム」のソースコードは 日本Red5ユーザ会の関連サイトで公開中 http://red5jp.googlecode.com/#red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 60
  • プロジェクトを読み込んでビルドするには 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
  • #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 62
  • #red5ug Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved.