映像配信用 API

Web 配信用埋め込み機能

概要

Web配信用埋め込みAPIを使用することで、Ustreamストックウェブ配信flashアプリケーションを使った外部のウェブサイトでも映像配信をすることができます。

この機能を使っている代表的なプラットフォームサービスプロバイダーには、ConcertWindowや Eleutian や StageItといった企業があります。 Ustream のウェブ配信機能を使っているので、ユーザーはこれら企業のWebページ上から映像配信をすることができます。 Ustream APIを使用することで、認証やチャンネルの管理なども前述企業のページ上から操作できます。

使用方法

Web 放送用埋め込み APIを使用したい放送配信者は少なくとも以下の機能を実装する必要があります。:

  • OAuth v2 認証を実装し、Ustreamのチャンネルにアクセスして認証トークンを取得できるようにする。
  • 自分のサイトにWeb放送機能を埋め込む

使用例

使用可能な基本例がGitHubにあります。

同期メタ

概要

ライブ放送のコンテンツは、大抵20-30秒ほど遅れて視聴者に届きます。HTTPベースの映像配信技術ではこういったことが起こります。 同期メタ機能を使用することで、映像配信者は同期イベントやデータを放送に埋め込んで視聴者に送信することができます。 送られてきたイベント･データは映像と同期するために処理・操作・表示することができます。 あなたのサイトで提供されている個々のサービスを統合したいのであれば(例えば、メッセージサービスとスライドショー演出など)、同期メタが役立つでしょう。

同期メタを実装するには以下の手順が必要です。:

  • Web 配信埋め込み機能を実装するか、 Ustream 映像配信用 SDKで独自の配信システムを作ることによって、この機能を使うことができます。
  • 映像配信側で検知対象の事象が発生した時(例えば、スライドショーAPPにてページめくりが発生した場合など)、 ウェブ配信用埋め込み機能の該当イベント、もしくは映像配信用SDKの該当メソッドが、 特定のパラメータを付与されて実行されます。このパラメータは、サイト上での演出の補正に使用することができます。
  • その後映像配信側は放送の中にイベントやパラメータを埋め込み、埋め込まれた情報は全てクライアント側に配信されます。
  • 視聴者が映像中にメソッドが実行された再生位置に達すると、Ustream 動画再生用 Javascript API (動画再生用API)へ向けてイベントが実行されます。 JavaScriptイベントは、配信者側で各種パラメータが埋め込まれた放送と同期して発生するので、クライアント側でも同様に適切なタイミングで適切なページに切り替えて演出をすることができます。

制限事項

制限事項

現在同期メタは、フラッシュプレイヤーでライブ放送を視聴する場合にのみしか動作しません。

Broadcaster Flash APIを使っている独自の映像配信APPや、 動画再生用APIを使っている独自の視聴ページなどは、 同期メタを使用できる作りにする必要があります。

映像配信用APIと動画再生用APIは、どちらも最新バージョンに更新しなければなりません。

ケーススタディ

Eleutian社では、自社サイト上で映像配信者と視聴者をつなぎ、遠距離での英語のE-ラーニングを支援しています。 映像配信者（ここでは英語を教える側）は、ライブ配信で自分の講義を共有することができます。 Eleutian社の以前の実装ではCrocodocおよびPubNubと呼ばれるメッセージサービスを使って上手くメディアの共有をしていましたが、 それらは全く無関係であるかのように、Ustreamの放送とは全く同期していませんでした。 これはしばしば、視聴する生徒たちにとって重大な問題を引き起こしました。 例えば、配信者はある話題について話した後に別の話題に話を変える際、そのちょうど話を変えるタイミングでスライドを変更するかもしれません。 生徒側から見ると当然、映像の中ではまだ最初の話題について話しているのに、スライドのほうが突然次の話題に切り替わるということが転送遅延によって起こります。 当然のことですが、どれだけ遅延するかというのは接続速度やその他様々な要因に基づいているので視聴者によって異なります。

同期メタの機能を使用することで、Eleutian社では現在完璧なタイミングで演出と配信映像を同期させることができています。

同期メタを使用する

同期メタを使用開始するには、二つのAPIを実装する必要があります。一つは映像配信者側で実装し、もう一つは動画再生側で実装します。

映像配信側

以下のJavaScriptコードは、同期メッセージの送信を実装する場合に使えます。

HTMLへの埋め込み

この例では、Web 放送の埋め込み機能を使ってメッセージを送信しています。最初のステップでは、ページにUstreamのウェブ放送を埋め込みます。

(メモ: cid引数 と accessToken引数に設定している値はあくまで例として記載しているものなので、便宜書き換えてください。)

<object width="100%" height="100%" type="application/x-shockwave-flash" id="BroadcasterFlash" name="BroadcasterFlash" data="http://www.ustream.tv/flash/broadcastair.token.swf?" style="visibility: visible;">
	<param name="flashvars" value="cid=13407137&accessToken=80432582c9d7b3d376cf56e0484ecd50&retina=false&objectPath=window.ustream.flash.broadcaster.BroadcasterFlash">
	<param name="allowfullscreen" value="true">
	<param name="allowscriptaccess" value="always">
	<param name="wmode" value="opaque">
</object>
Javascript のハンドラを作成する。

映像配信者がJSメソッドを実行できるようにするためのオブジェクトを作成します。

(メモ：オブジェクト名にはflashvars パラメータ内で設定したobjectPath引数と同じ値を使います。)

var ustream = {};

ustream.flash = {};
ustream.flash.broadcaster = {};
ustream.flash.broadcaster.BroadcasterFlash = {};

ハンドシェイクのため、BroadcasterFlashは内部でreadyメソッドを実行します。このredyメソッドはBroadcaster内部で必ず実行するようにしてください。

var broadcasterFlash = document.getElementById('BroadcasterFlash');

ustream.flash.broadcaster.BroadcasterFlash.ready = function(){
	broadcasterFlash.ready();
}

準備ができた後、syncMetaに設定したコールバック関数がBroadcasterFlash内で実行されます。

var objectToSend = {
	isExample: true
};

broadcasterFlash.syncMeta(objectToSend);

視聴者側

同期イベントの通知を受け取るため、 動画再生用APIを使ってSyncedMetaイベントを登録します。登録したイベントは、放送中に同期メタを受信した場合に発生します。

function callBackFunction(){
	console.log(arguments);
}

viewer.addListener('syncedmeta', callBackFunction);

この機能を使うために、独自の動画再生プレイヤーを作る必要はありません。

詳細については、動画再生用APIのドキュメントを参照してください。