FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Red5 Sample MacBookAir OSX10.6

ちょいと訳あって、ライブ配信のシステムの構築を目指しています。

ライブ配信のシステムをぐぐってみたところ、Red5というのが有名なようです。OSSで無料で使えるということで、これで試しにやってみようと思います。

Red5というのは、Flashのストリーミングサーバで、あるクライアントのFlashから送られてきた動画や音楽データなどを別のクライアントがFlashを通して見ることが出来るというものらしいです。Red5自体がJavaで書かれているため、少しくらいの拡張だったら自力で出来そうな気がしています。

とりあえず、手元にあるMacBookAirでインストールからサンプルコードを動かすところまでやってみました。
1.Red5のインストール
Red5のサイトにあるdmgファイルは起動できなかったので、ソースからビルドしました。
$svn checkout http://red5.googlecode.com/svn/java/server/trunk/ red5-read-only
$cd red5-read-only
$ant clean dist
これで、red5-read-only/dist下にRed5がインストールされます。

参考サイト:http://wdash.net/?p=397

2.olfaDemoのインストール
まずRed5を起動します。
$cd red5-read-only/dist
$sh red5.sh
次にhttp://localhost:5080/にアクセスします。Red5はデフォルトでポート5080で起動しています。
アクセスしたサイトの中程に"Install a ready-made application"とあるので、そこのリンク先からolfaDemoをインストールします。dist/webapps下にインストールされます。

参考サイト:http://www29.atwiki.jp/red5server/pages/15.html

3.サンプルプログラムの作成
Flashでサンプルプログラムを作成します。
FlashのコンパイラはFlexSDK3.4を使いました。多分何でもいけると思います。
ビルドの仕方は、以下のような感じです。
${flex_sdk_3.4.1.10084}/bin/mxmlc ./MyStreaming.mxml -output ./MyStreaming.swf
${flex_sdk_3.4.1.10084}/bin/mxmlc ./MyStreamingPlayer.mxml -output ./MyStreamingPlayer.swf
CustomClient.asはこの2つのプログラムをビルドする際に、自動的に読み込まれるため、特に何もする必要はないです。同じフォルダ内に入れておかないと読み込んでくれなかったと思います。

以下、参考サイト様に載っていたソースコードです。
MyStreaming.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="init()"
backgroundAlpha="1" backgroundColor="0xffffff">
<mx:Script>
<![CDATA[

private var nc:NetConnection;
private var ns:NetStream;
private var cam:Camera;
private var mic:Microphone;
private function init():void{
nc = new NetConnection();
nc.client = new CustomClient();
nc.connect("rtmp://localhost/oflaDemo");
nc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatus);
nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR,onSecurityError);
setupCameraMic();
}

private function onNetStatus(evt:NetStatusEvent):void {
//trace( "onNetstatus" );
switch(evt.info.code) {
case "NetConnection.Connect.Success":
ns = new NetStream( nc );
trace("Success");
break;
case "NetConnection.Connect.Closed":
trace("Closed");
break;
case "NetConnection.Connect.Failed":
trace("Failed");
break;
case "NetConnection.Connect.Rejected":
trace("Rejected");
break;
default:
}
}
private function onSecurityError(evt:SecurityErrorEvent):void {
trace("Security Error");
}

private function broadcastClick():void{
ns.attachCamera(cam);
ns.attachAudio(mic);
//ns.publish( "red5BroadcastDemo" , "record" );
ns.publish( "red5BroadcastDemo" , "live" );
playButton.enabled = false;
stopButton.enabled = true;
}

private function stopClick():void{
ns.close();
playButton.enabled = true;
stopButton.enabled = false;
}

