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アプリ「ビデオチャット」事例紹介

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

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

Plus de Shinichiro Yoshida

Plus de Shinichiro Yoshida (17)

Dernier

Dernier (9)

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