Menggunakan IMA DAI SDK di Chromecast

Memutar streaming VOD yang terdaftar dengan Google Cloud Video Stitcher API

Panduan ini menunjukkan cara menggunakan IMA DAI SDK untuk Penerima Web CAF untuk meminta dan memutar sesi streaming VOD Google Cloud.

Panduan ini memperluas contoh dasar dari DAI layanan penuh, menambahkan dukungan untuk streaming yang terdaftar dengan Google Cloud Video Stitcher API.

Pastikan format streaming Anda didukung oleh penerima web CAF sebelum melanjutkan.

Untuk informasi tentang integrasi dengan platform lain atau tentang penggunaan IMA SDK sisi klien, lihat Interactive Media Ads SDK.

Latar belakang

Sebelum menggunakan panduan ini, pahami Penerima Web Framework Aplikasi Chromecast dan berperforma tinggi karena merupakan protokol biner.

Panduan ini mengasumsikan tingkat pemahaman dasar tentang konsep penerima CAF, seperti pesan interseptor, MediaInformation objek, dan menggunakan Perintah dan Kontrol Cast untuk mengemulasi pengirim CAF.

Komponen dan arsitektur aplikasi

Menerapkan pemutaran streaming VOD dengan Penggabung Video Google Cloud API dengan IMA CAF DAI SDK melibatkan dua komponen utama seperti yang ditunjukkan dalam panduan ini:

  • VideoStitcherVodStreamRequest: Objek yang menentukan permintaan aliran data untuk Server Google.
  • StreamManager: Objek yang menangani komunikasi antara streaming video dan IMA DAI SDK, seperti mengaktifkan ping pelacakan dan meneruskan peristiwa streaming ke penayang.

Menyiapkan project Google Cloud

Masukkan variabel berikut untuk digunakan di IMA SDK:

  • Lokasi - Region Google Cloud tempat konfigurasi VOD Anda dibuat.

    LOCATION

  • Nomor Project: Nomor project Google Cloud yang menggunakan Penggabung Video Compute Engine API.

    PROJECT_NUMBER

  • Token OAuth: Token OAuth yang berumur pendek dari akun layanan dengan Video Peran pengguna stitcher. Baca selengkapnya tentang membuat kredensial berumur pendek untuk layanan akun Google.

    OAUTH_TOKEN

  • Kode Jaringan: Kode jaringan Google Ad Manager untuk meminta iklan.

    NETWORK_CODE

    URL tag iklan - URL Ad Manager dari tag iklan. Untuk pengujian, Anda dapat menggunakan Contoh pre-roll VMAP IMA.

    AD_TAG_URI

  • URL sumber konten - String URL manifes streaming untuk VOD Anda saat ini.

    VOD_URI

Menyiapkan penerima transmisi kustom

Untuk mengembangkan penerima transmisi kustom, Anda memerlukan hal berikut:

  • Akun Konsol Developer Cast dengan perangkat pengujian dalam daftar yang diizinkan.

  • Penerima web yang dihosting aplikasi yang terdaftar di Konsol Developer Cast, dan yang dapat diubah menjadi menghosting kode yang diberikan oleh panduan ini.

  • Aplikasi pengirim yang dikonfigurasi untuk menggunakan aplikasi penerima web Anda. Untuk tujuan contoh ini, panduan ini menggunakan Perintah dan Kontrol Cast sebagai pengirim.

Menyiapkan pengirim untuk meneruskan data aliran data ke penerima

Pertama, konfigurasikan aplikasi pengirim untuk membuat permintaan pemuatan ke penerima web Anda, yang berisi kolom berikut di atribut MediaInformation .

Kolom Daftar Isi
contentId ID unik untuk item media ini, seperti yang ditentukan dalam panduan Transmisi dokumentasi referensi. ID ini tidak boleh digunakan kembali untuk beberapa item dalam antrean media yang sama.

CONTENT_ID
contentUrl URL streaming Cadangan opsional yang akan diputar jika streaming DAI gagal dimuat.

BACKUP_STREAM_URL
contentType Mimetype opsional URL streaming cadangan untuk diputar jika streaming DAI gagal dimuat.

BACKUP_STREAM_MIMETYPE
streamType Literal atau konstanta string yang digunakan untuk nilai ini bervariasi menurut pengirim terkelola sepenuhnya.

VOD
customData

Kolom customData berisi penyimpanan nilai kunci dari kolom kolom yang wajib diisi. Dalam hal ini, customData berisi aliran data DAI data yang telah dikumpulkan.

Kolom Daftar Isi
region LOCATION
projectNumber PROJECT_NUMBER
oAuthToken OAUTH_TOKEN
networkCode NETWORK_CODE
adTagUrl AD_TAG_URI
contentSourceUrl VOD_URI

Berikut adalah beberapa contoh kode untuk membantu Anda memulai:

Web

Untuk mengonfigurasi nilai ini di pengirim web Transmisi, buat terlebih dahulu MediaInfo dengan data yang dibutuhkan, lalu buat pemuatan permintaan ke penerima web.

// 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.VOD;
mediaInfo.customData = {
region: "LOCATION",
projectNumber: "PROJECT_NUMBER",
oAuthToken: "OAUTH_TOKEN",
networkCode: "NETWORK_CODE",
adTagUrl: "AD_TAG_URI"
contentSourceUrl: "VOD_URI"
};

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

