Chromecast で IMA DAI SDK を使用する

Google Cloud Video Stitcher API で登録されたライブ配信を再生する

このガイドでは、CAF ウェブ レシーバー用の IMA DAI SDK を使用して、Google Cloud Video Stitcher API に登録されたイベントのライブ ストリームをリクエストして再生する方法と、再生中にミッドロール挿入点を挿入する方法について説明します。

このガイドでは、フルサービス DAI の基本的な例を拡張し、Google Cloud Video Stitcher API で登録されたストリームのサポートを追加します。

続行する前に、ご利用のストリーミング形式が CAF ウェブ レシーバーでサポートされていることを確認してください。

他のプラットフォームとの統合や IMA クライアントサイド SDK の使用については、Interactive Media Ads SDK をご覧ください。

背景

このガイドを使用する前に、Chromecast アプリケーション フレームワークのウェブ レシーバー プロトコルを理解しておいてください。

このガイドでは、メッセージ インターセプタ、MediaInformation オブジェクト、Cast コマンド アンド コントロール ツールを使用して CAF 送信者をエミュレートするなど、CAF レシーバーのコンセプトを基本レベルで理解していることを前提としています。

アプリのコンポーネントとアーキテクチャ

IMA CAF DAI SDK を使用して Google Cloud Video Stitcher API でライブ配信の再生を実装するには、このガイドで説明するように、次の 2 つの主要コンポーネントが必要です。

  • VideoStitcherLiveStreamRequest: Google のサーバーへのストリーム リクエストを定義するオブジェクト。リクエストでは、Cloud Video Stitcher API のインスタンスとライブ構成 ID を指定し、その他のパラメータを指定できます。
  • StreamManager: 動画ストリームと IMA DAI SDK 間の通信を処理するオブジェクト（トラッキング ピングの発行、ストリーム イベントのパブリッシャーへの転送など）。

前提条件

IMA SDK には次の変数が必要です。

  • ライブ構成 ID: Video Stitcher API ライブ構成の作成時に指定したライブ構成 ID です。

    LIVE_CONFIG_ID

  • ロケーション - ライブ 構成が作成された Google Cloud リージョン:

    LOCATION

  • プロジェクト番号: Video Stitcher API を使用する Google Cloud プロジェクト番号。

    PROJECT_NUMBER

  • OAuth トークン: Video Stitcher ユーザーロールを持つサービス アカウントの有効期間が短い OAuth トークン。サービス アカウントの有効期間の短い認証情報の作成の詳細を確認する。

    OAUTH_TOKEN

  • ネットワーク コード: 広告をリクエストするための Google アド マネージャーのネットワーク コード。

    NETWORK_CODE

  • カスタム アセットキー: Video Stitcher API を使用してライブ配信イベントの設定を作成するプロセス中に生成される Google アド マネージャーのカスタム アセットキー。

    CUSTOM_ASSET_KEY

カスタム キャスト レシーバーには、次のものが必要です。

ストリームデータをレシーバに渡す送信元を準備する

まず、ウェブ受信側に読み込みリクエストを送信するように送信側のアプリを構成します。プラットフォームの MediaInformation オブジェクトに次のフィールドを含めます。

フィールド 目次
contentId Cast リファレンス ドキュメントで定義されている、このメディア アイテムの固有識別子。この ID は、同じメディアキュー内の複数のアイテムに再利用しないでください。

CONTENT_ID
contentUrl DAI ストリームの読み込みに失敗した場合に再生するバックアップ ストリーム URL（省略可）。

BACKUP_STREAM_URL
contentType DAI ストリームの読み込みに失敗した場合に再生するバックアップ ストリーム URL の Mimetype（省略可）。

BACKUP_STREAM_MIMETYPE
streamType この値に使用される文字列リテラルまたは定数は、送信者のプラットフォームによって異なります。

LIVE
customData

customData フィールドには、追加の必須フィールドの Key-Value ストアが含まれています。この場合、customData には収集した DAI ストリーム データが含まれます。

フィールド 目次
liveConfigID LIVE_CONFIG_ID
region LOCATION
projectNumber PROJECT_NUMBER
oAuthToken OAUTH_TOKEN
networkCode NETWORK_CODE
customAssetKey CUSTOM_ASSET_KEY

以下に、すぐに利用できるコードサンプルを示します。

ウェブ

Cast ウェブ送信側でこれらの値を構成するには、まず必要なデータを含む MediaInfo オブジェクトを作成し、ウェブ受信側に読み込みリクエストを送信します。

