GeekChimps


Red5サーバアプリケーション開発環境作成

投稿者: miizasa, カテゴリー: Red5, 環境構築

Red5のサーバ側アプリケーションを開発する環境を作成してみたいと思います。
今回はたまたまUbuntuですがWindowsでもMACでも基本的に同じなんで参考までに。。。

Red5インストール

http://code.google.com/p/red5/
から
0.9.1 Final のTarballをダウンロードしてきます。
※Windowsならインストーラをダウンロード
wget http://www.red5.org/downloads/0_9/red5-0.9.1.tar.gz
でもいいですけどね

んで適当なところに解凍して
解凍してできたred5-0.9.1フォルダの中のred5.shを実行すると起動できます。

http://localhost:5080/

にブラウザでアクセスするといつものRed5ページが表示されます。

Eclipseプラグインのインストール

前もってJEEDTとWDTプラグインをインストールしておきます。
「ヘルプ」→「新規ソフトウェアのインストール」
サイトの追加で

http://trac.red5.org/chrome/site/projects/red5plugin/update_0.2.x/

を追加してインストールします。

さて、インストールが終わったら
新規プロジェクト作成で「Web」→「動的Webプロジェクト」
で作成してTargetRuntimeと構成でRed5を選択します。

まぁ新規サーバも登録しておくと起動・停止などの操作ができて楽でしょう。

コメントする

こんなに簡単、Red5のインストール

投稿者: miizasa, カテゴリー: Red5, 環境構築

Red5のインストールが面倒だと考えてる人もいると思いますが、基本的にはJavaのアプリケーションなのでJavaの環境さえあれば簡単にできます。
また、クライアントでのRed5開発環境を構築するときに詳しく説明しようと思います。
WindowsやMACの場合にはインストーラが用意されていますが、そんなもの使わなくてもできます。
http://code.google.com/p/red5/
ここからtarballでもzipでも好きな方をダウンロードして展開
red5.shまたはred5.batを実行するだけ

短くてすみません。でも環境をつくるのにやることが少ないので。。。

コメントする

FlexでRed5を利用してライブストリーミング

投稿者: miizasa, カテゴリー: Flex, Red5

前回はRed5のoflaDemoを使って動画のストリーミング再生をやりましたが今回はライブストリーミングに挑戦します。とは言ってもカメラやマイクの使い方ぐらいで前回のプレイヤーとあまり変わりません。
実は受信側に至っては前回のプレイヤーがそのまま使えます。streamidだけ合わせるだけで利用できます。
LivePublisher.mxml(ライブパブリッシャー)