private function setupCameraMic():void{
cam = Camera.getCamera();
cam.setMode(320, 240, 30);
cam.setQuality(0,90);
mic = Microphone.getMicrophone();
mic.rate = 44;
if(cam != null) {
videoContainer.attachCamera(cam);
}
}
]]>
</mx:Script>
<mx:Canvas x="42" y="27" width="338" height="260"
backgroundAlpha="0.5" backgroundColor="0xffffff"
dropShadowColor="0x000000" dropShadowEnabled="true"
cornerRadius="10" borderColor="0xffccff" borderStyle="solid" borderThickness="3"
>
<mx:VideoDisplay id="videoContainer" x="6" y="7" width="320" height="240"/>
</mx:Canvas>
<mx:Canvas x="216" y="304" width="164" height="44"
backgroundAlpha="0.5" backgroundColor="0xffffff"
dropShadowColor="0x000000" dropShadowEnabled="true"
cornerRadius="10" borderColor="0xffccff" borderStyle="solid" borderThickness="3"
>
<mx:Button id="playButton" x="9" y="8" label="broadcast" click="broadcastClick()"/>
<mx:Button id="stopButton" x="100" y="8" label="stop" click="stopClick()" enabled="false"/>
</mx:Canvas>

</mx:Application>


MyStreamingPlayer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundAlpha="1" backgroundColor="0xffffff"
creationComplete="init()" xmlns:media="flash.media.*">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;

private var nc:NetConnection;
private var ns:NetStream;
private var cam:Camera;
private var mic:Microphone;
private function init():void{
nc = new NetConnection();
nc.client = new CustomClient();
nc.connect("rtmp://localhost/oflaDemo");
nc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatus);
nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR,onSecurityError);

}

private function onNetStatus(evt:NetStatusEvent):void {
//trace( "onNetstatus" );
switch(evt.info.code) {
case "NetConnection.Connect.Success":
setupCameraMic();
trace("Success");
break;
case "NetConnection.Connect.Closed":
trace("Closed");
break;
case "NetConnection.Connect.Failed":
trace("Failed");
break;
case "NetConnection.Connect.Rejected":
trace("Rejected");
break;
default:
}
}
private function onSecurityError(evt:SecurityErrorEvent):void {
trace("Security Error");
}

private function setupCameraMic():void{
ns = new NetStream( nc );
ns.client = new CustomClient();
var video:Video = new Video();
video.attachNetStream(ns);
ns.play("red5BroadcastDemo" , -1 );
myVideoContainer.addChild(video);


}
private function onMetaData(data:Object):void{
}

]]>
</mx:Script>
<media:Video id="myVideo" width="320" height="240"/>
<mx:Canvas x="33" y="40" width="342" height="269"
backgroundAlpha="0.5" backgroundColor="0xffffff"
dropShadowColor="0x000000" dropShadowEnabled="true"
cornerRadius="10" borderColor="0xffccff" borderStyle="solid" borderThickness="3"
>
<mx:VideoDisplay id="myVideoContainer" width="320" height="240" x="8" y="10"/>
</mx:Canvas>
</mx:Application>


CustomClient.as

package {
public class CustomClient {
/**
* onBWDone イベントハンドラ関数
* @return void
*/
public function onBWDone():void {
trace("onBWDone");
}
/**
* onMetaData イベントハンドラ関数
* @param Object infoObj
* @return void
*/
public function onMetaData(infoObj:Object):void {
trace("onMetaData");
}
/**
* onPlayStatus イベントハンドラ関数
* @param Object infoObj
* @return void
*/
public function onPlayStatus(infoObj:Object):void {
trace("playStatus");
}
}
}


参考サイト:http://d.hatena.ne.jp/haru-komugi/20080922/1222076172
参考サイト:http://dev.convexstyle.net/2008/03/h264_flash_media_server_3_stre.html

4.サンプルプログラムの実行
Red5を起動した状態で、サンプルプログラムを実行すれば動きます。
swfファイルはブラウザにD&Dしてあげれば実行できます。
MyStreaming.swfの方でbroadcastボタンをクリックした後、MyStreamingPlayer.swfを開いて映像が流れていれば成功です。

・その他
はじめ、olfaDemoを入れてなかったためにこのサンプルプログラムがうまく動かず、結構デバッグのログを読みました。以下Flashのデバッグの仕方の参考リンク。

・Flashのデバッグ版はこちら。
http://www.adobe.com/jp/support/flashplayer/downloads.html

・Flashのtraceをログに出力する方法。
http://d.hatena.ne.jp/kasahi/20070531/1180630084

コメントの投稿

管理者にだけ表示を許可する

プロフィール

sin

ニックネーム:sin

趣味でプログラムの作成などをしています。

Google+1
最新記事
カテゴリ
検索フォーム
リンク
最新コメント
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。