// Create mediaInfo object
const mediaInfo = new chrome.cast.media.MediaInfo("CONTENT_ID");
mediaInfo.contentUrl = "BACKUP_STREAM_URL";
mediaInfo.contentType = "BACKUP_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.LIVE;
mediaInfo.customData = {
liveConfigID: "LIVE_CONFIG_ID",
region: "LOCATION",
projectNumber: "PROJECT_NUMBER",
oAuthToken: "OAUTH_TOKEN",
networkCode: "NETWORK_CODE",
customAssetKey: "CUSTOM_ASSET_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

Cast ウェブ送信側でこれらの値を構成するには、まず必要なデータを含む MediaInfo オブジェクトを作成し、ウェブ受信側に読み込みリクエストを送信します。

JSONObject customData = new JSONObject()
  .put("liveConfigID", "LIVE_CONFIG_ID")
  .put("region", "LOCATION")
  .put("projectNumber", "PROJECT_NUMBER")
  .put("oAuthToken", "OAUTH_TOKEN")
  .put("networkCode", "NETWORK_CODE")
  .put("customAssetKey", "CUSTOM_ASSET_KEY");

MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
  .setContentUrl("BACKUP_STREAM_URL")
  .setContentType("BACKUP_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）

Cast ウェブ送信側でこれらの値を構成するには、まず必要なデータを含む GCKMediaInformation オブジェクトを作成し、ウェブ受信側に読み込みリクエストを送信します。

NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
  @"liveConfigID": @"LIVE_CONFIG_ID",
  @"region": @"LOCATION",
  @"projectNumber": @"PROJECT_NUMBER",
  @"oAuthToken": @"OAUTH_TOKEN",
  @"networkCode": @"NETWORK_CODE",
  @"customAssetKey": @"CUSTOM_ASSET_KEY"
};

GCKMediaInformationBuilder *mediaInfoBuilder =
  [[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"BACKUP_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

Cast ウェブ送信側でこれらの値を構成するには、まず必要なデータを含む GCKMediaInformation オブジェクトを作成し、ウェブ受信側に読み込みリクエストを送信します。

let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
  print("invalid mediaURL")
  return
}

let customData = [
  "liveConfigID": "LIVE_CONFIG_ID",
  "region": "LOCATION",
  "projectNumber": "PROJECT_NUMBER",
  "oAuthToken": "OAUTH_TOKEN",
  "networkCode": "NETWORK_CODE",
  "customAssetKey": "CUSTOM_ASSET_KEY"
]

let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = "BACKUP_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 コマンド アンド コントロール ツールでこれらの値を構成するには、[メディアを読み込む] タブをクリックし、カスタム読み込みリクエストのタイプを LOAD に設定します。次に、テキスト領域の JSON データを次の JSON に置き換えます。

{
  "media": {
    "contentId": "CONTENT_ID",
    "contentUrl": "BACKUP_STREAM_URL",
    "contentType": "BACKUP_STREAM_MIMETYPE",
    "streamType": "LIVE",
    "customData": {
      "liveConfigID": "LIVE_CONFIG_ID",
      "region": "LOCATION",
      "projectNumber": "PROJECT_NUMBER",
      "oAuthToken": "OAUTH_TOKEN",
      "networkCode": "NETWORK_CODE",
      "customAssetKey": "CUSTOM_ASSET_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>
    const castContext = cast.framework.CastReceiverContext.getInstance()
    castContext.start();
  </script>
</body>
</html>

IMA DAI SDK をインポートしてプレーヤー マネージャーを取得する

スクリプトタグを追加して、CAF 用の IMA DAI SDKr をウェブレシーバーにインポートします。これは、スクリプトが 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 ストリーム マネージャーを初期化します。

<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>

Stream Manager ロード インターセプタを作成する

メディア アイテムが 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 the Video Stitcher API.
     * @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((castRequestWithStreamData) => {
            console.log('Successfully made DAI stream request.');
            return castRequestWithStreamData;
          })
          .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 読み込みリクエストに基づいて Video Stitcher API ライブ配信リクエストを作成します。

    /**
     * Creates a livestream request object for the Video Stitcher API.
     * @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.VideoStitcherLiveStreamRequest();
      const customData = castRequest.media.customData;

      streamRequest.liveStreamEventId = customData.liveConfigID;
      streamRequest.region = customData.region;
      streamRequest.projectNumber = customData.projectNumber;
      streamRequest.oAuthToken = customData.oAuthToken;
      streamRequest.networkCode = customData.networkCode;
      streamRequest.customAssetKey = customData.customAssetKey;

      return streamRequest;
    };

（省略可）ストリーミング セッション オプションを追加する

VideoStitcherLiveStreamRequest.videoStitcherSessionOptions を使用して、デフォルトの Cloud Video Stitcher API 構成をオーバーライドするセッション オプションを追加することで、ストリーム リクエストをカスタマイズします。認識されないオプションを指定すると、Cloud Video Stitcher API により HTTP 400 エラーの応答が返されます。詳しくは、トラブルシューティング ガイドをご覧ください。

たとえば、次のコード スニペットを使用してマニフェスト オプションをオーバーライドできます。このコードは、ビットレートを低い順に並べた 2 つのストリーム マニフェストをリクエストします。

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);
前へ
Android
次へ
HTML5