actionscript
< view plain text >
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" mouseOut="mouseOutHandler(event);" mouseChildren="true">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import flash.net.*;
  6.             import mx.controls.Alert;
  7.             import mx.core.UIComponent;
  8.  
  9.             // publicプロパティ===================================================================
  10.             public var streamid : String = "testlive";
  11.             public var protocols : String = "rtmp";    // rtmp rtmpt
  12.             public var host: String = "www.bamboo.mydns.jp";
  13.             public var videowidth : int = 320;
  14.             public var videoheight : int = 240;
  15.             public var publishtype : String = "live";     // live・record・append
  16.             public var fps: int = 30;     // 1~30
  17.             public var keyframe: int = 1;    // 1~48
  18.             public var quality : int = 90;    // 0~100
  19.  
  20.             [Bindable]
  21.             public var videoenable : Boolean = true;
  22.  
  23.             // privateプロパティ===================================================================
  24.             private var uiC : UIComponent = new UIComponent();
  25.             private var ncPub : NetConnection = new NetConnection();
  26.             private var ncView : NetConnection = new NetConnection();
  27.             private var nsPublish:NetStream;
  28.             private var nsPlay:NetStream;
  29.             private var videoURL : String;
  30.             private var mouseIn : Boolean;
  31.             private var ctrlvisible : Boolean;
  32.  
  33.             [Bindable]
  34.             private var isPlaying:Boolean = false;
  35.  
  36.             // pablicメソッド===================================================================
  37.             public function play():void{
  38.  
  39.                 // Viewer用NetConnectionのイベントリスナ設定
  40.                 ncView.addEventListener(NetStatusEvent.NET_STATUS, netViewStatusHandler);
  41.                 ncView.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
  42.                 ncView.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  43.  
  44.                 // パラメータチェック
  45.  
  46.                 // URL組み立て
  47.                 videoURL = protocols + "://" + host + "/oflaDemo";
  48.  
  49.                 ncView.connect(videoURL);
  50.  
  51.             }
  52.  
  53.             public function playstop():void {
  54.                 if (nsPlay) {
  55.                     nsPlay.close();
  56.                 }
  57.             }
  58.  
  59.             public function publish():void{
  60.  
  61.                 // パブリッシャ用NetConnectionのイベントリスナ設定
  62.                 ncPub.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
  63.                 ncPub.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
  64.                 ncPub.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  65.  
  66.                 // Viewer用NetConnectionのイベントリスナ設定
  67.                 ncView.addEventListener(NetStatusEvent.NET_STATUS, netViewStatusHandler);
  68.                 ncView.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
  69.                 ncView.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  70.  
  71.                 // パラメータチェック
  72.  
  73.  
  74.  
  75.                 // URL組み立て
  76.                 videoURL = protocols + "://" + host + "/oflaDemo";
  77.  
  78.                 //パブリッシャ用コネクション接続
  79.                 ncPub.connect(videoURL);
  80.  
  81.             }
  82.  
  83.             public function publishstop():void {
  84.                 if (nsPublish) {
  85.                     nsPublish.close();
  86.                 }
  87.             }
  88.  
  89.             // privateメソッド===================================================================
  90.             // パブリッシュ用NetStatusイベントハンドラ
  91.             private function netStatusHandler(event:NetStatusEvent):void{
  92.                 switch (event.info.code) {
  93.                     case "NetConnection.Connect.Success":
  94.                         //connectStream();
  95.                         startPublish(publishtype,streamid);
  96.                         break;
  97.                     case "NetStream.Play.StreamNotFound":
  98.                         trace("Stream not found: " + videoURL);
  99.                         break;
  100.                 }
  101.  
  102.             }
  103.             // Viewer用NetStatusイベントハンドラ
  104.             private function netViewStatusHandler(event:NetStatusEvent):void{
  105.                 switch (event.info.code) {
  106.                     case "NetConnection.Connect.Success":
  107.                         connectStream();
  108.                         break;
  109.                     case "NetStream.Play.StreamNotFound":
  110.                         trace("Stream not found: " + videoURL);
  111.                         break;
  112.                 }
  113.  
  114.             }
  115.  
  116.             private function securityErrorHandler(event:SecurityErrorEvent):void{
  117.                 trace("securityErrorHandler: " + event);
  118.             }
  119.  
  120.             private function asyncErrorHandler(event:AsyncErrorEvent):void{
  121.                 trace("asyncErrorHandler: " + event);
  122.             }
  123.  
  124.             private function netIOErrorHandler(event:AsyncErrorEvent):void{
  125.                 trace("netIOErrorHandler: " + event);
  126.             }
  127.  
  128.             //
  129.             private function connectStream():void{
  130.                 nsPlay = new NetStream(ncView);
  131.                 nsPlay.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
  132.                 nsPlay.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  133.  
  134.                 var video : Video = new Video(this.width, this.height);
  135.                 video.attachNetStream(nsPlay);
  136.  
  137.                 nsPlay.play(streamid);
  138.  
  139.                 uiC.addChild(video);
  140.                 uiC.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
  141.  
  142.                 this.addChild(uiC);
  143.                 this.setChildIndex(ctrl,1);
  144.  
  145.                 sndonly.visible = !(videoenable);
  146.  
  147.                 btnPlay.selected = true;
  148.                 isPlaying = true;
  149.  
  150.             }
  151.  
  152.  
  153.             public function startPublish( publishMode : String, streamName : String ) : void
  154.             {
  155.                 try
  156.                 {
  157.                     var camera :Camera = Camera.getCamera();
  158.                     var microphone :Microphone = Microphone.getMicrophone();;
  159.                     //
  160.                     if ( microphone != null || camera != null )
  161.                     {
  162.                         // close previous stream
  163.                         if ( nsPublish != null )
  164.                         {
  165.                             // 現在の配信をとめる
  166.                             nsPublish.close();
  167.  
  168.                         }
  169.                         // Setup NetStream for publishing.
  170.                         nsPublish = new NetStream( ncPub );
  171.                         //
  172.                         nsPublish.addEventListener( NetStatusEvent.NET_STATUS, netStatusHandler );
  173.                         nsPublish.addEventListener( IOErrorEvent.IO_ERROR, netIOErrorHandler );
  174.                         nsPublish.addEventListener( AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler );
  175.                         //
  176.                         //nsPublish.client = new CustomClient();
  177.  
  178.                         // attach devices to NetStream.
  179.                         if ( camera != null )
  180.                         {
  181.                             sndonly.visible = false;
  182.                             videoenable = true;
  183.                             // カメラ設定(フレーム・画質など)
  184.                             camera.setKeyFrameInterval( keyframe );
  185.                             camera.setMode( this.width, this.height, fps );
  186.                             camera.setQuality( 0, quality );
  187.                             nsPublish.attachCamera( camera );
  188.                         }
  189.                         else {
  190.                             //カメラなしの場合には、画像表示
  191.                             sndonly.visible = true;
  192.                             videoenable = false;
  193.  
  194.                         }
  195.  
  196.                         if ( microphone != null)
  197.                         {
  198.                             nsPublish.attachAudio( microphone );
  199.                         }
  200.  
  201.                         // Start publishing.
  202.                         nsPublish.publish( streamName, publishMode );
  203.  
  204.                         // ビューア接続
  205.                         ncView.connect(videoURL);
  206.  
  207.                     }
  208.                     else
  209.                     {
  210.                         trace( "Can't publish stream, no input device(s) selected");
  211.                     }
  212.                 }
  213.                 catch( e : ArgumentError )
  214.                 {
  215.                     // Invalid parameters
  216.                     switch ( e.errorID )
  217.                     {
  218.                         // NetStream object must be connected.
  219.                         case 2126 :
  220.                             //
  221.                             trace( "Can't publish stream, not connected to server");
  222.                             trace(  "Not connected to server");
  223.                             break;
  224.                         //
  225.                         default :
  226.                            //
  227.                            trace( e.toString() );
  228.                            break;
  229.                     }
  230.                 }
  231.             }
  232.  
  233.             private function mouseOverHandler(event:MouseEvent):void {
  234.                 ctrl.visible = true;
  235.                 mouseIn = true;
  236.                 ctrlvisible = true;
  237.             }
  238.  
  239.             private function childmouseOverHandler(event:MouseEvent):void {
  240.                 mouseIn = true;
  241.             }
  242.  
  243.             private function mouseOutHandler(event:MouseEvent):void {
  244.                 setTimer();
  245.                 mouseIn = false;
  246.             }
  247.  
  248.             private function setTimer():void {
  249.                 var stopTimer:Timer = new Timer(3000, 1);
  250.                 stopTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
  251.                 stopTimer.start();
  252.             }
  253.  
  254.             private function onTimerComplete(event:TimerEvent):void {
  255.                 if (mouseIn == false) {
  256.                     // 複数回処理しないためのチェック
  257.                     if (ctrl.visible == true) {
  258.                         // Effectによりコンポーネントのvisibleが設定されるのにDelayがあるので
  259.                         // さらなるチェック
  260.                         if (ctrlvisible == true) {
  261.                             ctrl.visible = false;
  262.                             ctrlvisible = false;
  263.                         }
  264.                     }
  265.                 }
  266.                 else {
  267.                     ctrl.visible = true;
  268.                     ctrlvisible = true;
  269.                 }
  270.             }
  271.  
  272.  
  273.         ]]>
  274.     </mx:Script>
  275.     <mx:Style>
  276.         .PlayStyle {
  277.             downSkin: Embed("../assets/play_right_g.JPG");
  278.             upSkin: Embed("../assets/play_right_b.JPG");
  279.             overSkin: Embed("../assets/play_right_y.JPG");
  280.             disabledSkin: Embed("../assets/play_right_w.JPG");
  281.             selectedDownSkin: Embed("../assets/tempStop_g.JPG");
  282.             selectedUpSkin: Embed("../assets/tempStop_b.JPG");
  283.             selectedOverSkin: Embed("../assets/tempStop_y.JPG");
  284.             selectedDisabledSkin: Embed("../assets/tempStop_w.JPG");
  285.         }
  286.         .StopStyle {
  287.             downSkin: Embed("../assets/stop_g.JPG");
  288.             upSkin: Embed("../assets/stop_b.JPG");
  289.             overSkin: Embed("../assets/stop_y.JPG");
  290.             disabledSkin: Embed("../assets/stop_w.JPG");
  291.             selectedDownSkin: Embed("../assets/stop_g.JPG");
  292.             selectedUpSkin: Embed("../assets/stop_b.JPG");
  293.             selectedOverSkin: Embed("../assets/stop_y.JPG");
  294.             selectedDisabledSkin: Embed("../assets/stop_w.JPG");
  295.         }
  296.     </mx:Style>
  297.  
  298.  
  299.     <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
  300.     <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  301.     <mx:WipeUp id="wipeIn" duration="1000"/>
  302.     <mx:WipeDown id="wipeOut" duration="1000"/>
  303.     <mx:Canvas id="ctrl" left="0" top="0" right="0" bottom="0" visible="false" showEffect="fadeIn" hideEffect="fadeOut" alpha="0.5">
  304.         <mx:VBox left="0" right="0" top="0" bottom="0">
  305.             <mx:HBox x="63" y="155" width="100%" verticalAlign="middle" horizontalAlign="center" height="50%" mouseOver="childmouseOverHandler(event);">
  306.                 <mx:Button label="閉じる"/>
  307.             </mx:HBox>
  308.             <mx:HBox x="63" y="155" width="100%" horizontalAlign="center" verticalAlign="middle" height="50%" >
  309.                 <mx:Button styleName="PlayStyle" toggle="true" id="btnPlay" selected="{isPlaying}" width="50" height="50" mouseOver="childmouseOverHandler(event);" />
  310.                 <mx:Button styleName="StopStyle" width="50" height="50" mouseOver="childmouseOverHandler(event);"/>
  311.             </mx:HBox>
  312.         </mx:VBox>
  313.     </mx:Canvas>
  314.     <mx:Image id="sndonly" left="0" top="0" bottom="0" right="0" source="@Embed('../assets/screen_sound_only.png')" visible="false" mouseOver="mouseOverHandler(event);"/>
  315.  
  316. </mx:Canvas>

