Flash ライブプレイヤー開発【その２】
次世代サービス推進室 川上 です。
前回のエントリーでは、Flash ライブプレイヤー開発【その１】としまして、
「Flash Media Live Encoderによるライブ配信」についてご紹介しました。
シリーズ２回目の今回は、「カスタムライブ配信プレイヤーの作成」です。
【完成イメージ】
【サンプルファイル】
サンプルファイルダウンロード (fxpプロジェクト / 227KB)
――――――――――――――――――――――――――――――――――――――――
１．はじめに
Flashでライブ映像を配信するという意味では、前回のFlash Media Live Encorder 3
(以下、FMLE）とほぼ同じ機能です。
前回説明した内容のおさらいとなりますが、カスタムで配信プレイヤーはWebページに
埋め込んだり、独自のインターフェイスやスキンのカスタマイズを行うことができます。
映像の配信はFlash Player内臓の「Sorenson Spark」でライブエンコードされ、
音声は「NellyMoser」と「Speex」コーデックに対応しています。
FMLEの配信コーデックとなっていた高画質、高圧縮の「H.264」や「On2 VP6」を利用でき
ないのには理由がありまして、FMLEはローカルアプリケーションで動作するのに対して、
カスタムライブ配信プレイヤーはブラウザのFlash Player上で動作するので、PCにかなり
の負荷がかかってしまいます。
そのため、圧縮率が高いがエンコードに負荷がかかる「H.264」や「On2 VP6」は採用せず、
エンコードの負荷が低い「Sorenson Spark」が採用されているということです。
――――――――――――――――――――――――――――――――――――――――
２．ご用意いただくもの
・ Flash Media Server 3.5
■ダウンロードサイトはこちら(※1)
・ Flash Builder 4 もしくは Flex Builder 3
■ダウンロードサイトはこちら(※1)
・ Webカメラもしくはその他カメラ（入力デバイスとしてPCが認識するもの）
・ マイク (PC内臓マイクでも可)
(※1)ダウンロードするにはAdobe IDを取得する必要があります
――――――――――――――――――――――――――――――――――――――――
３．Flash Media Server の設定
前回説明した内容と同じなので、割愛させていただきます。
【前回：Flash Media Server の設定】
――――――――――――――――――――――――――――――――――――――――
４．Flash Builder 4 (Flex Builder 3) コーディング
カスタムライブ配信プレイヤー開発の流れ
①．プロジェクトの準備
②．アプリケーションの初期化
③．NetConnectionに接続
④．Videoクラスのインスタンスを生成
⑤．Webカメラ、マイクを取得
⑥．Videoオブジェクトにカメラを割り当て
⑦．NetStreamクラスのインスタンスを生成
⑧．NetStreamにカメラ・マイクを割り当てる
⑨．ライブストリームのパブリッシュ
⑩．ライブストリームのパブリッシュを停止
――――――――――――――――――――――
①．プロジェクトの準備
――――――――――――――――――――――
・Flash Builder 4 (Flex Builder 3)を起動し、新規プロジェクトを作成します
メニューバー [ファイル]→[新規]→[Flexプロジェクト] を選択します。
・プロジェクト名に「CustomLivePublisher」と名前つけて、アプリケーションの種類
で「Web(Adobe Flash Player で実行」を選択します。
・Flex SDKのバージョンは 特定のSDKを使用するのプルダウンから「Flex 3.5」を選択
します。
※今回はFlex Buider 3での動作も兼ねている為、Flex SDKは3.5を使用します
・ステージ上にボタン、ラベル、テキストインプットのインスタンスを用意します (下図参照)
『Button』
- FMS接続ボタン： connectBtn
- ライブ配信ボタン： liveBtn
- 録画開始ボタン： recBtn
- 配信停止ボタン： stopBtn
『Label』、『TextInput』
- プロトコル名： protocolName
- サーバー名： servName
- アプリケーション名： appName
- インスタンス名： instName
- ファイル名： fileName
『Label』 NetConnection接続URI確認用
- 接続URI： connectURI
『TextArea』 FMSステータスログのトレース
- traceLogView
――――――――――――――――――――――
②．アプリケーションの初期化
――――――――――――――――――――――
・FMSステータスログのトレース
トレースログ格納変数 _traceLoge をバインディングします
[Bindable]
private var _traceLog:String;
<mx:TextArea id="traceLogView"
x="350" y="50"
width="280" height="455"
text="{_traceLog}" />
・ボタンの無効化
FMSとの接続が確立するまでボタンを無効にしておきます
liveBtn.enabled = false;
recBtn.enabled = false;
stopBtn.enabled = false;
・イベントハンドラー登録
ボタン押下イベントのハンドラーを登録します
connectBtn.addEventListener(MouseEvent.CLICK, connectBtnClickHandler);
liveBtn.addEventListener(MouseEvent.CLICK, onPublish);
recBtn.addEventListener(MouseEvent.CLICK, onPublish);
stopBtn.addEventListener(MouseEvent.CLICK, onUnPublish);
――――――――――――――――――――――
③．NetConnectionに接続
――――――――――――――――――――――
・FMS接続ボタン『connectBtn』の押下イベントをハンドリングする関数を作成
- NetConnectionのインスタンスを生成
- NetConnectionのステータスを監視するイベントハンドラーを生成
- NetConnectionに接続
private function onConnect():void
{
_nc = new NetConnection();
_nc.addEventListener(NetStatusEvent.NET_STATUS,
netConnectionStatusHandler);
_nc.connect(connectURI.text);
}
・NetConnectionに接続するメソッド connect の引数には次の情報が必要です。
- 配信プロトコル (rtmp、rtmps、rtmpt、rtmpe、rtmpte)
- サーバー名 (ホスト名＋ドメイン名)
- アプリケーション名
- インスタンス名
【書式】 (※前回のFMLEに接続するときに用いた書式と同じ)
{配信プロトコル} :// {サーバー名} / {アプリケーション名} / {インスタンス名}
引数となる変数 connectURI は上記情報入力フォームの文字列を連結した値として
定義しておきます
<mx:Label id="connectURI"
text="{protocolName.text}://{servName.text}/{appName.text}/{instName.text}"/>
・NetConnectionのステータスを監視するイベントハンドラー
- ステータス変更時に NetStatusEvent が送出され、状態を保持するオブジェクト
info プロパティをからイベント内容のストリングを保持する code プロパティを
取得してハンドリングします
(メモ：接続完了時は "NetConnection.Connect.Success" が送出されます)
switch(event.info.code)
{
// 接続完了時
case "NetConnection.Connect.Success":
_traceLog += "NC URI: " + _nc.uri.toString() + "\n";
// ビデオオブジェクト初期化
initDisplay();
liveBtn.enabled = true;
recBtn.enabled =true;
break;
// 接続失敗・拒否・切断時
case "NetConnection.Connect.Failed":
case "NetConnection.Connect.Rejected":
case "NetConnection.Connect.Closed":
liveBtn.enabled = false;
recBtn.enabled =false;
stopBtn.enabled = false;
break;
}
――――――――――――――――――――――
④．Videoクラスのインスタンスを生成
――――――――――――――――――――――
・Videoクラスのインスタンスを生成します
- 引数には 幅、高さを指定します
- Videoインスタンスの表示座標を指定します
- 作成したVideoインスタンスをステージに配置します
_video = new Video(320,240);
_video.x = 10;
_video.y = 50;
stage.addChild(_video);
――――――――――――――――――――――
⑤．Webカメラ、マイクを取得
――――――――――――――――――――――
・カメラとマイクのインスタンス化
- CameraクラスとMicrophoneクラスをインスタンスを生成するときは、他のクラスと
違いコンストラクタを使用せずに、静的メソッド getCamera()およびgetMicrophone()
を使用して、参照を返します
- カメラの画質設定
Camera.setMode(width, height, fps, favorArea)
・width：映像をキャプチャーする幅(pixcel)
・height：映像をキャプチャーする高さ(pixcel)
・fps：映像のキャプチャレート
・favorArea：要求した値がカメラに対応していない場合の優先度指定
- カメラのキーフレーム指定
Camera.setKeyFrameInterval(keyFrameInterval)
・keyFrameInterval：圧縮時のキーフレーム間隔(フレーム)を指定します
fpsを10、keyFrameIntervalを30に指定した場合は、3秒毎にキーフレームが指定
されます。
この値を大きく設定すると、キーフレームの送信回数が減り帯域使用量が軽減でき
逆に小さく設定すると、送信回数が増え帯域使用量が増大します。
動きの少ない映像の場合は値を大きく設定し、動きが大きい映像の場合は小さい
値に設定することをお勧めします。
- カメラの画質設定
Camera.setQulity(bandwidth, quality)
・bandwidth：カメラで使用できる最大帯域幅(バイト)
・quality：カメラの画質レベル(1～100)
最大帯域幅を優先するときは、bandwidthに値を設定し、qualityは"0"を指定します
画質レベルを優先するときは、bandwidthは"0"を指定し、qualityを設定します
- マイクのサンプリングレート
Microphone.rate
マイクのサウンドキャプチャ周波数(Hz)を指定します(5、8、11、22、44のいずれか)
値が高いほど高音質となります。
// カメラを取得・設定
_cam = Camera.getCamera();
_cam.setMode(320,240,10);
_cam.setKeyFrameInterval(30);
_cam.setQuality(30720,0);
// マイクを取得・設定
_mic = Microphone.getMicrophone();
_mic.rate = 22;
――――――――――――――――――――――
⑥．Videoインスタンスにカメラを割り当てる
――――――――――――――――――――――
・④で生成したVideoインスタンスに⑤で設定したCameraインスタンスを割り当てる
// Videoオブジェクトに割り当て
_video.attachCamera(_cam);
――――――――――――――――――――――
⑦．NetStreamクラスのインスタンスを生成
――――――――――――――――――――――
・NetStreamクラスのインスタンス生成
引数には③で生成したNetConnectionのインスタンスを指定します
_ns = new NetStream(_nc);
_ns.addEventListener(NetStatusEvent.NET_STATUS, netStreamStatusHandler);
――――――――――――――――――――――
⑧．NetStreamにカメラ・マイクを割り当てる
――――――――――――――――――――――
・④で生成したVideoインスタンスに⑦で生成NetStreamインスタンスを割り当てる
- カメラの割り当て
NetStream.attachCamera(Camera)
- マイクの割り当て
NetStream.attachAudio(Michrophone)
_ns.attachCamera(_cam);
_ns.attachAudio(_mic);
――――――――――――――――――――――
⑨．ライブストリームのパブリッシュ
――――――――――――――――――――――
・NetStreamを使用してライブストリームを配信します
- ライブストリームのパブリッシュ
NetStream.publish(name, type)
・name：配信するファイル名を指定します
今回は TextInputに入力された値(fileName.text)がファイル名となります
ファイル名は拡張子(.flv)を省略して指定します。
mystream.flvの場合
NetStream.publish("mystream", "live")
・type：パブリッシュする方法を指定します ("record"、"append"、"live")
recorde：ライブストリームをパブリッシュしながら録画します(上書き)
append ：ライブストリームをパブリッシュしながら録画します(追加保存)
live ：ライブストリームをパブリッシュのみ行います
switch(event.target.id)
{
// 「REC」ボタン押下：ライブ配信＋録画
case "recBtn":
_ns.publish(fileName.text, "record");
break;
// 「LIVE」ボタン押下：ライブ配信
case "liveBtn":
_ns.publish(fileName.text, "live");
break;
}
――――――――――――――――――――――
⑩．ライブストリームのパブリッシュを停止
――――――――――――――――――――――
_ns.close();
――――――――――――――――――――――――――――――――――――――――
５．サンプルを試す
・FMSの起動
(1) Start Adobe Flash Media Server 3.5 を選択します
(2) Start Flash Media Administration Server 3.5 を選択します
・FMS管理コンソールを開く
Flash Media Administration Console を選択します
・「Ctrl + F11」キーで、サンプルアプリを起動します
・「CONNECT」ボタンを押下します
・カメラ・マイクへのアクセス設定
- 「許可」を押下
・NetConnectionへの接続確認
- デバッグログに以下のログ表示されることを確認します
NC STATUS: NetConnection.Connect.Success
NC URI: rtmp://localhost/sample/myinst
- FMS管理コンソールで接続を確認します
アプリケーション名：sample
インスタンス名：myinst
- 設定が失敗している場合は以下のいずれかのログが表示されます
NC STATUS: NetConnection.Connect.Failed
NC STATUS: NetConnection.Connect.Rejected
NC STATUS: NetConnection.Connect.Closed
・ライブストリームのパブリッシュ
- 「LIVE」ボタンを押下
パブリッシュが開始されると以下のログが表示されます
NS STATUS:NetStream.Publish.Start
- FMS管理コンソールでライブストリームの配信を確認します
「Streams」タグをクリックします
パブリッシュファイル名：live
・ライブストリームのパブリッシュの停止
- 「STOP」ボタンを押下
パブリッシュが停止すると以下のログが表示されます
NS STATUS:NetStream.Unpublish.Success
・ライブストリームのパブリッシュ＋録画
- 「REC」ボタンを押下
パブリッシュと録画が開始されると以下のログが表示されます
NS STATUS:NetStream.Publish.Start
NS STATUS:NetStream.Record.Start
・ライブストリームのパブリッシュ＋録画の停止
- 「STOP」ボタンを押下
パブリッシュと録画が停止すると以下のログが表示されます
NS STATUS:NetStream.Record.Stop
NS STATUS:NetStream.Unpublish.Success
・録画ファイルの確認
- ファイル名(TextInput)で指定したFlashビデオ(FLV)が以下の場所に保存されます
C:\Program Files\Adobe\Flash Media Server 3.5\applications\sample\streams\myinst\
――――――――――――――――――――――――――――――――――――――――
６．最後に
Cameraクラス、Microphoneクラスの設定には、今回ご紹介したパラメータ以外にさまざまな
パラメータが用意されています。
実際にサンプルに追加して自分に好みの設定を見つけていっていただければと思います。
もちろん、カメラやマイクの性能と、サーバが配信できる最大帯域幅によって設定を調整
できる範囲が決まってくるので、それらを事前に調べたうえでの調整が必要です。
例えば、
・「音質を上げたい！」
→ Microphone.encodeQulity(encodeQuality)
Microphone.rate
・「高画質の映像を配信したい！」
→ Camera.setQulity(bandwidth, quality)
Camera.setMode(width, height, fps, favorArea)
・「最大接続数を増やすことを優先したい！」
→ Camera.setQulity(bandwidth, quality)
Microphone.rate
Jストリームでは国内最大規模のCDN活用し、大規模なライブ配信を行うことが可能です。
これまでの実績で培ったノウハウにより、仕様の決定から当日の現場対応まで幅広くサポ
ートいたします。
Jストリームのライブ中継サービス
次回は、Flash ライブプレイヤー開発【その３】として
「カスタムライブ視聴プレイヤーの作成」について解説致します。
ご期待下さい。
【関連記事】
Flash ライブプレイヤー開発
■Flash ライブプレイヤー開発 【その１】
Flash Videoのプレイヤー開発
■Flash Videoのプレイヤー開発 【その４】
■Flash Videoのプレイヤー開発 【その３】
■Flash Videoのプレイヤー開発 【その２】
■Flash Videoのプレイヤー開発 【その１】
コメント