ラベル red5 の投稿を表示しています。 すべての投稿を表示
ラベル red5 の投稿を表示しています。 すべての投稿を表示

2012年5月13日日曜日

[Red5] 録画ファイルの保存先とかを変更してみよ〜

クライアント側で撮っている動画をサーバ側に保存するとき、デフォルトだと
webapps/<MyAppName>/streams
に保存されるのだけれども、やっぱstreamsのところ変えたいよね。

ということで今回はこの保存ディレクトリ、録画ファイル名をカスタマイズする方法を。

2012年4月8日日曜日

[Red5] ApplicationAdapter エントリポイントのメモ

★ApplicationAdapterで定義されているメソッド
☆ApplicationAdapterの上位クラスで定義されているメソッド
●IStreamFilenameGeneratorで定義されているメソッド
呼び出される順番に記載、引数は一部未記載。

2012年4月4日水曜日

[Red5] SLF4j+logbackでログを出力してみたよ

またも1ヶ月ぶりのエントリとなります。週1ぐらいで書ければいいんですが。。。

しかし、アプリってやっぱログ出ないとまずいよね〜(何が?)。
なので、今回はログ出力のやり方を。

2012年2月28日火曜日

近況 2012年2月28日

前回エントリからしばらく空きました。
開発の方はこつこつとやってきて、やっと動画の録画と再生ができたところです。
課題がどんどん挙がってきますが、1つずつちぎっては投げていきたいです。

さて、今後書き予定のエントリは、

・Red5設定などの雑記
設定ファイルやリモートサーバへのアプリのデプロイとか。

・Red5を介したカメラ映像の録画と再生

・FlashDevelopプロジェクトのフォルダ構成

・FlexにおけるViewとLogicの分離
MXMLとActionScriptの役割分担、コードの書き方について。
MXMLにロジックをごちゃごちゃ書くのは好みではないので。

・Macで開発する場合のツール類
MercurialやFTPクライアント、画面キャプチャツールとか。
ただ、FlexはWinでやるほうが効率いいかも?

そういえばこのサイト、2012/1/10頃にスタートしてぼちぼち600PVぐらいです。
こんな文字だらけの内容をお読みいただいた皆様、ありがとうございます。
海外からアクセスされた皆様、日本語でごめんなさい。
リファラスパム業者の方々、めげずにがんばってください。

2012年2月8日水曜日

Mac mini(OSX 10.7.2)でRed5開発環境を構築する(1)

※他のRed5関連のエントリはこちら

Mac miniのメモリを増設したおかげでレスポンスが結構よくなったので、開発マシンとすべく、いろいろいじっております。
今回は、Win7でもやったRed5のサーバ側アプリ開発環境を構築してみた。

Red5のインスト
まず、Red5のサイトからdmgファイル(ディスクイメージファイル)をダウンロード。今回は、Red5 0.9.1 Final のOSXのリンクから。

ダウンロードしたdmgファイルをダブルクリック。
別ウィンドウに表示されたRed5の実行ファイルらしきものを「アプリケーション」フォルダにコピー。

これでおしまい。なんてこった。なんなんだMac。

Javaインストール状況の確認
ここでJavaのインストール状況を確認しておく。
ターミナルから"java -version"とすると確認できるが、一番最初に確認する場合は「Javaインストールします?」みたいなダイアログが出た。
ここはあがらわずインスト。
インスト後、もう一度上記コマンドを打つと無事にバージョン確認できた。
ちなみに1.6.0_29だった。

しかしMacすごいな。
Javaもantもsvnも最初から入ってる。

Red5、発進
さて、LaunchpadにRed5のアイコンが追加されているはず。
これをポチっとするとDoc上でRed5アイコンがぴょんぴょん飛び跳ねて、しばらくするとおとなしくなる。
鼓動がおさまったらRed5サーバのフロントページを見てみよう。
http://localhost:5080/
うむ。動いておる。動いておるぞ(阿部サダ高階通憲中井貴一 平忠盛の口調で)

でも、これじゃあログとか動いてるとか見れなくてつまんないので、起動スクリプトから起動してみる。
とりあえず、Doc上のRed5は強制終了。