んでは続いて毎度お馴染みの上っ面
red5live.mxml(上っ面)

actionscript
< view plain text >
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  backgroundColor="#FFFFFF" xmlns:ns1="*" creationComplete="init()">
  3.  
  4.     <mx:Label x="24" y="18" text="Publish"/>
  5.     <mx:Label x="309" y="18" text="View"/>
  6.     <mx:Button x="77" y="16" label="配信" click="pub.publish();"/>
  7.     <mx:Button x="346" y="16" label="受信" click="view.play();"/>
  8.     <ns1:LivePublisher id="pub"  x="24" y="44" width="320" height="240">
  9.     </ns1:LivePublisher>
  10.     <ns1:LivePublisher id="view" x="352" y="246" width="320" height="240" videoenable="{pub.videoenable}">
  11.     </ns1:LivePublisher>
  12.  
  13. </mx:Application>

完成したのがこれ

http://www.bamboo.mydns.jp/flex/red5live.swf

ビデオソースやマイクデバイスは先頭のやつを使ってしまっていますが
選択できるようにするといいですね。

コメント(1)

Red5のストリーミングクライアントをFlexでつくる

投稿者: miizasa, カテゴリー: Flex, Red5

前回インストールしたRed5からストリーミング再生するクライアントをFlexで作りたいと思います。
とは言っても、まぁそこらのクライアントとやり方は同じなのでちゃんとした解説しませんが
手順としては
NetConnectionでサーバに接続
NetStreamを作成
videoをNetStreamにアタッチして
NetStreamをPlay
こんな感じです。
早速、ソースの方を晒しちゃいます。
VideoPlayer.mxml(プレイヤー)

