Red5とFlexで作るmixiアプリ「ビデオチャット」事例紹介

7,429 views
7,307 views

Published on

FxUG勉強会第130回@東京のライトニングトークの資料です。

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
7,429
On SlideShare
0
From Embeds
0
Number of Embeds
2,740
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Red5とFlexで作るmixiアプリ「ビデオチャット」事例紹介

  1. 1. 2011年2月9日(水) 21:30-21:40FxUG勉強会 第130回@東京 ラ゗トニングトーク日本Red5ユーザ会/株式会社スタジオ・ゕルカナ 吉田 紳一郎 Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved.
  2. 2. 自己紹介 吉田 紳一郎(よしだ しんいちろう) ⇨ Red5ユーザ会 会長 ⇨ 株式会社スタジオ・ゕルカナ システムエンジニゕ / プログラマー ⇨ 講演活動など ▶ 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/ Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 2
  3. 3. Red5の概要 <Red5とは?> Adobe Flash Media Server互換 ⇨ RTMP(Real-Time Messaging Protocol)に準拠 オープンソースソフトウェゕ ⇨ ラ゗センスはLGPL 開発言語はJava ⇨ Linux, Windows, Mac OSX上で動作可能※ Red5公式サ゗ト ⇨ 公式サ゗ト ⇒ http://code.google.com/p/red5/ ▶ 旧公式サ゗ト ⇒ http://osflash.org/red5/ ⇨ 公式Wiki ⇒ http://wiki.red5.org/ Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 3
  4. 4. Red5の概要 <Red5ができること> ビデオ映像のリゕルストリーミング ⇨ 保存された動画フゔ゗ルのストリーミング配信 ラ゗ブ映像のリゕルストリーミング ⇨ Ustreamやニコ生のようにWebカメラ映像のラ゗ブ配信 ラ゗ブ映像のレコーデゖング ⇨ Webカメラからの映像や音声をレコーデゖング リモート共有オブジェクト ⇨ 複数クラ゗ゕント間でオブジェクトを共有 リモートメソッド呼び出し ⇨ クラ゗ゕントからサーバサ゗ドのメソッド呼び出し Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 4
  5. 5. Red5の技術要素 <Red5の歴史> バージョン 主な機能0.1.0 (2005-10-xx) RTMPサポート、AMF0サポート0.2.0 (2005-10-21) 一般向け初版リリース、メデゖゕストリーミングサポート0.3.0 (2006-02-21) ラ゗ブストリーミング、SharedObject、音声/映像レコード0.4.0 (2006-04-20) RTMPTサポート、MP3ストリームサポート、metaデータAPI0.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サポート(予定)、RTMFPサポート(予定) 5年の歴史 Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 5
  6. 6. Red5の技術要素 <使用技術要素> Red5 Application 開発が必要 Red5 API MBean SpringFramework Tomcat(DIコンテナ) RMI JMX 停止 :9999 Apache Mina RTMP (Real-Time Messaging Protocol) :1935 Client 開発が必要 Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 6
  7. 7. Red5豆知識 <Adobeによる言及> Adobeサ゗ト『Flashの真実』 ⇨ http://www.adobe.com/jp/choice/flash.html Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 7
  8. 8. mixiアプリでビデオチャット! Adobe Flex + Red5で開発した「ビデオチャット」 ⇨ mixiゕプリとして公開中 ▶ http://pk.aiit.ac.jp/avc/ ビデオ テキスト ボイス ※産業技術大学院大学におけるPBL(Project Based Learning)の一環として開発 Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 8
  9. 9. mixiアプリでビデオチャット!実際のデモをご覧ください http://mixi.jp/view_appli.pl?id=4091 Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 9
  10. 10. アーキテクチャ概要 Open Social APImixiゕプリ RTMP FlashユーザーA Flex ユーザーB Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 10
  11. 11. アプリ機能×Red5機能(1/7) 2つの機能を例に コードを交えて説明 アプリ機能 Red5機能1 テキストチャット リモートメソッド呼び出し2 ビデオチャット 映像ストリーミング Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 11
  12. 12. アプリ機能×Red5機能(2/7) ‐テキストチャット‐ アプリ機能 Red5機能テキストチャット リモートメソッド呼び出し Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 12
  13. 13. アプリ機能×Red5機能(3/7) ‐テキストチャット‐ 接続 Red5 入室 接続 部屋 入室Aさん “やっほー” Bさん “やっほー” “やっほー” Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 13
  14. 14. アプリ機能×Red5機能(4/7) ‐テキストチャット‐ var nc:NetConnection = new NetConnection(); nc.connect("rtmp://red5server/Red5Application/room"); Red5 部屋 nc.call("sendMessage", new Responder(onResult), “やっほー”);Aさん public boolean sendMessage(String msg) { IConnection conn = Red5.getConnectionLocal(); invokeOnAllConnections( conn.getScope(), "receiveMessage", msg ); } public function recieveMessage(msg:String):void { …; }Bさん public function recieveMessage(msg:String):void { …; } Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 14
  15. 15. アプリ機能×Red5機能(5/7) ‐ビデオチャット‐ アプリ機能 Red5機能 ビデオチャット 映像ストリーミング Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 15
  16. 16. アプリ機能×Red5機能(6/7) ‐ビデオチャット‐ 接続 Red5 接続Aさん 映像公開 Bさん 映像受信 Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 16
  17. 17. アプリ機能×Red5機能(7/7) ‐ビデオチャット‐ var nc:NetConnection = new NetConnection(); nc.connect("rtmp://red5server/Red5Application"); Red5 var cam:Camera = Camera.get(); var mic:Microphone = Microphone.get();Aさん var ns:NetStream = new NetStream(nc); ns.attachVideo(cam); ns.attachAudio(mic); ns.publish("red5BroadcastDemo", "live"); ns.play("red5BroadcastDemo", -1);Bさん Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 17
  18. 18. ソースコード公開中 Google Code でソースコード公開中 ▶ http://code.google.com/p/aiit-videochat/ ⇨ クラ゗ゕント サ゗ド ▶ Adobe Flex(Action Script)  PureMVC Framework ⇨ サーバーサ゗ド ▶ Red5(Java) ⇨ その他 ▶ mixiゕプリ用ガジェット(XML) ▶ ボット機能(GoogleAppEngine/Python) Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 18
  19. 19. 日本Red5ユーザー会 日本Red5ユーザ会 ⇨ 2010年4月に発足 ⇨ 今はRed5の普及活動がメ゗ン ⇨ コンテンツはこれから充実 させていきます! 公式サ゗ト ⇨ http://www.red5.gr.jp/日本Red5ユーザー会 検索 Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 19
  20. 20. オープンソースカンファレンス 2011 Tokyo/Spring OSC 2011 Tokyo/Spring で講演します ⇨ 3/5(土) 15:15 – 16:00 @早稲田大学 ⇨ 「簡易電子会議室システムを作ってみよう」 ⇨ Red5+Flexで開発した例を交えてRed5を紹介 ⇨ システムの゗メージは次のページにて・・ OSC2011Tokyo/Spring 公式サ゗ト ⇨ http://www.ospn.org/osc2011-spring/ osc2011 spring 検索 Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 20
  21. 21. ログ゗ン画面 部屋選択画面 会議室画面 ユーザー ユーザー <RTMP> <RTMP> 簡易電子会議室システム <RTMP> ユーザー <RTMP>ユーザー <RTMP> <RTMP> ユーザー ユーザー Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved. 21
  22. 22. Copyright 2011 Shinichiro Yoshida / STUDIO ARCANA Co.,Ltd. All Rights Reserved.

×