「アプリケーション」フォルダにRed5をインストールした場合は、下記フォルダに起動スクリプトred5.shがいるはず。
/Applications/Red5.app/Contents/Resources/Java
ターミナルを開いてこのフォルダまで移動。
だがしかし、このスクリプト、このままでは実行できない。
ls -lで見てみると分かろう。
ファイルのパーミッションが実行可能に設定されていない。
パーミッションは、、まあ適当に744あたりで。
chmod 744 ./red5.sh
これで実行できるようになった。
停止スクリプト red5-shutdown.sh も同じようにパーミッションを変更。

ところで、このフォルダの中にred5-debug.shがいないな。
作った方がいいんだろうか。

次は、Eclipseの設定だな。

2012年1月20日金曜日

Red5記事まとめ

Red5アプリケーション開発環境の整備(1) - Red5のインストール
Red5アプリケーション開発環境の整備(2) - Eclipseのインストールと設定
Red5アプリケーション開発環境の整備(3) - Flex開発環境

Mac mini(OSX 10.7.2)でRed5開発環境を構築する(1) 


Red5でHello World(1) - サーバ編
Red5でHello World(2) - クライアント編 その1
Red5でHello World(3) - クライアント編 その2

[Red5] SLF4j+logbackでログを出力してみたよ
[Red5] ApplicationAdapter エントリポイントのメモ
[Red5] 録画ファイルの保存先とかを変更してみよ〜

Red5でHello World(3) - クライアント編 その2

※他のRed5関連のエントリはこちら

※本稿は随時加筆修正していく可能性があります。
まずはこちらから。

FlashdevelopでのFlexアプリのコンパイルと実行のやり方
コンパイルはメニューから、「プロジェクト」→「プロジェクトのビルド」
実行は同じく「プロジェクト」→「プロジェクトをテスト」

せっかくなので、前回のMain.mxmlに画面部品をテキトーに追加して実行してみる。
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

   <mx:Label id="myLabel" x="0" y="0" width="100" height="25" fontSize="20" text="ラベル"/>
   <mx:Button id="myBtn" label="ボタン" />
   <mx:TextInput id="myTextInput" text="テキストインプット" />
   <mx:TextArea id="myTextArea" text="テキストエリア" width="200"/>

</mx:Application>

コンパイルすると出力ペインに下記のようなログが出力されます。
プロセスを実行中・・・
・・・Build succeeded
Done(0)
Build succeededが表示されていればたぶん大丈夫。
続いて実行するとFlash Player画面が開き、ボタンなどが表示されていると思います。

それではついにRed5と接続!

HelloTest.asに記載する処理
HelloTest.asに必要となるコードをわかりやすい(かどうかわからん)ブロックごとに分けて記載していきます。

必要になるするパッケージを定義
import flash.net.NetConnection;
import flash.events.NetStatusEvent;

HelloTestクラス内にメンバ変数を定義。
Red5の自作アプリのURIを表す文字列と、Red5との接続を制御するオブジェクト用。
private var _uri:String;
private var _nc:NetConnection;

Red5自作アプリのURIに接続する基本の流れ
コードA
_uri = new String("rtmp://(Red5のIPアドレス)/(自作アプリの名前)");

_nc = new NetConnection();
_nc.connect(_uri);
_nc.addEventListener(NetStatusEvent.NET_STATUS, _onNetStatus);
URIはポート番号5080は不要。入れるとうまく動かない。
3行目でNetConnectionオブジェクトを生成、4行目でRed5サーバへ接続。
この後、5行目でイベントリスナを登録している。
イベント発生時に呼ばれるメソッド"_onNetStatus"をコーディングする必要あり。
このメソッドはRed5との接続時、および切断時に呼ばれる。
引数のイベントオブジェクト内の情報から接続成功、切断、失敗、拒否が判別でき、状況に応じた処理を書くことができる。
//Red5接続、切断時に実行される
private function _onNetStatus(evt:NetStatusEvent):void
{
   switch (evt.info.code)
   {
      case "NetConnection.Connect.Success": 
         trace("connect success");
         break;
      case "NetConnection.Connect.Closed": 
         trace("connect Closed");
         break;
      case "NetConnection.Connect.Failed": 
         trace("connect Failed");
         break;
      case "NetConnection.Connect.Rejected": 
         trace("connect Rejected");
         break;
      default: 
         trace("何か起こった?");
   }
}