actionscript
< view plain text >
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" mouseOut="mouseOutHandler(event);" mouseChildren="true" creationComplete="init()">
  3.     <mx:Script>
  4.         <![CDATA[
  5. //          import jp.co.idac.dipiti.model.CustomClient;
  6.             import flash.net.*;
  7.             import mx.controls.Alert;
  8.             import mx.core.UIComponent;
  9.  
  10.  
  11.             public var streamid : String;
  12.             public var protocols : String = "rtmp";
  13.             public var host: String = "www.bamboo.mydns.jp";
  14.             public var videowidth : int = 320;
  15.             public var videoheight : int = 240;
  16.  
  17.             private var uiC : UIComponent = new UIComponent();
  18.             private var nc : NetConnection = new NetConnection();
  19.             [Bindable]
  20.             private var nsPlay:NetStream;
  21.             private var videoURL : String;
  22.             private var mouseIn : Boolean;
  23.             private var ctrlvisible : Boolean;
  24.  
  25.             [Bindable]
  26.             private var isPlaying:Boolean = false;
  27.  
  28.             [Bindable]
  29.             private var totalTime:Number;
  30.  
  31.             [Bindable]
  32.             private var nowTime:Number;
  33.  
  34.             private var timer:Timer;
  35.  
  36.  
  37.             private function init():void {
  38.                 timer = new Timer( 100, 0 );
  39.                 timer.addEventListener( TimerEvent.TIMER, onTimer );
  40.                 timer.start();
  41.  
  42.             }
  43.  
  44.             private function onTimer(event:TimerEvent):void {
  45.                 if (!nsPlay) return;
  46.  
  47.                 hsPlay.value = nsPlay.time;
  48.                 // 時間表示
  49.                 var min:int = nsPlay.time / 60;
  50.                 var sec:int = nsPlay.time % 60;
  51.                 var mins:String = min.toString();
  52.                 if (min < 10) mins = "0" + mins;
  53.                 var secs:String = sec.toString();
  54.                 if (sec < 10) secs = "0" + secs;
  55.                 lblTime.text = mins + ":" + secs;
  56.  
  57.             }
  58.  
  59.             private function formatTime(item:Date):String{
  60.                 return dateFormatter.format(item);
  61.             }
  62.             public function play():void{
  63.  
  64.                 nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
  65.                 nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
  66.                 nc.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  67.                 nc.client = this;
  68.  
  69.                 videoURL = protocols + "://" + host + "/oflaDemo";
  70.                 nc.connect(videoURL);
  71.  
  72.             }
  73.  
  74.             private function netStatusHandler(event:NetStatusEvent):void{
  75.                 switch (event.info.code) {
  76.                     case "NetConnection.Connect.Success":
  77.                         connectStream();
  78.                         break;
  79.                     case "NetStream.Play.StreamNotFound":
  80.                         trace("Stream not found: " + videoURL);
  81.                         break;
  82.                 }
  83.  
  84.             }
  85.  
  86.             private function securityErrorHandler(event:SecurityErrorEvent):void{
  87.                 trace("securityErrorHandler: " + event);
  88.             }
  89.  
  90.             private function asyncErrorHandler(event:AsyncErrorEvent):void{
  91.                 trace("asyncErrorHandler: " + event);
  92.             }
  93.  
  94.             private function connectStream():void{
  95.                 nsPlay = new NetStream(nc);
  96.                 nsPlay.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
  97.                 nsPlay.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  98.                 nsPlay.client = this;
  99.                 trace(this.width + ":" + this.height);
  100.                 var video : Video = new Video(this.width, this.height);
  101.                 video.attachNetStream(nsPlay);
  102.                 nsPlay.play(streamid);
  103.  
  104. //              nowTime = nsPlay.time;
  105.  
  106.                 uiC.addChild(video);
  107.                 uiC.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
  108.  
  109.                 this.addChild(uiC);
  110.                 this.setChildIndex(ctrl,1);
  111.  
  112.                 btnPlay.selected = true;
  113.                 isPlaying = true;
  114.  
  115.             }
  116.  
  117.             private function mouseOverHandler(event:MouseEvent):void {
  118.                 ctrl.visible = true;
  119.                 mouseIn = true;
  120.                 ctrlvisible = true;
  121.             }
  122.  
  123.             private function mouseOutHandler(event:MouseEvent):void {
  124.                 setTimer();
  125.                 mouseIn = false;
  126.             }
  127.  
  128.             private function childmouseOverHandler(event:MouseEvent):void {
  129.                 mouseIn = true;
  130.             }
  131.  
  132.             private function playClick():void{
  133.                 nsPlay.togglePause();
  134.                 isPlaying = !(isPlaying);
  135.             }
  136.  
  137.             private function stopClick():void{
  138.                 nsPlay.close();
  139.                 isPlaying = false;
  140.             }
  141.  
  142.             private function setTimer():void {
  143.                 var stopTimer:Timer = new Timer(3000, 1);
  144.                 stopTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
  145.                 stopTimer.start();
  146.             }
  147.  
  148.             private function onTimerComplete(event:TimerEvent):void {
  149.                 if (mouseIn == false) {
  150.                     // 複数回処理しないためのチェック
  151.                     if (ctrl.visible == true) {
  152.                         // Effectによりコンポーネントのvisibleが設定されるのにDelayがあるので
  153.                         // さらなるチェック
  154.                         if (ctrlvisible == true) {
  155.                             ctrl.visible = false;
  156.                             ctrlvisible = false;
  157.                         }
  158.                     }
  159.                 }
  160.                 else {
  161.                     ctrl.visible = true;
  162.                     ctrlvisible = true;
  163.                 }
  164.             }
  165.  
  166.             // コールバック関数定義
  167.             public function onMetaData(info:Object):void {
  168.                 trace("metadata: duration=" + info.duration + " width=" + info.width + " height=" + info.height + " framerate=" + info.framerate);
  169.                 // MetaDataをtraceして確認
  170.                 for (var ite:String in info) {
  171.                     trace(ite + " : " + info[ite]);
  172.                 }
  173.                 totalTime = info.duration;
  174.                 trace(totalTime);
  175.                 //hsPlay.maximum = info.duration;
  176.             }
  177.             public function onCuePoint(info:Object):void {
  178.                 trace("cuepoint: time=" + info.time + " name=" + info.name + " type=" + info.type);
  179.                 // MetaDataをtraceして確認
  180.                 for (var ite:String in info) {
  181.                     trace(ite + " : " + info[ite]);
  182.                 }
  183.                 nowTime = info.time;
  184.             }
  185.             public function onBWDone():void {
  186.                 trace("onBWDone ");
  187.                 // MetaDataをtraceして確認
  188.             }
  189.             public function onPlayStatus(info:Object):void {
  190.                 // MetaDataをtraceして確認
  191.                 for (var ite:String in info) {
  192.                     trace(ite + " : " + info[ite]);
  193.                 }
  194.             }
  195.  
  196.         ]]>
  197.     </mx:Script>
  198.     <mx:Style>
  199.         .PlayStyle {
  200.             downSkin: Embed("../assets/play.png");
  201.             upSkin: Embed("../assets/play.png");
  202.             overSkin: Embed("../assets/play.png");
  203.             disabledSkin: Embed("../assets/play.png");
  204.             selectedDownSkin: Embed("../assets/pause.png");
  205.             selectedUpSkin: Embed("../assets/pause.png");
  206.             selectedOverSkin: Embed("../assets/pause.png");
  207.             selectedDisabledSkin: Embed("../assets/pause.png");
  208.         }
  209.         .StopStyle {
  210.             downSkin: Embed("../assets/eject.png");
  211.             upSkin: Embed("../assets/eject.png");
  212.             overSkin: Embed("../assets/eject.png");
  213.             disabledSkin: Embed("../assets/eject.png");
  214.             selectedDownSkin: Embed("../assets/eject.png");
  215.             selectedUpSkin: Embed("../assets/eject.png");
  216.             selectedOverSkin: Embed("../assets/eject.png");
  217.             selectedDisabledSkin: Embed("../assets/eject.png");
  218.         }
  219.         .MinusStyle {
  220.             downSkin: Embed("../assets/minus.png");
  221.             upSkin: Embed("../assets/minus.png");
  222.             overSkin: Embed("../assets/minus.png");
  223.             disabledSkin: Embed("../assets/minus.png");
  224.             selectedDownSkin: Embed("../assets/minus.png");
  225.             selectedUpSkin: Embed("../assets/minus.png");
  226.             selectedOverSkin: Embed("../assets/minus.png");
  227.             selectedDisabledSkin: Embed("../assets/minus.png");
  228.         }
  229.         .PlusStyle {
  230.             downSkin: Embed("../assets/plus.png");
  231.             upSkin: Embed("../assets/plus.png");
  232.             overSkin: Embed("../assets/plus.png");
  233.             disabledSkin: Embed("../assets/plus.png");
  234.             selectedDownSkin: Embed("../assets/plus.png");
  235.             selectedUpSkin: Embed("../assets/plus.png");
  236.             selectedOverSkin: Embed("../assets/plus.png");
  237.             selectedDisabledSkin: Embed("../assets/plus.png");
  238.         }
  239.  
  240.     </mx:Style>
  241.  
  242.     <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
  243.     <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
  244.     <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  245.     <mx:WipeUp id="wipeIn" duration="1000"/>
  246.     <mx:WipeDown id="wipeOut" duration="1000"/>
  247.     <mx:Canvas id="ctrl" left="0" right="0" bottom="0" visible="true" showEffect="wipeIn" hideEffect="wipeOut" backgroundColor="#FFFFFF" alpha="0.5" height="30">
  248.         <mx:Button styleName="PlayStyle" toggle="true" id="btnPlay" selected="{isPlaying}" click="playClick();"  mouseOver="childmouseOverHandler(event);" left="3" verticalCenter="0" width="16" height="16"/>
  249.         <mx:Button styleName="StopStyle" click="stopClick();" mouseOver="childmouseOverHandler(event);" right="3" verticalCenter="0" width="16" height="16"/>
  250.         <mx:HSlider id="hsPlay" x="22.2" maximum="{totalTime}" value="{nowTime}" width="141" mouseOver="childmouseOverHandler(event);"  verticalCenter="0"/>
  251.         <mx:Button x="206" id="btnMinus" styleName="MinusStyle" mouseOver="childmouseOverHandler(event);" width="16" height="16" verticalCenter="0"/>
  252.         <mx:Button x="268" id="btnPlus" styleName="PlusStyle" mouseOver="childmouseOverHandler(event);"  width="16" height="16" verticalCenter="0"/>
  253.         <mx:Label x="222" y="2" text="volume" mouseOver="childmouseOverHandler(event);"/>
  254.         <mx:Label x="230" y="12" text="0.75" mouseOver="childmouseOverHandler(event);"/>
  255.         <mx:Label x="162" id="lblTime" text="" mouseOver="childmouseOverHandler(event);" verticalCenter="0"/>
  256.     </mx:Canvas>
  257.  
  258. </mx:Canvas>

