tag:blogger.com,1999:blog-31892714331307245882024-02-19T16:03:56.077+09:00red5's manualRed5マニュアル : オープンソースFlashサーバ「Red5」についてSeiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.comBlogger15125tag:blogger.com,1999:blog-3189271433130724588.post-66644664155451910392012-02-08T16:20:00.000+09:002012-02-08T22:07:44.360+09:00Red5 と ActionScript で簡単なお絵かきアプリを作るRed5 と ActionScript で簡単なお絵かきアプリを作ってみました。<br />
<br />
<a name='more'></a><div>説明は以下の流れで行います。 <br />
<blockquote><ul><li><a href="#first">はじめに</a></li>
<li><a href="#finished-products">完成品</a></li>
<li><a href="#setup">環境構成</a></li>
<li><a href="#app-outline">アプリの概要を図で説明</a></li>
<li><a href="#app-outline2">アプリの基本的な動き</a></li>
<li><a href="#html">クライアントサイドのソース - HTML ファイル</a></li>
<li><a href="#as">クライアントサイドのソース - ActionScript ファイル</a></li>
<li><a href="#end">おわり</a></li>
<li><a href="#reference">参考記事</a></li>
</ul></blockquote></div><div><a name="first"></a><br />
<h3 class="mds">はじめに</h3><p>今回制作したアプリのソースは以下のリンクからダウンロードできます。<br />
<a href="https://docs.google.com/open?id=0B_eBo1GUPuVuM2FlNTdkYjQtZTMwZS00Y2U4LThhNGQtM2NmNGRhNDUxMTYz" target="_blank">ファイルをダウンロード</a></p></div><div><a name="finished-products"></a><br />
<h3 class="mds">完成品</h3><p>今回作成するアプリの完成品の画像を以下に載せます。下記の画像はユーザ 2 人がアプリにアクセスしたときのものです。<br />
ユーザ同士のブラウザは同期しています。例えば 手前のブラウザにマウスで何か書くとその内容が奥のブラウザにも描画されます。またその逆も然りです。<br />
<br />
<a href="https://picasaweb.google.com/lh/photo/S3hakNg-mgjdYTmhbGoC4e--k1i9g38wtQE6eI7OXkk?feat=embedwebsite" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZbC-d6z3LPo5XdAeBqbh-6PMUsYoSTk-43dGD4oxMvDeaUf_ljwS0hK4sa3GvGV_NWW1PnhPDeF5Z2TWOjv2TWlx-iBuxiin95bDoJWQv90Q-tpaJh1SvQ93YIKr9_5nWV3eGN-xQX0jU/s800/wb-demo.png" height="448" width="560" /></a></p></div><div><a name="setup"></a><br />
<h3 class="mds">環境構成</h3><p>今回アプリ開発で使用した開発環境は以下になります。<br />
<br />
<h4 class="mds">サーバサイド</h4><ul><li>OS : Ubuntu 11.04 64bit</li>
<li>Java : OpenJDK6</li>
<li>Red5 : 0.9.1 Final</li>
</ul><br />
<h4 class="mds">クライアントサイド</h4><ul><li>開発 : Fhash Develop</li>
<li>使用言語 : HTML, ActionScript</li>
</ul></p></div><div><a name="app-outline"></a><br />
<h3 class="mds">アプリの概要を図で説明</h3><p>今回作るアプリの概要を簡単に図で説明します。<br />
<br />
<a href="https://picasaweb.google.com/lh/photo/Wq-2RLjrMaOMtUjS7maK_e--k1i9g38wtQE6eI7OXkk?feat=embedwebsite" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL1Jl3i_DjR4BCxSkNGv6rt7ZmlrFmu3k6Z3wal_AIC_eNxL_S4w6vghEwssYaZJd1Qk7OEK4-oaZUorCjG4b3At8VWMrag2hyLWAB2LsPnFUTfPzFST1HPc34pNz-0wL1P83a8P5px9fn/s800/wb.png" height="420" width="560" /></a><br />
<br />
上図のように黒い線が座標データや右クリックの押しているか押していないかのデータの流れです。青い線はここで開発したお絵かきアプリを Red5 サーバに置いた場合の html データの流れです。ちなみにローカル上でこのアプリを実行しても Red5 サーバさえ動いていれば問題なく動作します。<br />
</div><div><a name="app-outline2"></a><br />
<h3 class="mds">アプリの基本的な動き</h3>今回のアプリは Red5 のオブジェクト共有機能を使ったものです。Red5 サーバとの通信ができていない場合どんなにマウスを動かしても描画されません。<br />
<br />
<b>index.html</b> にアクセスすると、このページ内に埋め込んである <b>myball.swf</b> が実行されます。ブラウザA、ブラウザBともに同じ <b>index.html</b> にアクセスしてもらいそのアクセスしているブラウザ間で描画内容を共有する仕組みになっています。<br />
</p></div><div><a name="html"></a><br />
<h3 class="mds">クライアントサイドのソース - HTML ファイル</h3><p><b>■head要素</b><br />
<pre class="brush:[html];"><meta charset="utf-8"/>
<script src="js/swfobject.js"></script>
<script>
var flashvars = {
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "",
wmode: "direct" // can cause issues with FP settings & webcam
};
var attributes = {
id:"myball"
};
swfobject.embedSWF(
"myball.swf",
"altContent", "100%", "100%", "10.0.0",
"expressInstall.swf",
flashvars, params, attributes);
</script>
<style>
html, body { height:100%; overflow:hidden; }
body { margin:0; }
</style>
</pre><br />
<b>■body要素</b><br />
<pre class="brush:[html];"><div id="altContent">
<h1>myball</h1>
<p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p>
</div></pre><br />
swf ファイルを埋め込み表示するための html ファイルです。基本、開発環境である FlashDevelop が自動生成してくれるので気にすることはありません。<br />
</p></div><div><a name="as"></a><br />
<h3 class="mds">クライアントサイドのソース - ActionScript ファイル</h3><p>ソース以下に説明を加えます。<br />
<pre class="brush:[as3];">package
{
import flash.display.SimpleButton;
import flash.geom.ColorTransform;
import flash.geom.Point;
import flash.net.NetConnection;
import flash.net.SharedObject;
import flash.display.Sprite;
import flash.events.*;
import flash.system.Security;
import flash.system.SecurityPanel;
import flash.media.SoundTransform;
import flash.net.ObjectEncoding;
import flash.text.TextField;
import flash.utils.Timer;
[SWF(width = "800", height = "600", frameRate = "120", backgroundColor = "#ffffff")]
public class Main extends Sprite
{
private var nc:NetConnection; // サーバ情報用変数
private var dragging:String = new String(); // ドラッグ判定用変数
private var so:SharedObject; // オブジェクト共有用変数
private var line:Sprite = new Sprite();
private var point:Point = new Point();
private var s_point:Point = new Point();
private var net_point:Point = new Point();
private var net_dragging:String = new String();
private var net_move_flg:Boolean = new Boolean();
private var draw_color:uint = 0;
private var net_draw_color:uint = 0;
private var hit_timer:Timer = new Timer(100, 0);
private var hit_res:Boolean = new Boolean();
public function Main()
{
line = new Sprite();
line.graphics.lineStyle(10, draw_color);
// サーバ接続処理
nc = new NetConnection();
nc.client = new CustomClient();
nc.objectEncoding = ObjectEncoding.AMF0;
nc.connect("rtmp://Red5サーバのIP/oflaDemo");
nc.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
ColorPicker();
Eraser();
Canvas();
}
private function onNetStatus(evt:NetStatusEvent):void {
trace(evt.info.code);
switch(evt.info.code) {
case "NetConnection.Connect.Success":
so = SharedObject.getRemote("line", nc.uri, false);
if (so) {
so.addEventListener (SyncEvent.SYNC,
function(evt:SyncEvent):void
{
if (evt.target.data["linePosition"]) { // linePositionが空じゃなければ実行
net_dragging = so.data.linePosition.flg;
trace(net_dragging);
switch(net_dragging) {
case "mouseDown": // 押されているときの処理
net_point.x = so.data.linePosition.x;
net_point.y = so.data.linePosition.y;
net_draw_color = so.data.linePosition.color;
line.graphics.moveTo(net_point.x, net_point.y);
line.graphics.lineStyle(10, net_draw_color);
net_move_flg = true;
break;
case "mouseUp": // マウスが離されたときの処理
net_move_flg = false;
break;
case "mouseMove": // マウスが動いているときの処理
net_point.x = so.data.linePosition.x;
net_point.y = so.data.linePosition.y;
line.graphics.lineTo(net_point.x, net_point.y);
addChild(line);
break;
}
trace(net_move_flg);
}
so.setProperty("linePosition", { x:mouseX, y:mouseY, flg:dragging , color:draw_color} ); // オブジェクト共有する変数を指定
});
so.connect(nc);
}
break;
case "NetConnection.Connect.Closed":
break;
case "NetConnection.Connect.Faild":
break;
case "NetConnection.Connect.Rejected":
break;
default:
}
}
private function onMouseDown(ev:Event):void {
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
dragging = ev.type;
}
private function onMouseUp(ev:Event):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
dragging = ev.type;
}
private function onMouseMove(ev:Event):void {
point.x = mouseX;
point.y = mouseY;
dragging = ev.type;
}
private function ColorPicker():void {
var k:int = 256;
for (var i:int = 0 ; i < 512; i += 48) {
for (var j:int = 0; j < 512; j +=48 ) {
var spr:Sprite = new Sprite();
spr.graphics.beginFill(0xffffff, 1);
spr.graphics.drawRect(0, 0, 10, 10);
spr.graphics.endFill();
spr.buttonMode = true;
var trans:ColorTransform = new ColorTransform();
var red:uint = i << 16;
trans.color = red + green + blue;
var green:uint = j << 8;
var blue:uint = k;
spr.transform.colorTransform = trans;
addChild(spr);
spr.addEventListener(MouseEvent.CLICK, ColorPicked);
spr.x = i / 4;
spr.y = j / 4;
k -= 48;
}
}
}
private function ColorPicked(ev:MouseEvent):void {
var target:Sprite = ev.target as Sprite;
var trans:ColorTransform = target.transform.colorTransform;
draw_color = trans.color;
line.graphics.lineStyle(10, draw_color);
}
private function Eraser():void {
var eraser:Sprite = new Sprite();
var label:TextField = new TextField();
eraser.graphics.beginFill(0, 0);
eraser.graphics.lineStyle(0, 0, 0.3);
eraser.graphics.drawRect(0, 0, 50, 40);
eraser.graphics.endFill();
eraser.buttonMode = true;
eraser.addEventListener(MouseEvent.CLICK, Erased);
label.text = "Erase";
addChild(label);
label.x = 10;
label.y = 138;
addChild(eraser);
eraser.x = 10;
eraser.y = 140;
}
private function Erased(ev:MouseEvent):void {
draw_color = 0xffffff;
}
private function Canvas():void {
var Canvas_line:Sprite = new Sprite();
Canvas_line.graphics.beginFill(0, 0);
Canvas_line.graphics.lineStyle(0, 0, 3);
Canvas_line.graphics.drawRect(150, 10, 640, 580);
Canvas_line.graphics.endFill();
addChild(Canvas_line);
}
private function hit_check(ev:TimerEvent):void { // マウスが押されているかどうかの判定
if(mouseX > 150 && mouseX < 640 && mouseY > 10 && mouseY < 580){
trace("true");
hit_res = true;
}
else {
trace("false");
hit_res = false;
}
}
}
}
class CustomClient {
public function onBWDone():void {
trace("onBWDone");
}
public function onMetaData(infoObj:Object):void {
trace("onMetaData");
}
public function onPlayStatus(infoObj:Object):void {
trace("playStatus");
}
}
</pre>
<br />
ソースコードが長いので上の行から順々にポイントだけ説明していきたいと思います。
</p><br />
<h4 class="mds">38行目 Main() メソッド</h4><p>メインメソッドです。この中に書いてあるその他のメソッドの順番で処理されます。
</p><br />
<h4 class="mds">58行目 onNetStatus() メソッド</h4><p>相手側のブラウザでの処理を書いています。
</p><br />
<h4 class="mds">95行目 setProperty() メソッド</h4><p>このメソッドはどのオブジェクトを共有するかを指定するメソッドです。このプログラムでは座標データ x, y とマウスイベントフラグの dragging を共有しています。
</p><br />
<h4 class="mds">191行目 hit_check() メソッド</h4><p>自分側のブラウザでクリックされたかの判定を行っています。その判定によりマウスがどのような状態かをフラグ分けし onNetStatus() 内の switch 文で条件分けしています。
</p><br />
</div><div><a name="end"></a>
<h3 class="mds">おわり</h3><p>かなり長いソースです。正直作者も試行錯誤しながら書いたプログラムですので綺麗ではありません。また、複数ユーザが同時に描画を行った場合マウスポインターがプログラム上に二つ存在することになってしまうので気持ち悪い挙動をするので注意してください。バグもまだたくさんあると思うので潰せる方はお願いします。
<br /><br />
</p></div><div><a name="reference"></a>
<h3 class="mds">参考記事</h3><p><ul><li><a href="http://red5-manual.blogspot.com/search/label/%E8%B3%87%E6%96%99" target="_balnk">オープンソースカンファレンス2011 Fukuoka「Red5とGAEでリアルタイム共有アプリ開発入門」資料</a></li>
</ul><br />
</p></div>sunbalkanhttp://www.blogger.com/profile/17834661247927139825noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-53818927010474041932012-02-07T15:58:00.000+09:002012-02-07T17:52:15.608+09:00さくらVPSにRed5の環境を構築する「まとめ」先日の記事「<a href="http://red5-manual.blogspot.com/2012/02/vps-red5.html">さくらVPSにRed5の環境を構築する & その際の注意点など</a>」をまとめました。今回は Ant を使わない簡単に導入できる方法でポートを開けて配信できる段階まで書きます。<br />
サーバはデフォルトの CentOS 5 (x86_64) です。<br />
<br />
<a name='more'></a>導入は以下のように行います。<br />
<blockquote><ul><li><a href="#install">OpenJDK のインストール</a></li>
<li><a href="#install-red5">Red5 のインストール</a></li>
<li><a href="#easyboot">Red5 の簡単起動・確認ツールのインストール</a></li>
<li><a href="#red5-script">Red5 を起動スクリプト管理対象へ追加する</a></li>
<li><a href="#port">ポートを開ける</a></li>
<li><a href="#end">おわり</a></li>
</ul></blockquote><br />
<a name="install"></a><br />
<h3 class="mds">OpenJDK のインストール</h3>Red5 は Java で動作するため Java のインストールが必要です。今回は OpenJDK を選択しました。<br />
<pre class='brush:[shell];'>
# yum -y install java-1.6.0-openjdk java-1.6.0-openjdk-devel
</pre>以下のコマンドで Java のバージョンを確認できます。<br />
<pre class='brush:[shell];'># java -version
java version "1.6.0_20"
OpenJDK Runtime Environment (IcedTea6 1.9.10) (rhel-1.23.1.9.10.el5_7-x86_64)
OpenJDK 64-Bit Server VM (build 19.0-b09, mixed mode)
</pre><br />
<a name="install-red5"></a><br />
<h3 class="mds">Red5 のインストール</h3>今回は Subversion を使わずに、wget でファイルをダウンロードします。<br />
ダウンロードしたあとは、解凍し、<b>/usr/local/</b> に移動させます。<br />
<pre class='brush:[shell];'>$ wget http://trac.red5.org/downloads/0_9/red5-0.9.1.tar.gz
$ tar xvfz red5-0.9.1.tar.gz
# mv red5-0.9.1 red5
# mv red5 /usr/local/
</pre>さくら VPS の IP アドレスとポートでブラウザからアクセスし、起動できることを確認します。<br />
<br />
<u>http://さくら VPS の IP アドレス:5080/</u><br />
<br />
起動できていない場合は以下のコマンドで実行させてください。<br />
<pre class='brush:[shell];'>
/usr/local/red5/sh red5.sh
</pre><br />
<a name="easyboot"></a><br />
<h3 class="mds">Red5 の簡単起動・確認ツールのインストール</h3><a href="http://www.sohailriaz.com/downloads/red5.txt" target="_blank">こちら</a>に起動スクリプトが提供されておりましたので、このファイルを使って Red5 を /etc/init.d/ から起動・停止、また Red5 の状態を確認できるよう設定します。<br />
<br />
以下のコマンドでファイルをダウンロードし、/etc/init.d/ に移動させます。<br />
<pre class='brush:[shell];'>$ wget http://www.sohailriaz.com/downloads/red5.txt
# chmod +x red5.txt
# mv red5.txt /etc/init.d/red5
</pre>以下のコマンドで Red5 を起動・停止ができるようになります。<br />
<pre class='brush:[shell];'># /etc/init.d/red5 start
# /etc/init.d/red5 stop
</pre>また以下のコマンドで Red5 の状態を表示できます。<br />
<pre class='brush:[shell];'># /etc/init.d/red5 status
red5 (pid 5336) is running...
</pre><br />
<a name="red5-script"></a><br />
<h3 class="mds">Red5 を起動スクリプト管理対象へ追加する</h3>以下のコマンドで Red5 を起動スクリプト管理対象へ追加します。2 つ目のコマンドはその確認表示コマンドです。<br />
<pre class='brush:[shell];'># /sbin/chkconfig --add red5
# /sbin/chkcocfig --list red5
</pre><br />
<a name="port"></a><br />
<h3 class="mds">ポートを開ける</h3>Red5 を扱う際に最低限 開けるポートは以下の 2 つです。<br />
<br />
<ul><li>5080 : Red5 の既定ポート番号</li>
<li>1935 : RTMP のポート番号</li>
</ul><br />
ポートの設定に関しましては「<a href="http://yuruukuweb.com/linux/8190/" target="_blank">さくら VPS + CentOS 基本的な設定 まとめ</a>」の「<a href="http://yuruukuweb.com/linux/8190/#fw" target="_blank">ファイアウォールの構築</a>」を参照してください。そこで編集した <b>etc/sysconfig/iptables</b> に以下のように上記のポートを追加します。<br />
<pre class='brush:[shell];'># vi /etc/sysconfig/iptables
:
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 5080 -j ACCEPT
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 1935 -j ACCEPT
</pre>設定を反映させるため iptables を再起動します。<br />
<pre class='brush:[shell];'>
# /etc/rc.d/init.d/iptables restart
</pre><br />
<a name="end"></a><br />
<h3 class="mds">おわり</h3>以上で環境構築はおわりです。サーバ全般の設定は「<a href="http://yuruukuweb.com/linux/8190/" target="_blank">さくら VPS + CentOS 基本的な設定 まとめ</a>」に、必要最低限の設定ですが書いていますのでまだ設定していない方ははじめに読んでみてください。<br />
<br />Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-60424192412020628792012-02-03T17:05:00.000+09:002012-02-07T16:07:05.621+09:00さくらVPSにRed5の環境を構築する & その際の注意点など<p>最近流行っていますね VPS。自分も<a href="http://vps.sakura.ad.jp/lp/" target="_blank">さくらVPS</a>を借りてRed5の環境を構築しました。その際に行ったことを以下のリンクに書きました。</p><blockquote><ol><li><a href="http://yuruukuweb.com/program/red5/9032/" target="_blank">Red5 : さくら VPS に Red5 の環境を構築する | ゆる~くWebのこと</a></li>
<li><a href="http://yuruukuweb.com/program/red5/9108/" target="_blank">Red5 : さくら VPS で Red5 を扱う際に開けたポート | ゆる~くWebのこと</a></li>
<li><a href="http://yuruukuweb.com/program/red5/9120/" target="_blank">Red5 : インストールする際の注意点、訂正など | ゆる~くWebのこと</a></li>
</ol></blockquote><p>リスト番号「3」は環境を導入する際の注意点や訂正などを書いています。今後 上のリンクをまとめたものを書きます。それまでは上のリンクを参考に環境構築をしてください。お手数をお掛けします。</p><p><b>※ <a href="http://red5-manual.blogspot.com/2012/02/vpsred5.html">こちら</a>に上のリンクをまとめた導入方法を書きました。</b></p>Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-46980815391541191202011-12-23T18:29:00.000+09:002012-02-03T11:41:53.801+09:00Red5 と ActionScript で簡単なビデオチャットアプリを作るRed5 と ActionScript で簡単なビデオチャットアプリを作ってみました。<br />
<br />
<a name='more'></a><br />
<div>説明は以下の流れで行います。 <br />
<blockquote><ul><li><a href="#first">はじめに</a></li>
<li><a href="#finished-products">完成品</a></li>
<li><a href="#setup">環境構成</a></li>
<li><a href="#app-outline">アプリの概要を図で説明</a></li>
<li><a href="#html">クライアントサイドのソース - HTML ファイル</a></li>
<li><a href="#class">NetConnection と NetStream クラスの説明</a></li>
<li><a href="#as">クライアントサイドのソース - ActionScript</a></li>
<li><a href="#swf">publish.swf の生成</a></li>
<li><a href="#end">おわり</a></li>
<li><a href="#reference">参考記事</a></li>
</ul></blockquote><br />
この中で大事な項目は、「<a href="#html">クライアントサイドのソース - HTML ファイル</a>」、「<a href="#as">クライアントサイドのソース - ActionScript</a>」、「<a href="#swf">publish.swf の生成</a>」の 3 つです。<br />
</div><br />
<div><a name="first"></a><br />
<h3 class="mds">はじめに</h3>Red5 と ActionScript を用いて簡単なアプリを作成します。多少長い記事なってしまいますがお付き合いください。<br />
<br />
今回制作したアプリのソースは以下のリンクからダウンロードできます。<br />
<a href="https://docs.google.com/open?id=0B_eBo1GUPuVuYWYyMzIyNDktYTMwNi00MjUzLWIwZDgtZDFkZDIwYWFmMjVl" target="_blank">ファイルダウンロード</a><br />
</div><br />
<div><a name="finished-products"></a><br />
<h3 class="mds">完成品</h3>今回作成するアプリの完成品を以下に載せます。上のプレイヤーは相手側の動画をキャプチャし それを表示しており、下のプレイヤーは自分側の動画をキャプチャし表示しています。<br />
<br />
<a href="https://picasaweb.google.com/lh/photo/1cmZmoMOL36y_ceep3TkWu--k1i9g38wtQE6eI7OXkk?feat=embedwebsite" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIJwE91oc2ATX-DMiGKO51jXhuxliaSJyXvtGcf6Pi59cvkf5x6BFxIObBCuHTZbGhQ2ki3TqenEhf7oezioBv0lLTC2HmwprPRTRO924Ep9t9I9lyfh2vZJWFjqHzT6yq_XfwJK0iX_RM/s800/red5-videochat-demo.png" height="478" width="590" /></a><br />
<br />
こういうものを作れるんだと思っていただけたかと思います。<br />
</div><br />
<div><a name="setup"></a><br />
<h3 class="mds">環境構成</h3>今回アプリ開発で使用した開発環境は以下になります。<br />
<br />
<h4 class="mds">サーバサイド</h4><ul><li>OS : FreeBSD 8.2</li>
<li>Java : OpenJDK6</li>
<li>Red5 : 0.9.1 Final</li>
</ul><br />
<h4 class="mds">クライアントサイド</h4><ul><li>開発 : Fhash Develop</li>
<li>使用言語 : HTML, ActionScript</li>
</ul></div><br />
<div><a name="app-outline"></a><br />
<h3 class="mds">アプリの概要を図で説明</h3>今回作るアプリの概要を簡単に図で説明します。<br />
※人物の画像は<a href="http://illustration-free.com/human/human-dl-05.html" target="_blank">こちら</a>のものを使用させていただきました。<br />
<br />
<a href="https://picasaweb.google.com/lh/photo/QOAxozAY7boX0cW4GeRLze--k1i9g38wtQE6eI7OXkk?feat=embedwebsite" target="_blank"><img height="393" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMN4y3GLB-w-LokLKbb3kS4q9jJauiO_rYOnXrRaFMqwlPbtg3fOWVGH0IILM78BU2qNGOEdSvusDL25x8EFQDFgCgL99xIuH7mAdqtcHhaj3cuG7S6l1-L01RMovxY3Cj1scMlNSTiSL/s800/red5-2.png" width="590" /></a> <br />
<br />
A を自分、B を相手と仮定し、index1.html に A がアクセス、index2.html に B がアクセスしたとして説明します。<br />
<br />
<h4 class="mds">アプリの基本的な動き</h4>今回作成するアプリの基本的な動きを index1.html を例に簡単に説明します。<br />
A が index1.html にアクセスした場合、<b>publish1.swf</b> で <b>demo1</b> というチャンネルにカメラと音声の情報を渡し、その情報をB(相手)が見ているページの Flowplayer 内に出力する。<br />
という形をとっています。<br />
<br />
index2.html でも同様の動作をするので説明は割愛させていただきますが、<b>index1.html と同じ動作を index2.html でもする</b>ので簡易的なビデオチャットができます。<br />
</div><br />
<div><a name="html"></a><br />
<h3 class="mds">クライアントサイドのソース - HTML ファイル</h3>上で説明した HTML ファイル(index1.html)のソースを以下に載せます。<br />
<br />
■ <b>head 要素</b><br />
<pre class="brush:[html];">
<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>
</pre><br />
■ <b>body 要素</b><br />
<pre class="brush:[html];"><h1>ビデオチャット</h1>
<p>Red5とActionScriptで.</p>
<!-- 相手の映像が写るプレイヤー -->
<p>▽相手</p>
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
style="display:block;width:560px;height:315px"
id="player"></a>
<script>
flowplayer("player","flowplayer-3.2.7.swf",{
clip:{live: true,
url: 'demo1',
provider: 'rtmp'
},
plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.2.3.swf',
durationFunc: 'getStreamLength',
netConnectionUrl: 'rtmp://localhost/oflaDemo'
}
}
});
</script>
<!-- 自分の映像が写るプレイヤー -->
<p>▽自分</p>
<embed src="publish1.swf" loop="false" quality="high" bgcolor="#ffffff" type="application/x-shockwave-flash" width="320" height="280">
</pre><br />
Flowplayer を使用しているので head 要素に API を読み込んでいます。Flowplayer の使い方は<a href="http://red5-manual.blogspot.com/2011/12/flowplayer.html">こちら</a>を参照してください。<br />
<br />
</div><br />
<div><a name="class"></a><br />
<h3 class="mds">NetConnection と NetStream クラスの説明</h3>今回、サーバを介してアプリを作っていく際、大事になるのが NetConnection と NetStream というクラスです。<br />
<br />
<h4 class="mds">NetConnection</h4>サーバとの接続に使用するクラス。<br />
<br />
以下、<a href="http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/net/NetConnection.html" target="_blank">ActionScript 3.0 コンポーネントリファレンスガイド</a> から概要を抜粋します。<br />
<blockquote>NetConnection クラスは、Flash Player と Flash Media Server アプリケーションの間、または Flash Player と Flash Remoting を実行しているアプリケーションサーバーの間に双方向の接続を作成します。NetConnection オブジェクトは、クライアントとサーバーの間のパイプに似ています。NetStream オブジェクトで、パイプを通してストリームを送信します。</blockquote><br />
以下、使い方の例。<br />
<pre class='brush:[as3];'>
var nc:NetConnection = new NetConnection(); //NetConnection オブジェクトを作成.
nc.connect("サーバのIPアドレス"); // サーバとの接続.引数はストリーミングサーバのアドレス.
</pre><br />
<h4 class="mds">NetStream</h4>実際にデータの送信を行う場合に用いるクラス。<br />
<br />
以下、<a href="http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/net/NetStream.html" target="_blank">ActionScript 3.0 コンポーネントリファレンスガイド</a> から概要を抜粋します。<br />
<blockquote>NetStream クラスは、Flash Player と Flash Media Server の間、または Flash Player とローカルファイルシステムの間に単方向のストリーミング接続を開きます。NetStream オブジェクトは、NetConnection オブジェクト内のチャンネルです。このチャンネルは、NetStream.publish() を使用してストリームをパブリッシュするか、NetStream.play() を使用して、パブリッシュされたストリームにサブスクライブし、データを受信できます。ライブ (リアルタイム) データおよび以前に記録したデータをパブリッシュすることも、再生することもできます。NetStream オブジェクトを使用して、サブスクライブしているすべてのクライアントにテキストメッセージを送信することもできます。</blockquote></div><br />
以下、使い方の例。<br />
<pre class='brush:[as3];'>
var camera:Camera;
var ns:NetStream = new NetStream(nc); //メディアファイルを再生するときに使用できるストリームを作成し、NetConnection オブジェクトにデータを送信.
ns.attachCamera(camera); //カメラのキャプチャ開始
ns.publish("チャンネル名"); //"チャンネル名" にストリームを介してサーバにデータを送信.
</pre><br />
上の例はカメラのキャプチャしたものを publish() メソッドを利用してストリームを介してサーバにデータを送信します。<br />
<br />
<div><a name="as"></a><br />
<h3 class="mds">クライアントサイドのソース - ActionScript</h3>実際にサーバとやり取りを行う部分です。ソース以下に説明を加えます。<br />
<br />
<pre class='brush:[as3];'>package {
import flash.display.*;
import flash.events.*;
import flash.media.*;
import flash.net.*;
public class VideoChat extends Sprite {
private var camera:Camera;
private var video:Video;
private var nc:NetConnection;
private var ns:NetStream;
public function VideoChat() { // ■ ----- コンストラクタ -----
init();
}
private function init():void { // ■ ----- 初期化メソッド -----
stage.quality=StageQuality.HIGH; //画質を高に.
stage.scaleMode = StageScaleMode.NO_SCALE; //Flash Player のウィンドウのサイズが変更された場合でもサイズが維持されるように指定.
stage.align = StageAlign.TOP_LEFT; //配置を指定.ステージを左上の隅に揃えるよう指定.
camera = Camera.getCamera(); //ビデオをキャプチャする Camera オブジェクトへの参照を返す
camera.setMode(320,160,15); //カメラの縦,横,FPSの指定
if(camera != null){ //カメラ繋いでたら setupCamera()メソッドを呼ぶ
setupCamera();
}else{ //繋いでなかったらエラー出力
trace("カメラがありません。カメラを取りつけ、再度試してください。");
return;
}
nc = new NetConnection(); //NetConnection オブジェクトを作成.
nc.objectEncoding = ObjectEncoding.AMF0; //オブジェクトが ActionScript 1.0 および 2.0 の Action Message Format 形式を使用して直列化されることを指定
nc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatus); //イベント登録
nc.connect("サーバのIPアドレス"); // サーバとの接続.引数はストリーミングサーバのアドレス.
}
private function setupCamera():void { // ■ カメラの初期化とビデオストリームを指定、画面に表示など
video = new Video(camera.width,camera.height); //初期化
video.attachCamera(camera); //表示するカメラからのビデオストリームを指定.ビデオオブジェクトとカメラオブジェクトを関連付ける.
addChild(video); //画面に表示する.インスタンスを表示リストに登録する
}
private function sendVideo():void { // ■ 接続が成功した場合に呼ばれるメソッド
ns = new NetStream(nc); //メディアファイルを再生するときに使用できるストリームを作成し、NetConnection オブジェクトにデータを送信.
ns.attachCamera(camera); //カメラ キャプチャ開始
ns.publish("demo1"); //demo1(チャンネル名)にストリームを介してサーバにデータを送信.
}
private function onNetStatus(evt:NetStatusEvent):void { // ■ イベントに関するメソッド.
switch(evt.info.code){ //各イベントに対してswichで管理
case "NetConnection.Connect.Success":
trace("接続成功");
sendVideo();
break;
case "NetConnection.Connect.Closed":
trace("接続解除");
break;
case "NetConnection.Connect.Faild":
trace("接続失敗");
break;
case "NetConnection.Connect.Rejected":
trace("接続拒否");
break;
default:
trace("evt.info.code");
}
}
}
}
</pre><br />
<h4 class="mds">13 ~ 15 行目 VideoChat() : コンストラクタ</h4>コンストラクタです。init() メソッドを呼んでいます。<br />
<br />
<h4 class="mds">17 ~ 33 行目 init() : 初期化メソッド</h4>Flash プレイヤーやビデオをキャプチャを行っています。if 文でカメラを繋いでいたらsetupCamera() メソッドを呼び、繋いでいなかったらエラーを吐くようになっています。<br />
また、NetConnection オブジェクトを作成し、エンコードとイベント登録、サーバとの接続をしています。<br />
<br />
<h4 class="mds">35 ~ 39 行目 setupCamera() : カメラの初期化と画面に表示などを行うメソッド</h4>Video オブジェクトを生成してカメラの初期化を行い、attachCamera () メソッドでビデオオブジェクトとカメラオブジェクトを関連付け、addChild() メソッドで画面に表示しています。<br />
<br />
<h4 class="mds">41 ~ 45 行目 sendVideo() : 接続が成功した場合に呼ばれるメソッド</h4>NetStream クラスを使用してデータの送信を行っています。<br />
<br />
<h4 class="mds">47 ~ 65 行目 onNetStatus() : イベントに関するメソッド</h4>17 ~ 31 行目 init () メソッドの addEventListener () メソッドで呼ばれるメソッド。<br />
各イベントに対して swich で管理。"NetConnection.Connect.Success" だった場合は 39 ~ 43 行目の sendVideo() メソッドを呼び、データの送信を行います。その他はオブジェクトのステータスに従いエラーログを出力。<br />
<br />
</div><br />
<div><a name="swf"></a><br />
<h3 class="mds">publish.swf の生成</h3>ここがおそらく一番簡単ですが一番大事な部分になると思います。<br />
publish.swf は <b>HTML ファイルの 21 行目の .swf ファイルのこと</b>です。このファイルがないと自分の画面を表示できません(表示しない場合は必要ないですが)。<br />
<br />
ですので この .swf ファイルを生成してやる必要があります。また、このアプリでは index1.html と index2.html の 2 つのファイルを用いてビデオチャットを行っていますので<b>生成するファイルも 2 つ必要</b>になります。<br />
<br />
<h4 class="mds">ファイルの生成</h4>ファイルの生成は、今回クライアントサイドの開発は Fhash Develop を用いているのでこちらを使って行います。<br />
<br />
生成の仕方は Fhash Develop のツールバーの「構成の選択」から "リリース" を選択し、「プロジェクトをテスト」をクリックしコンパイルします。コンパイルに成功するとプロジェクト名と同じ名前の .swf ファイルが、今回のアプリでいくと <b>VideoChat-Alpha/VideoChat/bin の中に生成</b>されます。<br />
このファイルを index1.html の場合には publish1.swf に名前を変更するだけ(ファイル名は好みのものでよい)です。その際は「<a href="#as">クライアントサイドのソース - ActionScript</a>」の 44 行目 ns.publish() メソッドの引数を "<b>demo1</b>" にしてやる必要があります。 <br />
<br />
以下に箇条書きでまとめます。<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ViN0kwO1MBSPXtSa0ikKgnaBRKa_F-3nFh4AUY9fUbCMWxTAHdZ6R5P1rccjreZSozFwsuCw7ASYGSP_9EQhDLgLX-eyT2T1XeNKmPDBBnroJPgZHMpay-NcD5m3Kz7IGb8r-QmysEBb/s800/red5-swf-file.png" height="440" width="590" /><br />
<br />
index2.html の場合は②の引数を "<b>demo2</b>" に、④も好きなファイル名に変更します。<br />
</div><br />
<div><a name="end"></a><br />
<h3 class="mds">おわり</h3>以上で説明は終わりです。丁寧に書いたつもりですが、分かりにくかったり くどい説明になっている箇所もあるかと思います。コメントなので質問など受け付けます。わかる範囲でお答えしていきたいと思っています。<br />
<br />
また自宅サーバや VPS を使ってこのアプリを使用する場合はセキュリティ対策をしっかりと行った上で試してください。<br />
<br />
今回参考にさせていただいたWebサイトやブログの管理人の皆さま ありがとうございました。<br />
</div><br />
<div><a name="reference"></a><br />
<h3 class="mds">参考記事</h3><ul><li><a href="http://www.slideshare.net/yossy222/red5flexmixi" target="_blank">Red5とFlexで作るmixiアプリ「ビデオチャット」事例紹介</a></li>
<li><a href="http://hakuhin.jp/as3.html" target="_blank">Flashゲームプログラミング講座 For ActionScript3.0</a></li>
<li><a href="http://moire69.sakura.ne.jp/ac/?p=423" target="_blank">[AS3.0] webカメラの画質設定 | web_studynote</a></li>
<li><a href="http://blog.livedoor.jp/takaaki_bb/archives/51249207.html" target="_blank">[ActionScript] Webカメラを使って画像処理プログラミングをActionScriptで | 読書メモ+tips+日記</a></li>
</ul></div><br />Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-77471932109078883562011-12-22T21:11:00.000+09:002012-01-20T18:56:10.391+09:00Ubuntu に Red5 をインストールUbuntu に Red5 をインストールする方法を書きます。<br />
<br />
<a name='more'></a>導入は以下のように行います。<br />
<blockquote><ul><li><a href="#install1">Red5 を動かすのに必要なパッケージをインストール</a></li>
<li><a href="#install2">Red5 のインストール</a></li>
<li><a href="#jikkou">Red5 の実行 & 確認</a></li>
</ul></blockquote><br />
<h3 class="mds">環境</h3><ul><li>Ubuntu : 10.04.3 32bit</li>
<li>Red5 : 0.9.1 Final</li>
<li>Java : OpenJDK6</li>
</ul><br />
<a name="install1"></a><br />
<h3 class="mds">Red5 を動かすのに必要なパッケージをインストール</h3><pre class='brush:[shell];'>sudo apt-get update
sudo apt-get install java-package
sudo apt-get install openjdk-6-jdk
</pre><br />
<a name="install2"></a><br />
<h3 class="mds">Red5 のインストール</h3><pre class='brush:[shell];'>wget http://trac.red5.org/downloads/0_9/red5-0.9.1.tar.gz
tar xvfz red5-0.9.1.tar.gz
mv red5-0.9.1 red5
mv red5 /usr/share/
</pre><br />
<a name="jikkou"></a><br />
<h3 class="mds">Red5 の実行 & 確認</h3><pre class='brush:[shell];'>cd /usr/share/red5
sh red5.sh
</pre><br />
http://localhost:5080 へブラウザからアクセスして Red5 が起動していることを確認。<br />
<br />
<a href="https://picasaweb.google.com/lh/photo/kLBSbxPQVHYlZDo0YQMIrw?feat=embedwebsite" target="_blank"><img src="https://lh4.googleusercontent.com/-UV-BXIizt6A/TrlJzzArtpI/AAAAAAAAA-g/Xp_g1DpuSVY/s800/red5_ubuntu_install_local.png" height="473" width="560" /></a><br />
<br />
参考記事 : <a href="http://tumbledesign.com/how-to-install-red5-0-9-on-ubuntu-10-04-lts/" title="How to Install Red5 0.9 on Ubuntu 10.04 LTS | Tumbledesign.com" target="_blank">Tumbledesign.com</a> , <a href="http://gendosu.jp/archives/1135" title="UbuntuにRed5を入れてストリーミング配信をする | GENDOSU@NET" target="_blank">GENDOSU@NET</a><br />
<br />Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-32398018096510823822011-12-22T12:42:00.000+09:002011-12-23T00:56:00.886+09:00Flowplayer でRTMP形式の動画を再生する方法Red5 でストリーミングサイトやビデオチャットを構築する際にただ埋め込むだけでは味気ないと思った方は <a href="http://flowplayer.org/" target="_blank">Flowplayer</a> というプレイヤーを使ってみてはどうでしょうか。シンプルでオシャレなデザインで使い方も簡単ですのでお勧めです。以下にその導入方法をまとめます。 <br />
<br />
<a name='more'></a> 導入は以下の流れで行います。 <br />
<blockquote><ul><li><a href="#install">必要なファイルのダウンロード</a></li>
<li><a href="#emb">埋め込む</a></li>
<li><a href="#demo">デモ(画像)</a></li>
</ul></blockquote><br />
<a name="install"></a> <h3 class="mds">必要なファイルのダウンロード</h3><a href="http://flowplayer.org/plugins/streaming/rtmp.html#download" target="_blank">公式</a> から必要なファイルをダウンロード。必要なファイルは以下(2011/12/22 現在)。 <blockquote><ul><li>flowplayer.rtmp-3.2.3.swf</li>
<li>flowplayer.rtmp-3.2.3.zip</li>
<li>flowplayer.rtmp-3.2.3-src.zip</li>
</ul></blockquote><br />
ダウンロードしたファイルを解凍。使用するファイルは以下の 3 つ。 <blockquote><ul><li>flowplayer-3.2.7.swf : プレイヤー</li>
<li>flowplayer.rtmp-3.2.3.swf : RTMPプロトコルを読み込ませる為のプラグイン</li>
<li>flowplayer-3.2.6.min.js : API</li>
</ul></blockquote><br />
<a name="emb"></a> <h3 class="mds">埋め込む</h3>head タグに以下を追加。<br />
<pre class='brush:[js];'>
<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>
</pre><br />
body 内に以下のコードを追加。場所は追加したいところで。 <pre class='brush:[shell];'><a id="player" style="display:block;width:640px;height:480px"></a>
<script>
flowplayer("player","flowplayer-3.2.7.swf",{
clip:{
live: 'true',
url: 'livestream',
provider: 'rtmp'
},
plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.2.3.swf',
durationFunc: 'getStreamLength',
netConnectionUrl: 'rtmp://localhost/oflaDemo'
}
}
});
</script>
</pre><br />
公式ページの「<a href="http://flowplayer.org/plugins/streaming/rtmp.html#live" target="_blank">Live Stream</a>」の項目を参考に説明します。 <br />
13 行目に関しては理解していない部分が多いので、参考ページの英訳と「<a href="http://help.adobe.com/ja_JP/flashmediaserver/devguide/flashmediaserver_4.5_dev_guide.pdf" target="_blank">Flash Media Server 4.5 デベロッパーズガイド</a>」を参考に(かなり)簡単に載せています。もっと詳しく知りたい方は個人で調べてください。 <br />
<br />
<table><tr><th style="width:30px;">行</th><th>説明</th></tr>
<tr><td style="width:30px;"><center>4</center></td><td>id の紐付けと プレイヤー(flowplayer-3.2.7.swf)のURI。</td></tr>
<tr><td style="width:30px;"><center>5</center></td><td>動画ファイルに関する設定。</td></tr>
<tr><td style="width:30px;"><center>6</center></td><td>ライブストリーミングを利用するので true を選択。</td></tr>
<tr><td style="width:30px;"><center>7</center></td><td>ライブストリームのチャンネル名。</td></tr>
<tr><td style="width:30px;"><center>8</center></td><td>plugins の項目と紐付け。plugins を使用する際に追加。</td></tr>
<tr><td style="width:30px;"><center>10</center></td><td>プラグインに関する設定。</td></tr>
<tr><td style="width:30px;"><center>11</center></td><td>8 行目で紐付けした部分。</td></tr>
<tr><td style="width:30px;"><center>12</center></td><td>RTMPプロトコルを読み込ませる為のプラグイン(flowplayer.rtmp-3.2.3.swf)のURI。</td></tr>
<tr><td style="width:30px;"><center>13</center></td><td>サーバからストリームの長さを検出。</td></tr>
<tr><td style="width:30px;"><center>14</center></td><td>ライブストリームのURL。</td></tr>
</table><br />
<a name="demo"></a> <h3 class="mds">デモ(画像)</h3>画像で申し訳ないのですが、デザインは以下のようになります。 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4zQU9AO3qyqw5tYoYsk_Xr9TOuo2Sz_gMLgBso-vZDY4hsjV71laJbduX8SHHuc_MapRiMCTdN4pMmA2feLxrz1FdV9S41abXJF0YYHmvhHBzit1W97eb4_Guyk4NfTxm5GIC2RP579le/s800/flowplayer-demo.png" /> <br />
<br />Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-88040824825579007592011-12-20T16:27:00.000+09:002012-01-20T18:56:48.144+09:00FreeBSDにRed5をインストールFreeBSDにRed5をインストールする方法を書きます。 <br />
<br />
<a name='more'></a><h3 class="mds">環境</h3><ul><li>FreeBSD : 8.2 (Portsインストール済み)</li>
<li>Red5 : 0.9.1 Final</li>
<li>Java : OpenJDK6</li>
</ul><br />
<h3 class="mds">はじめに</h3>※ PortsからJava(OpenJDK6)を入れることを前提に書きます。 <br />
<br />
当初、バージョン7.1にRed5を入れる予定でしたがOpenJDK6のパッケージのインストールでエラーを吐きインストールできない問題がありました。インストールは7.0、8.2ではエラーは出るものの、エラーログに従い対処した結果、インストールに成功しました。 <br />
エラーログに従い行ったことを以下にまとめます。 <br />
<blockquote>/usr/ports/distfiles/に以下のファイルを追加。<br />
<ul><li>tzupdater-1_3_42-2011k.zip</li>
<li>diablo-caffe-freebsd7-i386-1.6.0_07-b02.tar.bz2</li>
</ul></blockquote><br />
<h3 class="mds">Portsの更新</h3>以下のコマンドはPortsの更新が初めての場合。<br />
更新はどこの階層で行ってもいいです。※ただし/usr/ports/の中では行わないように。<br />
<pre class='brush:[shell];'>#portsnap fetch
#portsnap extract</pre><br />
2回目以降の更新は以下のコマンドで。<br />
<pre class='brush:[shell];'>#portsnap fetch
#portsnap update</pre><br />
<h3 class="mds">OpenJDK6(Portsパッケージ)のインストール</h3><pre class='brush:[shell];'>$cd /usr/ports/java/openjdk6/
#make fetch-recursive
#make config-recursive
#make install
</pre><br />
<h3 class="mds">Red5のインストール</h3>インストールするのは安定版(2011/12/20現在)である0.9.1 Finalを選択。 <pre class='brush:[shell];'>$fetch http://trac.red5.org/downloads/0_9/red5-0.9.1.tar.gz
$tar xvfz red5-0.9.1.tar.gz
$mv red5-0.9.1 red5
$mv red5 /usr/share/
</pre><br />
<h3 class="mds">Red5の実行</h3><pre class='brush:[shell];'>$cd /usr/share/red5
$sh red5.sh
</pre><br />
http://IPアドレス:5080にアクセスし、<a href="http://red5-manual.blogspot.com/2011/12/red5windows.html#demo" target="_blank">こちら</a>のような画面が出れば成功。 <br />
<br />
<h3 class="mds">PC起動時にRed5を起動させる</h3>起動スクリプトは様々な方法がありますが今回は以下のように行いました。 <br />
<br />
<h4 class="mds">スクリプトファイルを作成</h4>"&"を付けバックグラウンドで実行するようにします。<br />
<br />
■<b>vi /etc/rc.d/red5</b></li><br />
<pre class='brush:[shell];'>#!/bin/sh
sh /usr/share/red5/red5.sh &
</pre><br />
<h4 class="mds">rc.confを編集してスクリプトファイルを有効にする</h4>以下を追加します。<br />
<br />
■<b>vi /etc/rc.conf</b> <pre class='brush:[shell];'>
red5_enable="YES"
</pre><br />
<h4 class="mds">バッチファイルを編集する</h4>通常であればこの部分は必要ありませんが、Red5は .sh があるディレクトリで実行しなければならないためこの操作が必要になります。<br />
<br />
■<b>vi /usr/share/red5/red5.sh</b> <pre class='brush:[shell];'>#!/bin/bash
if [ -z "$RED5_HOME" ]; then
#export RED5_HOME=`pwd`;
export RED5_HOME="/usr/share/red5";
fi
… 以下省略 ...
</pre><br />Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-19869885430586538732011-12-17T16:30:00.001+09:002011-12-18T14:49:47.104+09:00デモファイルのインストールができないときの対処方法Red5 のデモファイルのインストールに関してのエントリーです。<a href="http://red5-manual.blogspot.com/2011/12/red5windows.html#demo" title="Red5をWindowsへインストールとデモの動作確認">先日の記事</a>のインストールページでデモファイルをインストールするところで、自宅ではインストールできたのですが他のところでは何故か<strong>インストールができない</strong>ことがあったのでその対処法を書きます。<br />
<br />
<a name='more'></a><h3 class="mds">今回行うことを詳しく</h3>普通であれば Red5 を起動させ、http://localhost:5080/installer/ へアクセスしてデモのファイルをインストールするのですが、そのリストが表示されないときがあります(プロキシの問題なのかネットワーク自体の問題なのか 今の段階では定かではありません)。<br />
<br />
そこでサーバをひとつ作ってそこから wget なんかでデモファイルを取ってきて、そのサーバからデモファイルをインストールします。サーバはいらない PC に入れたり仮想で立てたりしてください。<br />
<br />
<h3 class="mds">環境構成</h3>今回の環境構成は以下。<br /><br />
<h4 class="none">ホスト</h4><ul><li>OS : Windows 7 64bit</li>
<li>Red5 : 0.9.1 Final</li>
</ul><br />
<h4 class="none">サーバ (新しく作ってね)</h4><ul><li>VirtualBox 4.1.6</li>
<li>OS : Ubuntu 10.04.3 32bit (ユーザ名 test)</li>
<li>Java : OpenJDK 6 (1.6.0_20)</li>
</ul><br />
<h3 class="mds">対処方法</h3>今回行う項目は以下の 2 つです。<br />
<br />
<ul><li><a href="#server">デモファイルをサーバへインストール</a></li>
<li><a href="#host">ホスト側の設定</a></li>
</ul><a name="server"></a><br />
<h3 class="mds">デモファイルをサーバへインストール</h3>デモファイルは友人が見つけてくれたのですが<br />
<br />
<a href="http://red5.googlecode.com/svn/java/example/trunk/" title="red5 - Revision 4296: /java/example/trunk" target="_blank">red5 - Revision 4296: /java/example/trunk</a><br />
<br />
にあるようです。これを wget でもってきます。面倒なんで -r 付けます。<br />
<br />
<pre class='brush:[shell];'>$wget -r http://red5.googlecode.com/svn/java/example/trunk/
</pre><br />
ダウンロード中。<br />
<a href="https://picasaweb.google.com/lh/photo/9KMy8N1mdxZ2FtSqZ0p-Ig?feat=embedwebsite" target="_blank"><img src="https://lh6.googleusercontent.com/-0IlLRxan6qQ/Tr0wDIKYxSI/AAAAAAAAA-4/_LyHXitFdDY/s800/red5_demo_install_ubuntu_server_01.png" height="474" width="560" /></a><br />
<br />
red5.googlecode.com ファイルができ、svn にごっそりとファイルが。<br />
<a href="https://picasaweb.google.com/lh/photo/bYAJZyw5VUuQiRQ8Kg0UsA?feat=embedwebsite" target="_blank"><img src="https://lh6.googleusercontent.com/-PMo7mh9m1yM/Tr05Q4p1vWI/AAAAAAAAA_Q/gGr_KYyzjWY/s800/red5_demo_install_ubuntu_server_05.png" height="29" width="560" /></a><br />
<br />
red5.googlecode.com/svn/java/example/trunk/ の中にデモファイルが入っています。<br />
<a href="https://picasaweb.google.com/lh/photo/3I7MypHWKjtg6SGW8CN2FA?feat=embedwebsite" target="_blank"><img src="https://lh5.googleusercontent.com/-CDLGS-CE2vY/Tr0537L4OTI/AAAAAAAAA_Y/BUS6rgkTQj4/s800/red5_demo_install_ubuntu_server_04.png" height="63" width="560" /></a><br />
<br />
trunk をホームディレクトリにコピーして、名前を applns に変更します。<br />
<pre class='brush:[shell];'>cp -ad trunk /home/test/
cd /home/test/
rm trunk applns
</pre><br />
<a name="host"></a><br />
<h3 class="mds">ホスト側の設定</h3>Red5/webapps/installer/WEB-INF/red5-web.properties の5行目を変更します。先ほど作った applns にアクセスするようにします。<br />
<pre class='brush:[shell];'>webapp.contextPath=/installer
webapp.virtualHosts=localhost, localhost:5080
# Used by the installer to locate the available wars
application.repository.url=サーバのURL/applns/
</pre><br />
あとはRed5を起動し http://localhost:5080/installer/ へアクセスすればインストールできるようになります。<br />
<br />
<h3 class="mds">終わり</h3>今回の方法は最善のものでは決してありません。もっと良い方法もあると思いますし、自分の設定のミスなどもあると思います。<br />
<br />Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-54412436265766404172011-12-15T03:32:00.007+09:002011-12-22T20:42:52.833+09:00UbuntuソフトウェアセンターからのインストールについてUbuntuソフトウェアセンターからRed5をインストールすると、どうやらファイルが足りないらしく正常動作しないので、公式サイトからダウンロードしてインストールしてください。emhttp://www.blogger.com/profile/15036441946984651079noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-15299880297723309922011-12-14T22:50:00.002+09:002011-12-14T23:01:10.320+09:00オープンソースカンファレンス2011 Fukuoka「Red5とGAEでリアルタイム共有アプリ開発入門」資料<div style="width:510px" id="__ss_10547715"><strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/HiroshiBunya/osc-20111203" title="OSC福岡 20111203" target="_blank">OSC福岡 20111203</a></strong> <iframe src="http://www.slideshare.net/slideshow/embed_code/10547715" width="510" height="426" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/HiroshiBunya" target="_blank">Hiroshi Bunya</a> </div></div><br />
先日の「<a href="http://www.ospn.jp/osc2011-fukuoka/" target="_blank">オープンソースカンファレンス2011 Fukuoka</a>」で披露された、Red5とGoogle App Engineによるリアルタイム共有アプリケーション開発に関する資料が公開されました。以下詳細を<a href="http://www.red5.gr.jp/event/26-osc2011-fukuoka" target="_blank">日本ユーザ会のページ</a>から抜粋します。<br />
<br />
<blockquote>Red5 は、Java で開発されているオープンソースな Flash サーバで、Real-Time Messaging Protocol に準拠しているため、Flash Media Server との互換性を持っています。<br />
Red5 を使うことで、動画のストリーム配信や、インタラクティブな機能を有したアプリケーションを開発できます。<br />
<br />
本講演では、Red5 で開発した落書き共有アプリと、Google App Engine のチャネルサービスを使って 同じく開発した落書き共有アプリの紹介をします。両者を比較しながら、リアルタイム共有アプリの開発について解説します。<br />
また、Red5 を使ったアプリのまとめサイト( http://share.red5.gr.jp )も紹介します。</blockquote><br />Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-39854431428410532342011-12-13T22:30:00.005+09:002011-12-13T22:40:35.632+09:00Red5 で開発可能な機能、メリット、デメリットなどRed5で開発可能な機能やコンテンツなど、またRed5を用いることでのメリットやデメリットなどを簡単にまとめて説明します。主に動画配信とオブジェクト共有に重点を置いた説明になります。<br />
<br />
<a name='more'></a><h3 class="mds">機能やメリット</h3><h4 class="mds">ストリーミング配信</h4><ul><li>Youtubeやニコニコ動画などとほぼ同じサイトを構築できる。</li>
<li>FlashとJavaで開発できるため、リアルタイムでの顔認証や画像合成なども可能。</li>
<li>双方向でのリアルタイムな動画配信が可能なためビデオチャットなどの機能も実現できる。</li>
<li>既存のJavaのライブラリが多いため実装できる機能が多い。</li>
<li>XSpritやFMEなどとの連携もでき、WMEより動作が軽い。</li>
<li>配信時のラグが少ない。(性能や環境に影響されるが 研究室内での実験では2~3秒、WMEでの場合10~15秒程度)</li>
<li>VP6やH.264などのエンコード形式で配信可能。</ul><br />
<h4 class="mds">オブジェクトのリモート共有</h4><ul><li>ブラウザ上にあるオブジェクトを共有できるため、ネット会議用のホワイボードや複数人で行う対戦ゲームなども実現できる。</li>
<li>HTML5で製作されたプレゼンテーション資料とRed5の配信機能を用いれば、多機能e-Lerning環境や遠隔授業環境など構築できるかも?</li>
</ul><br />
<h3 class="mds">デメリット</h3><ul><li>開発資料が極端に少ない。また、アマチュアプログラマでの開発経験者は少ない。</li>
<li>実現できる機能が多いがその反面、設定・構築環境が複雑。</li>
</ul><br />
今回は動画配信とオブジェクト共有に重点を置いた説明になりましたが、その他にもRed5でできることはいろいろとあります。Red5はすばらしいアプリではありますが いかんせん情報が少ないです。コミュニティがもっと盛り上がってくれないものかと- -;
<br /><br />Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-61481576933624575302011-12-13T20:26:00.004+09:002011-12-22T20:42:31.459+09:00Red5をWindowsへインストールとデモの動作確認Red5をWindowsへ導入する方法を書きます。自分のブログに<a href="http://yuruukuweb.com/program/red5/7433/" target="_blank" title="Red5 : Red5 を Windows へインストール & デモの動作確認 | ゆる~くWebのこと">載せて</a>いますがこちらにも書いておきます。<br />
<br />
<a name='more'></a>今回の説明は以下の流れで行います。<br />
<br />
<blockquote><ul><li><a href="#install">インストール</a></li>
<li><a href="#demo">デモの動作確認</a></li>
</ul></blockquote><br />
<a name="install"></a><br />
<h3 class="mds">インストール</h3>今回の環境構成は以下。<br />
<ul><li>OS : Windows 7 64bit</li>
<li>Red 5 : 0.9.1 Final</li>
<li>Java : 1.6.0_21</li>
</ul><br />
まずは Red5 をダウンロードします。ダウンロードは<a href="http://code.google.com/p/red5/" title="Red5 | Code Google" target="_blank">こちら</a>から。<br />
<br />
ダウンロードした exeファイルを起動し「Next >」をクリック。<br />
<a href="https://picasaweb.google.com/lh/photo/2iRLg9JKp8bsxf-G9Ls0Ug?feat=embedwebsite" target="_blank"><img src="https://lh5.googleusercontent.com/-D3gXzkCa3zY/Trdiz2USfEI/AAAAAAAAA8U/OkPIKjaybIk/s800/red5_01.png" height="399" width="513" /></a><br />
<br />
「I Agree」をクリック。<br />
<a href="https://picasaweb.google.com/lh/photo/th0rjjfHh4D-dZPoFi2pTw?feat=embedwebsite" target="_blank"><img src="https://lh4.googleusercontent.com/-45XPfd8Z2ik/Trdi6T3rjiI/AAAAAAAAA8c/r2yu5_VZkOI/s800/red5_02.png" height="399" width="513" /></a><br />
<br />
Red5 をインストールするフォルダの指定。入力したら「Next >」をクリック。<br />
<a href="https://picasaweb.google.com/lh/photo/bC-A5ga1LP7GjRWlh2Dbig?feat=embedwebsite" target="_blank"><img src="https://lh4.googleusercontent.com/-GeUNnzrT3q0/Trdi8m8GLOI/AAAAAAAAA8k/QDv6tCBhuPw/s800/red5_03.png" height="399" width="513" /></a><br />
<br />
「Next >」をクリック。<br />
<a href="https://picasaweb.google.com/lh/photo/csZVG_grmxE-LrORARxtDw?feat=embedwebsite" target="_blank"><img src="https://lh3.googleusercontent.com/-ivDAEXGPf3c/TrdjAO3jbVI/AAAAAAAAA8s/5LafI82NCG4/s800/red5_04.png" height="399" width="513" /></a><br />
<br />
IPアドレスの設定。今回はテストで行うので「localhost」を指定。<br />
<a href="https://picasaweb.google.com/lh/photo/fzFHyuHd0mNhEmOxsKyaWA?feat=embedwebsite" target="_blank"><img src="https://lh6.googleusercontent.com/-S2sw0ZwKTAU/TrdjCk7Et6I/AAAAAAAAA80/5yUTLybpPfw/s800/red5_05.png" height="173" width="356" /></a><br />
<br />
ポートの設定。「5080」を指定。<br />
<a href="https://picasaweb.google.com/lh/photo/AZH042h5k5k1epEGIwRA1A?feat=embedwebsite" target="_blank"><img src="https://lh5.googleusercontent.com/-SFxkl0hEQBg/TrdjEmXTj4I/AAAAAAAAA88/Ipv7Q6GZeN0/s800/red5_06.png" height="173" width="356" /></a><br />
<br />
「Finish」をクリックするとインストールが始まるのでそれが終われば完了です。<br />
<a href="https://picasaweb.google.com/lh/photo/qrdAyEULGRkMhV8VBvxZzQ?feat=embedwebsite" target="_blank"><img src="https://lh4.googleusercontent.com/-jGQgqxKNhLY/TrdjHGpUgMI/AAAAAAAAA9E/n7IlV0TCZp8/s800/red5_07.png" height="399" width="513" /></a><br />
<br />
インストールしたフォルダの中身は以下のようになります。バージョンによっては異なる場合があると思います(たぶん)。<br />
<a href="https://picasaweb.google.com/lh/photo/q1uIjH5xtGUVVWlxBCvo0w?feat=embedwebsite" target="_blank"><img src="https://lh5.googleusercontent.com/-dx6XeVAY9us/TrdjJHiJQEI/AAAAAAAAA9M/SX8UifKZ2ug/s800/red5_08.png" height="361" width="560" /></a><br />
<br />
<a name="demo"></a><br />
<h3 class="mds">デモの動作確認</h3>まずは Red5 を動かします。Red5/red5.bat を動かします。そして先ほど設定したIPアドレスとポートでブラウザからアクセスします。<br />
<br />
<a href="http://localhost:5080" title="localhost" target="_blank">http://localhost:5080</a> (以下 トップページ)<br />
<br />
アクセス画面。<br />
<a href="https://picasaweb.google.com/lh/photo/4IQG919csjieIJ4zYq8OJg?feat=embedwebsite" target="_blank"><img src="https://lh4.googleusercontent.com/-n7TzXIuM4MM/TrdjKvUmgiI/AAAAAAAAA9U/PzNifhc_JyY/s800/red5_09.png" height="420" width="560" /></a><br />
<br />
次はアプリをインストールします。トップページの"Install a ready-made application" をクリック。<br />
<br />
インストールページ。インストールはアプリ名を選択し下の「Install」をクリック。<br />
<a href="https://picasaweb.google.com/lh/photo/R4eV1CSdEp94amuO7uisOA?feat=embedwebsite" target="_blank"><img src="https://lh4.googleusercontent.com/-y0tt_Ke4CIU/TrdjPMxoR6I/AAAAAAAAA9k/6eVe29ARk8Y/s800/red5_11.png" height="420" width="560" /></a><br />
<br />
アプリのインストールができたのでデモを動かしてみます。トップページの"Launch a demo" をクリック。<br />
<br />
デモリンク画面。<br />
<a href="https://picasaweb.google.com/lh/photo/OcR6329rg_3RoWpFMbAPpg?feat=embedwebsite" target="_blank"><img src="https://lh3.googleusercontent.com/-B55WX7yEFoA/TrdjM8iMteI/AAAAAAAAA9c/1MjZ_k8nxos/s800/red5_10.png" height="420" width="560" /></a><br />
<br />
今回は一番上にある「Shared Ball」を試してみます。<br />
<br />
"View demo" をクリックします。ブラウザを下記の画像のように もう 1 つ起動し、同じ URL (今回の場合ですとhttp://localhost:5080/demos/BallControl.html) にアクセスします。<br />
<br />
各コネクトボタン(rtmp://~~ 下の青い画像)をクリックし通信が確立すると Red5 アイコンが同期し両ブラウザで同じ動きをします。<br />
<br />
<a href="https://picasaweb.google.com/lh/photo/Xnjk8F4zoivLguNoiP8_5g?feat=embedwebsite" target="_blank"><img src="https://lh5.googleusercontent.com/--nf8pDnry3Q/TrdyHQiw_4I/AAAAAAAAA-I/OG-2fhjJWU4/s800/red5_12.png" height="325" width="560" /></a><br />
<br />Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-6278142030055291102011-12-13T12:49:00.000+09:002011-12-13T12:49:55.468+09:00Red5について以下の説明は<a href="http://windows.microsoft.com/ja-JP/windows/products/windows-media" target="_blank" title="Windows Media | Windows Microsoft">Windows Media Server</a>との比較によるものである。<br />
<br />
Red5とは、オープンソースのRTMP形式(Real-Time Messaging Protocol)のストリーミングサーバである。Adobeが有償で提供している<a href="http://www.adobe.com/jp/products/flashmediaserver/" target="_blank" title="Adobe Flash Media Serverファミリー | Adobe">Flash Media Server</a>と互換関係の位置にある。Red5自体がJavaで書かれていてオープンソースのためWindows Media Serverとはことなり柔軟なシステム構築が可能である。主な利点としては以下のようなことが上げられる。<br />
<br />
<ul><li>オープンソースなので無料でRTMP形式のストリーミングサーバを構築できる。</li>
<li>Javaで書かれたサーバなのでWindows, Linux, FreeBSDなどJavaを実行できる環境であればあらゆるOSで使用できる。</li>
<li>RTMPを利用してサーバ関数を呼び出すことができる。</li>
<li>ビデオやオーディオの記憶、ストリーミングも行える。</li>
<li>クライアントはFlexとActionScriptで構築できる。</li>
<li>オブジェクトの共有ができる。</li>
<li>Windows Media Server + <a href="http://www.microsoft.com/downloads/ja-jp/details.aspx?FamilyID=5691ba02-e496-465a-bba9-b2f1182cdf24"target="_blank" title="Windows Media エンコーダ 9 シリーズ | Microsoft ダウンロード センター">Windows Media Encoder</a>の構成より配信ラグが少ない。</li></ul><br />Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-3722705662018747112011-12-12T22:23:00.002+09:002011-12-12T22:46:17.451+09:00はじめましてRed5についでどんどん書き込んでいきます。emhttp://www.blogger.com/profile/15036441946984651079noreply@blogger.com0tag:blogger.com,1999:blog-3189271433130724588.post-80741570160177931122011-12-12T22:18:00.001+09:002011-12-12T23:07:16.884+09:00Red5についてのブログ はじめましたはじめまして。<br />
<br />
Red5自体の情報が少ないためこちらにまとめていきます。<br />
<br />
よろしくお願いします。Seiya Maedahttp://www.blogger.com/profile/17413415756864807539noreply@blogger.com0