ここまでがRed5接続の基本的な流れ。
これに、サーバ編で作成したRed5サーバ側メソッドを呼び出すコードを追記していく。

必要になるパッケージを定義
import flash.net.Responder;

サーバ側メソッドを呼び出した結果を格納するメンバ変数をHelloTestクラス内に追加
private var _respose:Responder;

以下、サーバ側メソッド呼び出しの基本的な流れ。例えば、サーバ接続処理後に記載、または実行されるようにする。
コードB
_respose = new Responder(_success, _stat);
_nc.call("hello", _respose, txt);
1行目はResponderオブジェクトの生成、2行目でRed5サーバ側の"hello"という名前のメソッドを呼び出している。callメソッドの第3引数はサーバ側へ渡す情報。今回はString。
Responderのコンストラクタで引数としているイベントメソッド"_success"、および"_stat"をコーディングする必要あり。
//サーバ側メソッド呼び出し成功時に実行される
private function _success(result:Object):void
{
   trace("メソッド呼び出し成功");
   trace(result);
}

//サーバ側メソッド呼び出し失敗時に実行される
private function _stat(status:Object):void
{
   trace("ステータス");
   for (var key:String in status)
   {
      trace("key = " + key + " / value = " + status[key]);
   }
}

ついでにコネクション切断の流れ
コードC
_nc.close();
_nc = null;


以上、Red5との接続、メソッド呼び出し、切断の本筋は数行で書けます。
どちらかというと、イベントハンドラ諸々を書くのがめんどうです。

お手軽にメソッド呼び出しを試したい場合は、コードA、コードBをHelloTextクラスのinitializeメソッドに書き、必要なパッケージ、メンバ変数、イベント発生時のメソッドもつければ完成。
Flexアプリ起動時に1回だけサーバ側メソッドが呼ばれます。ちなみに、コードA、Bコードの後にCを書くとうまく動きません。(挙動は要調査)

画面上のボタンなどから接続やメソッド呼び出しを個別に実行したい場合は、コードA、B、Cを独立したメソッドとして実装し、ボタン押下時に呼び出すようにするとよいかと思います。
また、Null対策などを施して堅牢にする営みを忘れずに。

次回は動画の再生を予定。

参考:最も安易なHelloTest.as
package
{
    import mx.core.IMXMLObject;
    import flash.net.NetConnection;
    import flash.events.NetStatusEvent;
    import flash.net.Responder;
    
    public class HelloTest implements IMXMLObject
    {
        private var _uri:String;
        private var _nc:NetConnection;
        private var _respose:Responder;
        
        private var txt:String;
        
        public function HelloTest()
        {
        
        }
        
        /* INTERFACE mx.core.IMXMLObject */
        
        public function initialized(document:Object, id:String):void
        {
            _nc = new NetConnection();
            _nc.connect(_uri);
            _nc.addEventListener(NetStatusEvent.NET_STATUS, _onNetStatus);
            
            _respose = new Responder(_success, _stat);
            txt = new String("hogehoge");
            _nc.call("hello", _respose, txt);
        
        }
        
        //Red5接続、切断時に実行される
        private function _onNetStatus(evt:NetStatusEvent):void
        {
            switch (evt.info.code)
            {
                case "NetConnection.Connect.Success": 
                    trace("connect success");
                    break;
                case "NetConnection.Connect.Closed": 
                    trace("connect Closed");
                    break;
                case "NetConnection.Connect.Failed": 
                    trace("connect Failed");
                    break;
                case "NetConnection.Connect.Rejected": 
                    trace("connect Rejected");
                    break;
                default: 
                    trace("何か起こった?");
            }
        }
        
        //サーバ側メソッド呼び出し成功時に実行される
        private function _success(result:Object):void
        {
            trace("メソッド呼び出し成功");
            trace(result);
        }
        
        //サーバ側メソッド呼び出し失敗時に実行される
        private function _stat(status:Object):void
        {
            trace("ステータス");
            for (var key:String in status)
            {
                trace("key = " + key + " / value = " + status[key]);
            }
        }
    }

}


[参考サイト]
そにらぼ » Blog Archive » [Red5入門コース第3回]サンプルアプリケーションの作成
※他にも参考にしたサイトがありますが、失念しています。判明次第追記します。

