ご希望の DAI ソリューションを選択する
フルサービス DAI
このガイドでは、IMA CAF DAI SDK を使って DAI ストリームを再生する方法を説明します。条件 完了した統合のサンプルを表示またはフォローする サンプルをダウンロードしてください。
このガイドを使用する前に、Chromecast
アプリケーション フレームワークの Web Receiver プロトコル。この
CAF レシーバーのコンセプト(
メッセージ
インターセプタ
および
mediaInformation
Chromecast のコマンド&コントロール
ツールを使用して CAF 送信者をエミュレートします。
IMA DAI を使用するには、アド マネージャー 360 アカウント。広告がある場合 詳しくは、アカウント マネージャーにお問い合わせください。詳細情報 アド マネージャーへのお申し込みについて詳しくは、アド マネージャー ヘルプ Center にあります。
他のプラットフォームとの統合や IMA の使用について詳しくは、 Interactive Media Ads SDK をご覧ください。
CAF DAI の概要
IMA CAF DAI SDK を使用して DAI を実装するには、主に次の 2 つのコンポーネントを使用します。 次のとおりです。
StreamRequest
: Google の広告サーバーへのストリーム リクエストを定義するオブジェクト。 ストリーム リクエストには主に 2 つの種類があります。LiveStreamRequest
: は、アセットキー、およびオプションの API キー、その他 オプション パラメータです。VODStreamRequest
: コンテンツ ソース ID、動画 ID、オプションの API を指定します key、その他の省略可能なパラメータがあります。
StreamManager
: 動画ストリームと IMA DAI 間の通信を処理するオブジェクト (トラッキング ping の呼び出しや、 あります。
前提条件
- 以下を搭載した Cast Developer Console アカウント 登録済みのテストデバイスです。
- ホスト型のウェブ レシーバー アプリ 登録され、それをホストするために修正できるもの、 同じコードを使用します
- ウェブ受信アプリを使用するように構成された送信アプリ。この例 Cast Command and Control ツールを 表示されます。
送信者の MediaInfo オブジェクトを構成する
まず、送信側のアプリの MediaInfo を設定します。 オブジェクト 次のフィールドがあります。
contentId
|
このメディア アイテムの一意の識別子です | |
contentUrl
|
DAI StreamRequest が失敗した場合に読み込まれる代替ストリーム URL 理由 | |
streamType
|
ライブ配信の場合は、この値は「LIVE」に設定する必要があります。VOD ストリームの場合 この値は `BUFFERED` に設定する必要があります | |
customData
|
assetKey
|
ライブ配信のみ。読み込むライブ配信を識別します。 |
contentSourceId
|
VOD ストリームのみ次の要素を含むメディア フィードを識別します: ストリーミングがリクエストされました。 | |
videoId
|
VOD ストリームのみリクエストされたストリームを 表示されます。 | |
ApiKey
|
ストリーム URL の取得に必要な API キー(省略可) IMA DAI SDK | |
senderCanSkip
|
送信側のデバイスが次の状態にあるかどうかをレシーバに知らせるブール値 スキップボタンを表示する機能、スキップ可能な広告に対応 |
キャスト コマンド&コントロール ツールでこれらの値を設定するには、[読み込み
メディア] タブで、カスタム読み込みリクエスト タイプを LOAD
に設定します。次に、
テキスト領域の JSON データ。次のいずれかの JSON オブジェクトが含まれます。
ライブ
{
"media": {
"contentId": "bbb",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
"streamType": "LIVE",
"customData": {
"assetKey": "sN_IYUG8STe1ZzhIIE_ksA",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
VOD
{
"media": {
"contentId": "tos",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
"streamType": "BUFFERED",
"customData": {
"contentSourceId": "2548831",
"videoId": "tears-of-steel",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
このカスタム読み込みリクエスト オブジェクトを受信機に送信して、 説明します。
基本的な CAF レシーバーを作成する
CAF SDK 基本レシーバガイドに沿って、基本的なウェブ レシーバを作成します。
レシーバーのコードは次のようになります。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
cast.framework.CastReceiverContext.getInstance().start();
</script>
</body>
</html>
IMA DAI SDK をインポートしてプレーヤー マネージャーを入手する
スクリプトタグを追加して、CAF 用の IMA DAI SDKr をウェブレシーバーにインポートします。これは、スクリプトが CAF を読み込んだ直後に行います。CAF DAI SDK は常時利用可能なため、 特定のバージョンを設定します次に、後続のスクリプトタグで、 コンテキストとプレーヤー マネージャーを定数として指定してから、レシーバーを開始します。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
castContext.start();
</script>
</body>
</html>
IMA Stream Manager を初期化する
CAF DAI SDK のストリームを初期化します。 。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
castContext.start();
</script>
</body>
</html>
読み込みメッセージ インターセプタを作成する
CAF DAI SDK は CAF 読み込みメッセージを使用します。
インターセプター
を使ってストリーミング リクエストを行い、コンテンツの URL を最終的な DAI ストリームに置き換えることができます。
メッセージ インターセプタは streamManager.requestStream() を呼び出し、
ミッドロール挿入点の設定、ストリームのリクエスト、既存の
contentURL
。
読み込みメッセージ インターセプタは 1 つしか存在しないため、アプリで 使用する場合は、カスタム関数を同じ関数内に組み込んでください。 呼び出すことができます。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => null;
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
this.broadcast('Stream request successful.');
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
ストリーム リクエストを作成する
CAF DAI 統合を完了するには、ストリームを構築する必要があります。
リクエスト
送信者からの mediaInfo
オブジェクトに含まれるデータを使用します。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => {
const imaRequestData = request.media.customData;
let streamRequest = null;
if (imaRequestData.assetKey) {
// Live stream
streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
streamRequest.assetKey = imaRequestData.assetKey;
} else if (imaRequestData.contentSourceId) {
// VOD stream
streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
streamRequest.contentSourceId = imaRequestData.contentSourceId;
streamRequest.videoId = imaRequestData.videoId;
}
if (streamRequest && imaRequestData.ApiKey) {
streamRequest.ApiKey = imaRequestData.ApiKey;
}
if (streamRequest && imaRequestData.senderCanSkip) {
streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
}
return streamRequest;
};
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
Google の CAF DAI SDK を使用して DAI ストリームをリクエストして再生できるようになりました。 SDK のより高度な機能について詳しくは、 サンプルのレシーバーをダウンロード 説明します。