movieupload.mxml(プレイヤーをのせてるだけの上っ面)

actionscript
< view plain text >
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  backgroundColor="#FFFFFF" xmlns:ns1="*" creationComplete="init()">
  3.  
  4.     <mx:TextInput x="10" y="115" id="txtvideoid" />
  5.     <mx:Button x="178" y="115" label="ロード" click="vid.play();"/>
  6.     <mx:Canvas x="265" y="10" width="324" height="200" cornerRadius="10" borderStyle="solid" alpha="1.0">
  7.         <ns1:VideoPlayer id="vid" streamid="{txtvideoid.text}" videoheight="240" videowidth="320" left="0" right="0" top="0" bottom="0" cornerRadius="10">
  8.         </ns1:VideoPlayer>
  9.     </mx:Canvas>
  10. </mx:Application>

実行するとこんな感じです。
http://www.bamboo.mydns.jp/flex/movieupload.swf

テキストの場所にデモについてる動画「avatar-vp6」とか入力してロードボタンとか押せば再生できます。
サーバー側の開発環境は、まだなのでデモアプリケーションのoflaDemoを利用していますが
oflaDemoだけでもいろいろできるので便利ですねぇ
プレイヤーのインターフェースが作成途中なのはナイショw

コメント(1)

CentOS 5.4にRed5 0.9.1 Finalをインストール

