Fms

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日月曜日