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

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

2011年2月9日（水） 21:30-21:40

FxUG勉強会第130回＠東京ラトニングトーク

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

吉田紳一郎


吉田紳一郎（よしだしんいちろう）

⇨ 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/

自己紹介

2

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

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

5

５年の歴史

Red5の技術要素

＜Red5の歴史＞


Tomcat

Apache Mina

Red5 API

Spring Framework (DIコンテナ)

Red5 Application

JMX

MBean

Client

RTMP (Real-Time Messaging Protocol)

開発が必要

開発が必要

停止

RMI

:9999

:1935

Red5の技術要素

＜使用技術要素＞


Adobeサト『Flashの真実』

⇨ http://www.adobe.com/jp/choice/flash.html

7

Red5豆知識

＜Adobeによる言及＞


Adobe Flex + Red5で開発した「ビデオチャット」

⇨ mixiゕプリとして公開中

▶ http://pk.aiit.ac.jp/avc/

ビデオ

テキスト

ボイス

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

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

8


実際のデモをご覧ください

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

9

http://mixi.jp/view_appli.pl?id=4091


Flash Flex

RTMP

Open Social API

ユーザーA

ユーザーB

mixiゕプリ

アーキテクチャ概要

10


アプリ機能 Red5機能

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

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

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

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

11



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


‐テキストチャット‐

12


Red5

Aさん

接続

入室部屋

Bさん

“やっほー”

接続

入室

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



13


Red5

Aさん

var nc:NetConnection = new NetConnection(); nc.connect("rtmp://red5server/Red5Application/room");

部屋 nc.call("sendMessage", new Responder(onResult), “やっほー”);

public boolean sendMessage(String msg) { IConnection conn = Red5.getConnectionLocal(); invokeOnAllConnections( conn.getScope(), "receiveMessage", msg ); }

Bさん

public function recieveMessage(msg:String):void { …; }

public function recieveMessage(msg:String):void { …; }



14



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


‐ビデオチャット‐

15


Red5

Aさん

接続

Bさん

映像公開

接続

映像受信



16


Red5

Aさん

var nc:NetConnection = new NetConnection(); nc.connect("rtmp://red5server/Red5Application");

var cam:Camera = Camera.get(); var mic:Microphone = Microphone.get();

Bさん

ns.play("red5BroadcastDemo", -1);

var ns:NetStream = new NetStream(nc); ns.attachVideo(cam); ns.attachAudio(mic); ns.publish("red5BroadcastDemo", "live");



17


Google Code でソースコード公開中

▶http://code.google.com/p/aiit-videochat/

⇨ クラゕントサド

▶Adobe Flex（Action Script）

PureMVC Framework

⇨ サーバーサド

▶Red5（Java）

⇨ その他

▶mixiゕプリ用ガジェット(XML)

▶ボット機能（GoogleAppEngine/Python）

ソースコード公開中

18


日本Red5ユーザ会

⇨ 2010年4月に発足

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

⇨ コンテンツはこれから充実

させていきます！

公式サト

⇨ http://www.red5.gr.jp/

19

日本Red5ユーザー会

日本Red5ユーザー会検索


OSC 2011 Tokyo/Spring で講演します

⇨ 3/5(土) 15:15 – 16:00 @早稲田大学

⇨ 「簡易電子会議室システムを作ってみよう」

⇨Red5+Flexで開発した例を交えてRed5を紹介

⇨システムのメージは次のページにて・・

OSC2011Tokyo/Spring 公式サト

⇨ http://www.ospn.org/osc2011-spring/

20

オープンソースカンファレンス

2011 Tokyo/Spring

osc2011 spring 検索


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

ユーザー

ユーザー

ユーザー

ユーザー

ユーザー

ユーザー

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

<RTMP>

<RTMP>

<RTMP>

<RTMP>

<RTMP>


Technology

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