2012年1月18日水曜日

Red5でHello World(2) - クライアント編 その1

※他のRed5関連のエントリはこちら

あぁ、クライアント側書くの、気が重い。気が重いよ~。

Flexプロジェクト、Main.mxmlの作成
以前インストールしたFlashDevelopにて、
メニューより「プロジェクト」→「新規プロジェクト」

NewProject画面で、
"Flex 3 Project"を選択。"名前"、"場所"は適当に。パッケージはブランクでもOK。
"プロジェクトフォルダーを作成する"は、まあチェックしときましょう。
これで「OK」をクリック

3ペインで右ペイン(プロジェクトペイン)に、"bin"、"lib"、"src"フォルダが作成されており、src配下にMain.mxmlが自動生成されてます。
このMain.mxmlをダブルクリックすると、左ペインにソースが表示されます。

Main.mxml(自動生成直後)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
</mx:Application>

このMXMLファイルにRed5との接続処理などをがりがり書いていってもいいのですが、ここは知ったげにViewとLogicの分離を考慮してコードを書いていこうかと思います。
つまり、MXMLにはView(画面、ユーザインターフェース)、これとは別のActionScriptにLogic(処理)を受け持たせるということです。
さて、次はActionScriptのファイルを作ります。

HelloTest.asの作成
プロジェクトペインの"src"を右クリック→「新規作成」→「New Class...」

New ActionScript Class画面にて、
パッケージ名はとりあえずブランクでOK
修飾子は、"public"を選択
名前は適当でOKですが、ここは安易に"HelloTest"としました。
インターフェースには、
mx.core.IMXMLObject
を指定し、"インターフェースに合わせたメソッドを自動生成"をチェックし、「OK」をクリック

これで、HelloTest.asファイルが作成されます。

HelloTest.as(自動生成直後)
package  
{
 import mx.core.IMXMLObject;
 
 /**
  * ...
  * @author handatec
  */
 public class HelloTest implements IMXMLObject 
 {
  
  public function HelloTest() 
  {
   
  }
  
  /* INTERFACE mx.core.IMXMLObject */
  
  public function initialized(document:Object, id:String):void 
  {
   
  }
  
 }

}


これでベースができました。
次回はこれらをベースにRed5接続、メソッド呼び出し、切断処理などを書いていきます。

2012年1月12日木曜日

Red5でHello World(1) - サーバ編

※他のRed5関連のエントリはこちら

FlexアプリからRTMPでRed5側のメソッドを呼び出し、実行結果をFlexに返す、という超簡単なプログラムを作ってみよう。
まずはRed5(サーバ)側から。

とっかかり、何もわからんが、やるべきことは

  1. "Hellow, World."という文字列を返すメソッドを含んだクラスを作る。
  2. 作成したクラスをRed5へ配置し、動くようにする。

に違いない。ということでやってみる。


Eclipseでのプロジェクトの作成、Red5サーバーの設定
せっかくEclipseのRed5Pluginをインストールしているので、これを使って参考サイトを見ながらプロジェクト作成からやってみよう。

  • Eclipseのメニューから、「ファイル」→「新規」→「動的Webプロジェクト(Dynamic Web Project)」で新規プロジェクトを作成。プロジェクト名は適当でOK。
  • 一番最初にプロジェクトを作成するときは、ターゲット・ラインタイムが<None>になっているはずなので、「新規ランタイム」ボタンをポチる。
  • 新規サーバ・ランタイム環境の画面が表示されるので、フィルターに"Red5"と入力してみる。 Red5Plugin がちゃんとインストされていれば"Red5 Server Runtime"が選択できるはず。
  • JREに1.6 、Runtime Directoryにred5.jarが格納されているフォルダ(Red5にインストールフォルダ)を指定して、"完了"ボタンをポチる。
  • あとは適当に完了ボタン押下。

