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

2011年2月9日（水） 21:30-21:40
FxUG勉強会第130回＠東京ラ゗トニングトーク

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

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

自己紹介

 吉田紳一郎（よしだしんいちろう）
⇨ 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

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/


Red5の概要
＜Red5ができること＞
 ビデオ映像のリゕルストリーミング
⇨ 保存された動画フゔ゗ルのストリーミング配信
 ラ゗ブ映像のリゕルストリーミング
⇨ Ustreamやニコ生のようにWebカメラ映像のラ゗ブ配信
 ラ゗ブ映像のレコーデゖング
⇨ Webカメラからの映像や音声をレコーデゖング
 リモート共有オブジェクト
⇨ 複数クラ゗ゕント間でオブジェクトを共有
 リモートメソッド呼び出し
⇨ クラ゗ゕントからサーバサ゗ドのメソッド呼び出し


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データ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サポート(予定)、RTMFPサポート(予定)

５年の歴史

Red5の技術要素
＜使用技術要素＞
Red5 Application 開発が必要

Red5 API MBean

Spring
Framework Tomcat
(DIコンテナ) RMI
JMX

停止
:9999
Apache Mina

RTMP (Real-Time Messaging Protocol)
:1935

Client 開発が必要


Red5豆知識
＜Adobeによる言及＞
 Adobeサ゗ト『Flashの真実』
⇨ http://www.adobe.com/jp/choice/flash.html


mixiアプリでビデオチャット！

 Adobe Flex + Red5で開発した「ビデオチャット」
⇨ mixiゕプリとして公開中
▶ http://pk.aiit.ac.jp/avc/

ビデオ

テキスト

ボイス

※産業技術大学院大学におけるPBL(Project Based Learning)の一環として開発


mixiアプリでビデオチャット！

実際のデモをご覧ください
http://mixi.jp/view_appli.pl?id=4091


アーキテクチャ概要

Open Social API
mixiゕプリ

RTMP

Flash
ユーザーA Flex

ユーザーB


アプリ機能×Red5機能(1/7)

2つの機能を例に
コードを交えて説明

アプリ機能 Red5機能
1 テキストチャットリモートメソッド呼び出し
2 ビデオチャット映像ストリーミング


‐テキストチャット‐

テキストチャットリモートメソッド呼び出し



接続
Red5
入室接続
部屋

入室
Aさん “やっほー”
Bさん

“やっほー” “やっほー”


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 {
…;
}


‐ビデオチャット‐

ビデオチャット映像ストリーミング



接続
Red5
接続

Aさん映像公開
Bさん

映像受信


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さん


ソースコード公開中

 Google Code でソースコード公開中
▶ http://code.google.com/p/aiit-videochat/

⇨ クラ゗ゕントサ゗ド
▶ Adobe Flex（Action Script）
 PureMVC Framework
⇨ サーバーサ゗ド
▶ Red5（Java）

⇨ その他
▶ mixiゕプリ用ガジェット(XML)
▶ ボット機能（GoogleAppEngine/Python）


日本Red5ユーザー会

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

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

⇨ コンテンツはこれから充実
させていきます！
 公式サ゗ト
⇨ http://www.red5.gr.jp/

日本Red5ユーザー会検索


オープンソースカンファレンス
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 検索


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

ユーザー

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

<RTMP>
ユーザー

<RTMP>
<RTMP>
ユーザー
ユーザー

21

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

Ähnlich wie Red5とFlexで作るmixiアプリ「ビデオチャット」事例紹介 (20)

Mehr von Shinichiro Yoshida

Mehr von Shinichiro Yoshida (17)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

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