Fusic Developers Weblog

はじめまして、Fusicの杉本です。

Fusic Advent Calenderのルーレットをノリで作った張本人です。
ここまで同じ人に複数回当たったり、言い出しっぺの弊社小山が当たっていなかったりと、バグって偏っているのではと責められてきましたが、やっと自分が当たって疑いが晴れた感じです。

USTREAM API

USTREAMといえば、先日宇多田ヒカルさんのライブを中継して話題になりましたね。
同時アクセス10万以上、ユニークユーザ34万5000人、加えてあの画質と音質、USTREAMすごい！と感動した方も少なくないのではないでしょうか。
また弊社でもUSTREAMを使ったサービスZENPREを提供しています。ご存じない方は是非一度アクセスしてみて下さい。

さて、USTREAM APIの情報については、こちらに公開されています。

• Data API Documentationは、ユーザ情報やチャンネルのURL、タイトル、概要などをhtml/json/xml/php形式で返してくれるAPI情報です。

• Flash Client API Documentation (AsDoc)は、LIVE動画や録画動画のビューワや動画配信するブロードキャスターのFlashをカスタム実装するためのAPI情報です。

今回はUSTREAMのFlash Client APIについて、ご紹介したいと思います。

Flash Client API

ドキュメントはASDoc形式になっていて見慣れた感じですが、コメントが少なく非常に分かりづらいです。
実装の仕方はここにサンプルなどがあります。ここではビューワの実装方法について説明していきます。
まずは提供されているswfをロードします。

Security.allowDomain("*");
var viewerLoader = new Loader();
viewerLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onRslLoad);
this.addChild(viewerLoader);
 
var applicationDomain:ApplicationDomain = ApplicationDomain.currentDomain;
var loaderContext:LoaderContext = new LoaderContext();
var request:URLRequest = new URLRequest("http://www.ustream.tv/flash/viewer.rsl.swf");
 
loaderContext.applicationDomain = applicationDomain;
viewerLoader.load(request, loaderContext);

LoaderのCOMPLETEイベントでtv.ustream.viewer.logicパッケージのLogicクラスをインスタンス化します。

private function onRslLoad(e:Event):void {
	var logicClass:Class = viewerLoader.contentLoaderInfo.applicationDomain.getDefinition("tv.ustream.viewer.logic.Logic") as Class;
	viewer = new logicClass();
}

Display Class

表示するUSTREAM映像の大きさを指定します。上記viewerオブジェクトのdisplayプロパティで値を設定します。width=300,heigth=200くらいが最小値のようです。

viewer.display.width = 360;
viewer.display.height = 240;

Channel ClassとRecorded Class

チャンネルの設定や動画の再生・停止、音量調整などはこちらのクラスを使います。
Channel　ClassがLIVE配信用、Recorded Classが録画再生用となっています。基本的に使い方は同じですが、動画をロードするメソッドが異なります。

// LIVE配信用のロード
viewer.createChannel(channelId);
// 録画用のロード
viewer.createRecorded(channelId);

channelIdが少し分かりづらいですが、以下のようになっています。
LIVE配信用は、ライブ配信ページのURL「http://www.ustream.tv/broadcaster/*******」の一番最後のスラッシュ以下の数字
録画再生用は、録画動画受信ページのURL「http://www.ustream.tv/recorded/*******」の一番最後のスラッシュ以下の数
となっています。このメソッドをたたくと、USTREAMにchannelIdを渡して、動画を読み込み始めます。
余談ですが、サービスでこのchannelIdをユーザに入力してもらうのは難しいと思いますので、今回は紹介していないUSTREAMのData APIと連携し、番組名の登録でchannelIdを取得するようにしてみてはいかがでしょうか。（ZENPREではそうしています）

イベント

次に、その際に発生するイベントについて発生する順番で説明をしていきます。

• found・・・指定したchannelIdの動画が見つかった時
• video・・・ビデオが見つかった時
• audio・・・音声が見つかった時
• createStream・・・動画ストリームがつながった時
• getProgressive・・・動画のダウンロードが開始した時
• progress・・・動画のバッファを読み込む毎に

その他のイベントについても簡単に説明をします。

• finish・・・動画が最後まで再生された時
• destroy・・・インスタンスを削除(destroyメソッドを叩いた)した時
• muted・・・ミュートした時

これらイベントは、LIVE配信時と録画再生時では参照するプロパティが異なりますので、注意して下さい。以下に例を示します。

// LIVE配信時
viewer.channel.addEventListener("found", function(e:Event):void {
				// 処理を入れる
});
// 録画再生時
viewer.recorded.addEventListener("found", function(e:Event):void {
				// 処理を入れる
});

動画の再生・停止のイベントがないのがちょっと不便です。これらは自前で実装する必要があります。

主要なメソッドとプロパティ

最後にプレーヤを実装する上で注意が必要なメソッドとプロパティを説明をします。

【メソッド】

• seek(percent:Number, bufferOnly:Boolean = false):Boolean

→シーク先の値は、録画動画のトータル再生時間における割合（値は０以上1以下）を第1引数に渡します。後述のプロパティdurationを使って算出します。

【プロパティ】

• bufferProgress: Number[読み取り専用]

→動画データのダウンロードしたバッファーのプログレス値。値は０以上1以下です。

• duration: Number[読み取り専用]

→動画のトータル再生時間。単位は秒。

• seekTo: Number[読み書き込み]

→seekメソッドと同じ。こちらも値は録画動画のトータル再生時間における割合（値は０以上1以下）のため注意。

• time: Number[読み取り専用]

→現在の動画再生時間。単位は秒。

• volume: Number[読み書き込み]

→動画の音量。値は０以上1以下です。

まとめ

以上、USTREAM Flash Client APIの使い方の紹介でした。
紹介した以外にも色々なAPIが用意されていますので、興味のある方は是非カスタムプレーヤを作ってみて下さい。またLIVE配信をする時は、通常USTREAMが用意したFlash（Web）かProducerを使うと思いますが、このAPIを使うと自前でブロードキャスタも作れます。

今年Ustream Asia Inc.も設立され、ストリーム配信が盛り上がってきています。TVやラジオといったメディアの形が見直され、いつでもどこでも誰でも簡単に配信できる環境ができてきています。
いままで当たり前だったことが崩され、変化していくというのはおもしろいですよね。自分が持っているものでコンテンツ化できるものがないか考えてみると、新しいサービスやビジネスが思いつくかもしれません。その第一歩として、弊社サービスZENPREを使ってみるのはいかがでしょうか。
と、宣伝をいたしまして終わりたいと思います。
（私は社内一まじめな人間なので、他の人みたいにボケたり、オチを入れたりしません。）

長文を最後までお読みいただき、ありがとうございました。
それでは良いお年を（もう当たらんだろう）