これでプロジェクトができた。
あと、「サーバ」タブでサーバ定義しておこう。

  • 右クリック→「新規」→「サーバー」
  • サーバータイプに"Red5 Server Runtime"を選択。「サーバーのホスト名」はlocalhostかIPアドレスかな。サーバ名は適当。たぶん自動で作成されるのでそのまま使った。サーバー・ランタイム環境も "Red5 Server Runtime"。これで「次へ」
  • (ここ重要)"Auto Deploy Directory"にRed5インストールフォルダ配下の"webapps"を指定。"Start Script"と"Stop Script"は、これまたインストールフォルダにある"red5-debug.bat"、"red5-shutdown.bat"を指定。サーバ・ポート、デバッグ・ポートはデフォルトの5080、87787のまま(ちなみにこの2つのバッチファイルはそのままだとうまく動かなかったので書き換えてしまった)。これで「次へ」。
  • 追加および除去の画面が表示される。さっき作ったプロジェクトが使用可能欄に表示されているはずなので、これを選択して「追加」ボタンをポチる。これで「完了」
これで、Eclipse上からRed5の開始、停止、作成アプリのデプロイまでできるようになるようだ。Tomcatプラグインと同じような感じ。

[参考サイト]
Creating Red5 Projects with Red5 Plugin


Applicationクラスとメソッドの作成
ネットでいろいろ調べてみると、どうやら
org.red5.server.adapter.ApplicationAdapter
を継承したクラスを作成して、そこに適当にメソッドを実装すればいいらしいことが判明。
さっき作ったプロジェクトの"Java Resources"→"src"に適当にパッケージ作って、そこにJavaクラスを作成する。
クラス、メソッドは下記参考サイトのものをそのまんま書きました。
作成したクラス名は"Application"としたけど、もしかしたらなんでもOKかな。

[参考サイト]
[Red5入門コース第3回]サンプルアプリケーションの作成



作成したアプリケーションのRed5へのデプロイ
Red5ってなんかTomcatっぽいし(2012/2/26追記 Jettyがベースのようですね)、インストールフォルダに"webapps"ってフォルダあるから、たぶんこのこの中に自作アプリ用のフォルダ、WEB-INFとかフォルダ作って、WEB-INFの中にディプロイメントディスクリプタ(構成情報ファイル)とか書いとけば動くんじゃない?と、なんとなく思うわけだ。
またまた得意のネットで調べてみると、どうやら次の3つのファイルが必要になるみたい。
  • red5-web.properties
  • red5-web.xml
  • web.xml
web.xmlはまあ普通として、他の2つはRed5独自っぽいよね。
0から手書きは面倒なので、下記参考サイトをガン見して3つのファイルを作る。
  1. Red5にインストールしたデモSOSapmleのフォルダ(webapps/SOSample/WEB-INF)にあるred5-web.properties、red5-web.xmlの2つのファイルをコピって、Eclipseのプロジェクトの"WebContent"→"WEB-INF"にペーストして元を作る。 web.xmlはもともとプロジェクト作成時に自動生成されているものを利用する。
  2. 各3つのファイルをEclipse上で開いて自分のアプリ用に修正、追記する。
     red5-web.properties・・・コンテキスト・パスを修正(必要があればバーチャルホストも)
     red5-web.xml・・・beanタグのid="web.handler"のclassを、自作のApplicationクラスのフルパスに修正
     web.xml・・・context-paramタグ、webAppRootKeyを追記

ここまでやってやっとデプロイできそう。

デプロイはRed5Pluginを使って実施。
さっき作った"サーバー"を上を、 右クリック→「公開」
これで、webappsフォルダに自分のアプリケーション用のフォルダが作成され、必要なファイルが適切なフォルダに配置されるのだ。

ここで、Red5を起動させて変なエラーがでないか確認してみよう。
"サーバー"を上を右クリック→「開始」とするとコンソールタブに切り替わり、Red5の起動ログが出力されていく。この中に、
[INFO] [Launcher:/(自作アプリの名前)]・・・
みたいなログが表示されていれば無事にデプロイされている、はず。
ちなみに、停止するには、"サーバー"を上を右クリック→「停止」。

[参考サイト]
red5を使ってライブストリーミングアプリケーションをつくる


Red5サーバ側はここまで。
次回はFlex側じゃー!

2012年1月10日火曜日

Red5アプリケーション開発環境の整備(3) - Flex開発環境


クライアント側はFlash(Flex)となるのでFlashの開発環境が必要。
Flexの開発には何通りかある模様。
  1. Adobe Flash Builderを利用する。
  2. Flex SDKをインストールし、テキストエディタでガリガリ書く。
  3. FlashDevelopを利用する。
