FlashMediaServerを用いた 簡単動画投稿サイト

FxUG@北陸 第一回勉強会
FlashMediaServerを用いた
簡単動画投稿サイト
2009.2.16
株式会社Dooga 西村 誠 2009年2月23日月曜日
FxUG@北陸 第一回勉強会
アジェンダ
・自己紹介
・FMSの紹介
・動画投稿サイトの概要
・FMS周辺の詳細
・FFmpegについて
・苦労した点
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
自己紹介
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
ブログ:眠るシーラカンスと新米プログラマー
サイト:シーラカンスのまどろみ
Twitter:coelacanth
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
プログラマ歴3年
Flash歴2年
Flex歴1年
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
チーズケーキ作成歴5年!!
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
こんなんとか
こんなのを売ってました
こんなお店で・・・
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
FMSの紹介
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
FlashMediaServerとは
・Flash間の相互通信を簡単に実現でき
・動画のDRM付き配信や
ストリーミング配信を可能にし
・P2Pなんかも可能にするかもしれない
いまとってもHot(自分の中では)なサーバー製品です
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
FlashMediaServerとは（その2）
・お値段は614.250円ととってもリーズナブル
・今はFlashMediaServerですが昔は FlashCommunicationServerという名前でした
もちろん、コードの中にFCSという昔の呼び名の単語がいっぱいだっ
たり、移行途中にFCSなのかFMSなのか等の呼称で混乱したりはして
いませんよ・・・いませんとも・・・
・言語はサーバーサイドAS
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
FlashMediaServerとは（その3）
それではFMSを用いると何ができるのか？
【代表例】ustream,ニコニコ動画
ビデオカメラやWebカメラを用いたライブ配信
や、動画配信サイトが作れます
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
動画投稿サイトの概要
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
まずはデモ
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
材料
【サーバー側】
・FreeBSD(OS)
・FFmpeg(おまけ)
・Apache(Webサーバー) ・MySQL(データベース)
・PHP(サーバー側言語)
・FlashMediaServer
【クライアント側】
・Flash(録画用、再生用各１つ)
・Silverlight(おまけ)
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
サーバー側は一般のレンタルサーバーなどでは
実現し難い構成ですが、FMSを使えるレンタルサー
バー(ヘテムル)などを利用すれば同様のものを作成
可能です。
※材料のFFmpegはSilverlight再生用なので無くても可です
【ヘテムル(月額1500円)】
2009年2月23日月曜日
http://heteml.jp/
FxUG@北陸 第一回勉強会
処理の流れ
録画用FlashでFMSサーバーに接続
FMSで映像を録画、DBに情報を保存
FFmpegでSilverlight用のWMVファイルを作成
クライアントで動画一覧表示&動画再生
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
FMS周辺の詳細
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
AS3コード
ドメイン:hoge.com
アプリ名:hogeApp
に接続するswfコードは・・・
var nc:NetConnection = new NetConnection();
nc.objectEncoding = ObjectEncoding.AMF3;
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatuEventHandler);
nc.connect(“rtmp://hoge.com/hogeApp”);
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
ポイント!!
nc.objectEncoding = ObjectEncoding.AMF3;
FlashMediaServer2以前のサーバー製品
に接続する場合はAMF0!!
var nc:NetConnection = new NetConnection();
nc.objectEncoding = ObjectEncoding.AMF3;
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatuEventHandler);
nc.connect(“rtmp://hoge.com/hogeApp”);
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
ポイント2!!
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatuEventHandler);
FlashMediaServerとの接続状態の変更
を通知してくれるイベント
var nc:NetConnection = new NetConnection();
nc.objectEncoding = ObjectEncoding.AMF3;
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatuEventHandler);
nc.connect(“rtmp://hoge.com/hogeApp”);
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
代表的なサーバー接続状態を示すNET_STATUSイベント
・NetConnection.Connect.Success
サーバーとの接続成功
・NetConnection.Connect.Rejected
サーバーは動いているがなんらかの理由で
接続を拒否された。
・NetConnection.Connect.Failed
サーバーとの接続に失敗
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
動画の配信&録画&再生
・サーバーへの接続はNetConnectionクラス
・サーバーへの映像配信や受信するために
ストリームを作成するのはNetStreamクラス
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
NetStreamを用いたコード
public function netStatuEventHandler(e:NetStatusEvent):void {
// 先ほどのNET_STATUSイベントの値をチェック
switch() {
case “NetConnection.Connect.Success”:
// e.targe = NetConnectionクラス
var ns:NetStream = new NetStream(e.target);
// 動画の情報取得用のクライアントクラス
ns.client = new NetStreamClient();
// 動画を再生
ns.play(“動画ファイル名”);
break
// その他のNET_STATUSイベントの処理を書く
}
}
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
ポイント!!
ns.client = new NetStreamClient();
動画のサイズ等の情報を取得できる。
class NetStreamClient {
public function onMetaData(info:Object):void {
trace("metadata: duration=" + info.duration + " width=" + info.width + "
height=" + info.height + " framerate=" + info.framerate);
}
public function onCuePoint(info:Object):void {
trace("cuepoint: time=" + info.time + " name=" + info.name + " type=" +
info.type);
}
}
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
ポイント2!!
ns.play(“動画ファイル名”);
・再生する場合はplay(“動画orストリーム名”)
・配信する場合はpublicsh(“ストリーム名”)
・録画する場合はpublicsh(“ストリーム名”, “record”)
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
Swf, FMSの全コードはサイトに公開します
シーラカンスのまどろみ
http://coelacanth.heteml.jp/site/flash_fms/index
間に合えば・・・
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
おまけ
FFmpegについて
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
FFmpegとは？
・動画をいろいな形式に変換可能
flv→wmv＝Silverlighで再生
mpeg→flv＝Flashで再生
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
FFmpegとは？
・コマンドラインから操作可能
サーバーサイドスクリプトから利用できる
今回はPHPからFFmpegを用いて
動画を変換しました
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
FFmpegとは？
・動画から画像も切り出し可能
動画のサムネイルを作成するのにいいです
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
サンプルコード
PHPからコマンドラインを操作する
system(”コマンド”);
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
コマンドライン
実際に実行されたコード
// 画像を生成
/usr/home/mac/ffmpeg/ffmpeg -y -i
/usr/home/mac/RecordMovie_Red5_Streams/5.flv
-f image2 -s 320*240 -ss 3 -t 0:0:0.001 -r 1 -an
/usr/home/mac/public_html/recordMovie/image/5.jpg
// 動画を生成
/usr/home/mac/ffmpeg/ffmpeg -y -i
/usr/home/mac/RecordMovie_Red5_Streams/5.flv
-f asf -acodec wmav1 -vcodec wmv2 -b 4096k -ab 128k
/usr/home/mac/public_html/recordMovie/movie/5.wmv
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
参考書籍
FFmpegのコマンドオプ
ション等は左書籍を参考に
しました。
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
苦労した点
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
トラブル1
映像録画の際に音が無いと、音無のflvが作成され、
FFmpegでエラーになった
swfは音声が一定レベル以下だと
データ送信量削減のため無音にしてしまう。
Microphone.setSilenceLevel(0, 0);
で、無音flvを生成しないように修正。
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
トラブル2
カメラ映像の品質を高くしすぎたために、録画さ
れたファイルがとびとびになった
カメラの品質を落とした
Camera.camera.setQuality(0, 65);
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
トラブル3
FFmpegがflvの音声コーデック(Nellymoser)
に対応していなかった
subversionから最新のコミットをDLしてコンパイル
最新のFFmpegでもマイクのHzによっては変換できないものがあるらしいので、
対応していない場合警告を出すように修正
Microphone.rateでチェック
2009年2月23日月曜日
FxUG@北陸 第一回勉強会
最後に
2009年2月23日月曜日
FlashMediaServerの
魅力を実感していただけたでしょうか？
2009年2月23日月曜日
とかいいながら、
今回のデモにはFlashMdiaServerを使っていないのは
Adobeさんには内緒です
2009年2月23日月曜日
映像変換+サムネイル作成を用いれば
FMSによる録画ではなく、
動画ファイルをアップするような
サイトも作れますね
2009年2月23日月曜日
FMSとか、勉強会とか
この後の懇親会で色々お話しましょう！！
FMS3.5の最新機能も非常に魅力的ですよー
とかお話しましょう
2009年2月23日月曜日
ご清聴ありがとうございました
2009年2月23日月曜日