目的の DAI ソリューションを選択する
Pod サービング DAI
IMA SDK を使用すると、ウェブサイトとアプリにマルチメディア広告を簡単に統合できます。
IMA SDK では、VAST 準拠の広告サーバーに広告をリクエストし、アプリでの広告再生を管理できます。
IMA DAI SDK を使用すると、アプリは VOD またはライブ コンテンツの広告とコンテンツ動画のストリーム リクエストを行います。SDK は結合された動画ストリームを返すため、アプリ内で広告とコンテンツ動画の切り替えを管理する必要はありません。
このガイドでは、IMA DAI SDK for CAF を使用して Live DAI Pod Serving ストリームを再生する方法について説明します。
このガイドを使用する前に、Chromecast アプリケーション フレームワークのウェブ レシーバー プロトコルについて理解しておいてください。このガイドは、メッセージ インターセプタや mediaInformation オブジェクトなどの CAF レシーバーのコンセプトに関する基本的な知識と、Cast Command and Control ツールを使用して CAF センダーをエミュレートする方法を理解していることを前提としています。
IMA DAI 連続配信広告を使用するには、連続配信パートナーと連携し、アド マネージャー 360 Advanced アカウントを所有している必要があります。アド マネージャー アカウントをお持ちの場合は、詳細についてアカウント マネージャーにお問い合わせください。アド マネージャーへのお申し込みについては、アド マネージャー ヘルプセンターをご覧ください。
他のプラットフォームとの統合や IMA クライアントサイド SDK の使用方法については、Interactive Media Ads SDK をご覧ください。
IMA DAI Pod Serving の概要
IMA CAF DAI SDK を使用した Pod 配信の実装には、このガイドで説明する 2 つの主要コンポーネントが含まれます。
StreamRequest
: Google の広告サーバーへのストリーム リクエストを定義するオブジェクト。リクエストでは、ネットワーク コード、カスタム アセットキー、オプションの API キー、その他のオプション パラメータを指定します。StreamManager
: トラッキング ping の呼び出しやストリーム イベントのパブリッシャーへの転送など、動画ストリームと IMA DAI SDK 間の通信を処理するオブジェクト。
前提条件
- 登録済みのテストデバイスがある Cast Developer Console アカウント。
- Cast Developer Console に登録され、このガイドで提供されるコードをホストするために変更できる、ホストされたウェブ レシーバー アプリ。
- ウェブ レシーバー アプリを使用するように構成された送信アプリ。この例では、キャスト コマンド&コントロール ツールをセンダーとして使用します。
送信者の MediaInfo オブジェクトを構成する
まず、送信側アプリの MediaInfo
オブジェクトを構成して、次のフィールドを含めます。
項目 | 目次 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
contentId
|
このメディア アイテムの一意の識別子。
CONTENT_ID |
||||||||||
contentUrl
|
省略可。DAI ストリームの読み込みに失敗した場合に再生するバックアップ ストリームの URL。
BACKUP_STREAM_URL |
||||||||||
contentType
|
省略可。コンテンツ バックアップ ストリームの MIME タイプ。DASH ストリームの場合にのみ必要です。
CONTENT_STREAM_MIMETYPE |
||||||||||
streamType
|
この値に使用される文字列リテラルまたは定数は、送信プラットフォームによって異なります。 | ||||||||||
customData
|
customData フィールドには、追加の必須フィールドの Key-Value ストアが含まれます。
|
作業を開始するために役立つコードサンプルを次に示します。
ウェブ
キャスト ウェブ センダーでこれらの値を設定するには、まず必要なデータを含む MediaInfo
オブジェクトを作成してから、ウェブ レシーバに読み込みリクエストを行います。
// Create mediaInfo object
const mediaInfo = new chrome.cast.media.MediaInfo("CONTENT_ID");
mediaInfo.contentUrl = "BACKUP_STREAM_URL";
mediaInfo.contentType = "CONTENT_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.LIVE;
mediaInfo.customData = {
manifestUrl: "MANIFEST_URL",
networkCode: "NETWORK-CODE",
customAssetKey: "CUSTOM_ASSET_KEY",
apiKey: "API_KEY"
};
// Make load request to cast web receiver
const castSession = cast.framework.CastContext.getInstance().getCurrentSession();
const request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
() => { console.log('Load succeed'); },
(errorCode) => { console.log('Error code: ' + errorCode); });
Android
キャスト ウェブ センダーでこれらの値を設定するには、まず必要なデータを含む MediaInfo オブジェクトを作成してから、ウェブ レシーバに読み込みリクエストを行います。
JSONObject customData = new JSONObject()?
.put("manifestUrl", "MANIFEST_URL")
.put("networkCode", "NETWORK-CODE")
.put("customAssetKey", "CUSTOM_ASSET_KEY")
.put("apiKey", "API_KEY");
MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
.setContentUrl("BACKUP_STREAM_URL")
.setContentType("CONTENT_STREAM_MIMETYPE")
.setStreamType(MediaInfo.STREAM_TYPE_LIVE)
.setCustomData(customData)
.build();
RemoteMediaClient remoteMediaClient = mCastSession.getRemoteMediaClient();
remoteMediaClient.load(new MediaLoadRequestData.Builder().setMediaInfo(mediaInfo).build());
iOS(Obj-C)
キャスト ウェブ センダーでこれらの値を設定するには、まず必要なデータを含む GCKMediaInformation
オブジェクトを作成してから、ウェブ レシーバに読み込みリクエストを行います。
NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
@"manifestUrl": @"MANIFEST_URL",
@"networkCode": @"NETWORK-CODE",
@"customAssetKey": @"CUSTOM_ASSET_KEY",
@"apiKey": @"API_KEY"};
mediaInfoBuilder.customData = customData;
GCKMediaInformationBuilder *mediaInfoBuilder =
[[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeLive;
mediaInfoBuilder.customData = customData;
self.mediaInformation = [mediaInfoBuilder build];
GCKRequest *request = [self.sessionManager.currentSession.remoteMediaClient loadMedia:self.mediaInformation];
if (request != nil) {
request.delegate = self;
}
iOS(Swift)
キャスト ウェブ センダーでこれらの値を設定するには、まず必要なデータを含む GCKMediaInformation
オブジェクトを作成してから、ウェブ レシーバに読み込みリクエストを行います。
let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
print("invalid mediaURL")
return
}
let customData = [
"liveConfigID": "MANIFEST_URL",
"networkCode": "NETWORK-CODE",
"customAssetKey": "CUSTOM_ASSET_KEY",
"region": "API_KEY"
]
let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.Live
mediaInfoBuilder.customData = customData
mediaInformation = mediaInfoBuilder.build()
guard let mediaInfo = mediaInformation else {
print("invalid mediaInformation")
return
}
if let request = sessionManager.currentSession?.remoteMediaClient?.loadMedia
(mediaInfo) {
request.delegate = self
}
CAC ツール
Cast Command and Control ツールでこれらの値を構成するには、[Load Media(メディアの読み込み)] タブをクリックし、カスタム読み込みリクエスト タイプを LOAD に設定します。次に、テキスト領域の JSON データを次の JSON に置き換えます。
{
"media": {
"contentId": "CONTENT_ID",
"contentUrl": "BACKUP_STREAM_URL",
"contentType": ""CONTENT_STREAM_MIMETYPE"",
"streamType": "LIVE",
"customData": {
"liveConfigID": "MANIFEST_URL",
"networkCode": "NETWORK-CODE",
"customAssetKey": "CUSTOM_ASSET_KEY",
"oAuthToken": "API_KEY"
}
}
}
このカスタム読み込みリクエストをレシーバーに送信して、残りのステップをテストできます。
基本的な CAF レシーバーを作成する
CAF SDK カスタムウェブ レシーバー ガイドの手順に沿って、カスタム ウェブ レシーバーを作成します。
レシーバのコードは次のようになります。
<html>
<head>
<script
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
// ...
</script>
</body>
</html>
IMA DAI SDK をインポートしてプレーヤー マネージャーを入手する
CAF を読み込むスクリプトの直後に、IMA DAI SDK for CAF をウェブ レシーバーにインポートするスクリプトタグを追加します。レシーバーを開始する前に、スクリプトタグでレシーバー コンテキストとプレーヤー マネージャーを定数として保存します。
<html>
<head>
<script
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 ストリーム マネージャーを初期化する
IMA Stream Manager を初期化します。
<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 に渡す前に、LOAD メッセージ インターセプタでストリーム リクエストを作成します。
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
/**
* Creates a livestream request object for a pod serving stream.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {StreamRequest} an IMA stream request
*/
const createStreamRequest = (castRequest) => { /* ... */};
/**
* Initates a DAI stream request for the final stream manifest.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
*/
const createDAICastRequest = (castRequest) => {
return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
.then((castRequestWithPodStreamData) => {
console.log('Successfully made DAI stream request.');
// ...
return castRequestWithPodStreamData;
})
.catch((error) => {
console.log('Failed to make DAI stream request.');
// CAF will automatically fallback to the content URL
// that it can read from the castRequest object.
return castRequest;
});
};
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, createDAICastRequest);
castContext.start();
ストリーム リクエストを作成する
createStreamRequest
関数を完成させて、CAF 読み込みリクエストに基づいて Pod 提供ストリームを作成します。
/**
* Creates a livestream request object for a pod serving stream.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {StreamRequest} an IMA stream request
*/
const createStreamRequest = (castRequest) => {
const streamRequest = new google.ima.cast.dai.api.PodStreamRequest();
const customData = castRequest.media.customData;
streamRequest.customAssetKey = customData.customAssetKey;
streamRequest.networkCode = customData.networkCode;
streamRequest.apiKey = customData.apiKey;
return streamRequest;
};
コンテンツ URL をマニフェスト URL とストリーム ID に置き換える
ストリーム リクエストが成功した場合は、streamManager.getStreamId()
を使用してストリームの ID を取得し、それを manifestUrl に挿入します([[STREAMID]]
に置き換えます)。次に、既存の contentUrl
を新しい manifestUrl
に置き換えて、CAF が合成された連続配信広告でライブ配信を再生できるようにします。
/**
* Initates a DAI stream request for the final stream manifest.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
*/
const createDAICastRequest = (castRequest) => {
return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
.then((castRequestWithPodStreamData) => {
console.log('Successfully made DAI stream request.');
const media = castRequestWithPodStreamData.media;
const manifestUrl = media.customData.manifestUrl || "";
if (manifestUrl) {
console.log('Replacing the contentURL with the manifest URL and stream ID');
const streamId = streamManager.getStreamId();
castRequestWithPodStreamData.media.contentUrl = manifestUrl.replace('[[STREAMID]]', streamId);
return castRequestWithPodStreamData;
})
.catch((error) => {
console.log('Failed to make DAI stream request.');
// CAF will automatically fallback to the content URL
// that it can read from the castRequest object.
return castRequest;
});
};
キャスト アプリケーション フレームワークと IMA DAI SDK for CAF を使用して、Pod 配信ストリームをリクエストして再生できるようになりました。