Untuk mengonfigurasi nilai ini di pengirim web Transmisi, buat terlebih dahulu Objek MediaInfo dengan data yang dibutuhkan, lalu buat pemuatan permintaan ke penerima web.

JSONObject customData = new JSONObject()
  .put("region", "LOCATION")
  .put("projectNumber", "PROJECT_NUMBER")
  .put("oAuthToken", "OAUTH_TOKEN")
  .put("networkCode", "NETWORK_CODE")
  .put("adTagUrl", "AD_TAG_URI")
  .put("contentSourceUrl", "VOD_URI");

MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
  .setContentUrl("BACKUP_STREAM_URL")
  .setContentType("BACKUP_STREAM_MIMETYPE")
  .setStreamType(MediaInfo.STREAM_TYPE_VOD)
  .setCustomData(customData)
  .build();

RemoteMediaClient remoteMediaClient = mCastSession.getRemoteMediaClient();
remoteMediaClient.load(new MediaLoadRequestData.Builder().setMediaInfo(mediaInfo).build());

iOS (Obj-C)

Untuk mengonfigurasi nilai ini di pengirim web Transmisi, buat terlebih dahulu GCKMediaInformation dengan data yang dibutuhkan, lalu buat pemuatan permintaan ke penerima web.

NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
  @"region": @"LOCATION",
  @"projectNumber": @"PROJECT_NUMBER",
  @"oAuthToken": @"OAUTH_TOKEN",
  @"networkCode": @"NETWORK_CODE",
  @"adTagUrl": @"AD_TAG_URI",
  @"contentSourceUrl": @"VOD_URI"
};

GCKMediaInformationBuilder *mediaInfoBuilder =
  [[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"BACKUP_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeNone;
mediaInfoBuilder.customData = customData;
self.mediaInformation = [mediaInfoBuilder build];

GCKRequest *request = [self.sessionManager.currentSession.remoteMediaClient loadMedia:self.mediaInformation];
if (request != nil) {
  request.delegate = self;
}

iOS (Swift)

Untuk mengonfigurasi nilai ini di pengirim web Transmisi, buat terlebih dahulu GCKMediaInformation dengan data yang dibutuhkan, lalu buat pemuatan permintaan ke penerima web.

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

let customData = [
  "region": "LOCATION",
  "projectNumber": "PROJECT_NUMBER",
  "oAuthToken": "OAUTH_TOKEN",
  "networkCode": "NETWORK_CODE",
  "adTagUrl": "AD_TAG_URI",
  "contentSourceUrl": "VOD_URI"
]

let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = "BACKUP_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.none
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
}

Alat CAC

Untuk mengonfigurasi nilai ini di Perintah dan Kontrol Cast , klik tab Muat Media, dan setel untuk LOAD. Kemudian, ganti data JSON di area teks dengan JSON ini:

{
  "media": {
    "contentId": "CONTENT_ID",
    "contentUrl": "BACKUP_STREAM_URL",
    "contentType": "BACKUP_STREAM_MIMETYPE",
    "streamType": "VOD",
    "customData": {
      "region": "LOCATION",
      "projectNumber": "PROJECT_NUMBER",
      "oAuthToken": "OAUTH_TOKEN",
      "networkCode": "NETWORK_CODE",
      "adTagUrl": "AD_TAG_URI",
      "contentSourceUrl": "VOD_URI"
    }
  }
}

Permintaan pemuatan khusus ini dapat dikirim ke penerima untuk menguji langkah.

Membuat penerima web CAF kustom

Buat penerima web kustom, seperti yang terlihat di Penerima Web Kustom SDK CAF Panduan.

Kode penerima Anda akan terlihat seperti berikut:

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

Impor IMA DAI SDK dan dapatkan Pengelola Pemutar

Tambahkan tag skrip untuk mengimpor IMA DAI SDK untuk CAF ke penerima web Anda, cukup setelah skrip yang memuat CAF. Kemudian pada tag skrip yang mengikutinya, simpan konteks penerima dan pengelola pemutar sebagai konstanta sebelum memulai penerima.

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

Melakukan inisialisasi Pengelola Streaming IMA

Lakukan inisialisasi Pengelola Streaming 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>

Membuat Stream Manager Load Interceptor

Sebelum item media Anda diteruskan ke CAF, buat permintaan streaming di LOAD pesan interseptor.

    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    /**
     * Creates a VOD stream 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();

Membuat permintaan streaming

Selesaikan fungsi createStreamRequest untuk membuat VOD Video Stitcher API permintaan streaming, berdasarkan permintaan pemuatan CAF.

    /**
     * Creates a VOD stream 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.VideoStitcherVodStreamRequest();
      const customData = castRequest.media.customData;

      streamRequest.region = customData.region;
      streamRequest.projectNumber = customData.projectNumber;
      streamRequest.oAuthToken = customData.oAuthToken;
      streamRequest.networkCode = customData.networkCode;
      streamRequest.adTagUrl = customData.adTagUrl;
      streamRequest.contentSourceUrl = customData.contentSourceUrl;

      return streamRequest;
    };
Sebelumnya
Android
Berikutnya
HTML5