Adobe Flash Builder
製品版は85,000円也。試用版として無料で利用できる期間がある。
ダウンロードにAdobe IDが必要。作成しましょう。
サイズが大きい(1GB近くある)。
たぶん便利なので、お金がある人はこちら。
[参考サイト]

Flex SDK+テキストエディタ
めんどくさそうなので却下。

FlashDevelop
フリーのFlash統合開発環境。
てきとうにコーディングしていても補完候補やバルーンヘルプが出てきて楽。コンパイルもボタンひとつ。
導入したバージョン(4.0.0 RC3)ではFlex SDKがインストーラに同梱されているので、別途導入する必要なし。
[参考サイト]

というわけで、取り急ぎFlashDevelopを使って開発することにした。
インストールは上記の本家サイトからインストーラをダウンロードしてダブルクリックするだけ。
なお、.Net2.0が必要となるみたいなので、入ってない場合は事前にインストール要。

環境構築はこれでおしまい。
次はRed5でHello, Worldだ。

Red5アプリケーション開発環境の整備(2) - Eclipseのインストールと設定


さて、Red5アプリ開発、サーバ側はJavaでの開発になるので、Eclipseを使うことにしよう。

Eclipseのインストール、日本語化
Eclipseはしばらく見ないうちにずいぶんバージョンアップしたようだ。
インストールしたバージョンはIndigo (3.7.1) 。
後でRed5 IDE Pluginも入れるのだが、サイトの説明(参考サイト)によると、
You must use the JEE distribution of Eclipse. The standard Java distribution will not work.
とのことなのでEclipseダウンロードサイトにて「Eclipse IDE for Java EE Developers」を選択。
ダウンロードしたzipファイルを適当なフォルダに展開して終了。
日本語化はおなじみのPleiadesで実施。
SubversionクライアントとしてSubversiveを使いたいので、Eclipseマーケットプレース(こんなのできたのか!)から
「Subversive-SVNチーム・プロバイダー」もインストール。

Red5 IDE Pluginのインストール
通常プラグインをインストールする方法と同じく、「新規ソフトウェアのインストール」からプラグインのサイトを指定してインストール。
サイトのアドレスは下記参考サイトに記載されています。
表示されたリストから「Red5 Feature」を選択して何事もなくインストール完了。
[参考サイト]

Red5アプリケーション開発環境の整備(1) - Red5のインストール


とあるアプリケーションを作りたいと思い立ちましたが、それには動画のストリーミング配信が必要でした。
AdobeのFlash Media Serverを導入できればいいのですが、製品版115,500円と貧乏人の私には手がでません。
そこで、オープンソースのRed5というFlashサーバを利用することにしました。
[参考サイト]

Red5のインストール
Windows7 Home Premium Editionにインストール。
動作にはJava6が必要とのことなので、未導入の場合はOracleのサイト(もうSunじゃないのね)からあらかじめインストール。
導入したRed5のバージョン(Red5 0.9.1 Final)では、インストール時にIPアドレスとポート番号を入力する必要がありました。
当方、家庭内ネットワークを構築しているので、インストールマシンのIPアドレス、ポート番号は定番らしい5080を設定しました。
(たぶん後から設定変更できるんじゃないかと思います)
インストールした際にWinのサービスに登録され、自動起動に設定されますが、開発時は頻繁に停止、再起動するはずですので、サービスの設定は手動に変更しました。
また、インストールフォルダにあるred5-shutdown.batとred5-debug.batはそのままだとうまく動かなかったので、書き換え。
インストールされたものを眺めると、どうやらTomcatをベースにSpringやらなにやらでカスタマイズしてFlashサーバにしているようです。
[参考サイト]

Red5の起動、そしてデモで遊ぶ
インストールフォルダにあるred5.batをコマンドプロンプトからたたくと起動します。
起動後、ブラウザからhttp://(IPアドレス):5080/にアクセスするとトップ画面が現れます。
デモのインストールと遊び方は下記サイトを参考に(ちょっと画面構成等が異なりますが)。
OFLA Demo、Publisher、Shared Ballの3つのデモの説明があります。動画配信もいいですが、個人的Shared Ballがおもしろいと思いました。
[参考サイト]