投稿者: miizasa, カテゴリー: Red5, 環境構築

以前、記事でもあげていたオープンソースのFMSクローンであるRed5も0.9.1が出ていたということで
久々にインストールしてみようと思います。昔インストールしたときは0.6.2だったからなぁ
結構変わっちゃってるんだろうなぁ

■Java 1.6 update18 インストール
Red5はJava製ですのでJavaの環境が必要になってきます。
今回はSunのJava6SE SDKをインストールします。

cd /usr/local/
wget http://cds.sun.com/is-bin/INTERSHOP.enfinity/WFS/CDS-CDS_Developer-Site/en_US/-/USD/VerifyItem-Start/jdk-6u18-linux-i586.bin?BundledLineItemUUID=bZ1IBe.m1CwAAAEnwrxijx5P&OrderID=04tIBe.m24kAAAEntbxijx5P&ProductID=6XdIBe.pudAAAAElYStRSbJV&FileName=/jdk-6u18-linux-i586.bin
mv ./jdk-6u18-linux-i586.bin\?AuthParam\=1267858174_75eff17e33bf45d320656f776f68edc2\&TicketId\=CJ0qhZTHlDSAx5LuWIwOAgA\=\&GroupName\=CDS\&FilePath\=%2FESD6%2FJSCDL%2Fjdk%2F6u18-b07%2Fjdk-6u18-linux-i586.bin\&File\=jdk-6u18-linux-i586.bin  ./jdk-6u18-linux-i586.bin
chmod +x ./jdk-6u18-linux-i586.bin
./jdk-6u18-linux-i586.bin
ln -s /usr/local/jdk1.6.0_18 /usr/local/java

■Apache Ant 1.8.0 インストール
ビルドツールAntはRed5やデモアプリケーションをコンパイルするのに利用します。
しかし、今回は必要ないかもしれません。

cd /usr/local/src
wget http://ftp.riken.jp/net/apache/ant/binaries/apache-ant-1.8.0-bin.tar.gz
tar -xvzf ./apache-ant-1.8.0-bin.tar.gz
cp -r apache-ant-1.8.0 /usr/local/.
ln -s /usr/local/apache-ant-1.8.0 /usr/local/ant

■JavaとAntの環境設定
環境変数にJavaとAntのパスを追加する

vi /etc/bashrc

————————————————–

export JAVA_HOME=/usr/local/java/
export ANT_HOME=/usr/local/ant
export PATH=$JAVA_HOME/bin:$ANT_HOME/bin:$PATH
export LESSCHARSET=utf-8

一度ログオンしなおしてenvで確認します

■Red5 インストール

cd /usr/local/src
wget http://www.red5.org/downloads/0_9/red5-0.9.1.tar.gz
tar -xvzf ./red5-0.9.1.tar.gz

解凍するだけでOKです
AntはRed5アプリケーションを書いたときに使います。
ということでインストールというよりも配置する場所にコピーします。

cp -r ./red5-0.9.1 /usr/local/

■Red5起動

/usr/local/red5-0.9.1/red5.sh &

ブラウザにて5080番ポートにアクセスします。

止めるときは

/usr/local/red5-0.9.1/red5-shutdown.sh

■デモアプリケーションのインストール
デモアプリケーションは0.7までは同梱されていたのですが
今回のバージョンでは入っていません。
動作確認のためにインストールしてみましょう。
5080番ポートにアクセスしたときにリンクがあったので
それをクリックしてみると

便利な世の中になったもんです。
これからインストールできちゃうみたいです。
oflaDemoを選択してinstallボタンをポチっとな
んでトップに戻ってみて
OFLA Demoを見てみると

接続ホストのところがlocalhostになってるので
環境に合わせてサーバのIPアドレスまたはホスト名に設定するです。
Red5開発用のEclipseプラグインがでてるようなので
今度は開発環境でも作ってみようかなぁ。。。

コメント(3)