Menyiapkan IMA SDK untuk DAI

Pilih solusi DAI yang Anda minati

DAI layanan lengkap

Panduan ini menunjukkan cara memutar streaming DAI, menggunakan IMA CAF DAI SDK. Jika Anda ingin melihat atau mengikuti contoh integrasi yang telah selesai, download contohnya.

Sebelum menggunakan panduan ini, pastikan Anda memahami protokol Web Receiver dari Framework Aplikasi Chromecast. Panduan ini mengasumsikan tingkat pemahaman dasar tentang konsep penerima CAF, seperti interceptor pesan dan objek mediaInformation, serta pemahaman tentang penggunaan alat Cast Command and Control untuk mengemulasi pengirim CAF.

Untuk menggunakan IMA DAI, Anda harus memiliki akun Ad Manager 360. Jika Anda memiliki akun Ad Manager, hubungi Account Manager Anda untuk mengetahui detail selengkapnya. Untuk mengetahui informasi tentang cara mendaftar ke Ad Manager, buka Pusat Bantuan Ad Manager.

Untuk mengetahui informasi tentang cara berintegrasi dengan platform lain, atau tentang cara menggunakan IMA SDK sisi klien, lihat SDK Iklan Media Interaktif.

Ringkasan CAF DAI

Penerapan DAI menggunakan IMA CAF DAI SDK melibatkan dua komponen utama seperti yang ditunjukkan dalam panduan ini:

  • StreamRequest: Objek yang menentukan permintaan streaming ke server iklan Google. Permintaan streaming memiliki dua jenis utama:

    • LiveStreamRequest: menentukan Kunci Aset, serta parameter opsional lainnya.
    • VODStreamRequest: Menentukan ID Sumber Konten, ID Video, serta parameter opsional lainnya.
    • Kedua jenis permintaan dapat secara opsional menyertakan kunci API yang diperlukan untuk mengakses streaming tertentu, dan kode jaringan Google Ad Manager agar IMA SDK menangani ID iklan seperti yang ditentukan dalam setelan Google Ad Manager.

  • StreamManager: Objek yang menangani komunikasi antara streaming video dan IMA DAI SDK, seperti mengirimkan ping pelacakan dan meneruskan peristiwa streaming ke penayang.

Prasyarat

Mengonfigurasi objek MediaInfo pengirim

Pertama, konfigurasi objek MediaInfo aplikasi pengirim Anda untuk menyertakan kolom berikut:

contentId ID unik untuk item media ini
contentUrl URL streaming pengganti yang akan dimuat jika StreamRequest DAI gagal karena alasan apa pun
streamType Untuk live stream, nilai ini harus ditetapkan ke `LIVE`. Untuk streaming VOD, nilai ini harus ditetapkan ke `BUFFERED`
customData assetKey Khusus live stream. Mengidentifikasi livestream yang akan dimuat
contentSourceId Hanya streaming VOD. Mengidentifikasi feed media yang berisi streaming yang diminta.
videoId Hanya streaming VOD. Mengidentifikasi streaming yang diminta dalam feed media yang ditentukan.
networkCode (Opsional) Kode jaringan Google Ad Manager Anda.
ApiKey Kunci API opsional yang dapat diperlukan untuk mengambil URL streaming dari IMA DAI SDK
senderCanSkip Nilai boolean untuk memberi tahu penerima apakah perangkat pengirim memiliki kemampuan untuk menampilkan tombol lewati, sehingga memungkinkan dukungan untuk iklan yang dapat dilewati

Untuk mengonfigurasi nilai ini di alat perintah dan kontrol transmisi, klik tab Load Media, lalu tetapkan jenis permintaan pemuatan kustom ke LOAD. Kemudian, ganti data JSON di area teks dengan salah satu objek JSON berikut:

LIVE

{
  "media": {
    "contentId": "bbb",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
    "streamType": "LIVE",
    "customData": {
      "assetKey": "c-rArva4ShKVIAkNfy6HUQ",
      "networkCode": "21775744923",
      "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",
      "networkCode": "21775744923",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

Objek permintaan pemuatan kustom ini dapat dikirim ke penerima untuk menguji langkah-langkah berikut.

Membuat penerima CAF dasar

Dengan mengikuti Panduan Penerima Dasar CAF SDK, buat penerima web dasar.

Kode penerima Anda akan terlihat seperti ini:

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

Mengimpor IMA DAI SDK dan mendapatkan Pengelola Pemutar

Tambahkan tag skrip untuk mengimpor IMA DAI SDK untuk CAF ke penerima web Anda, tepat setelah skrip memuat CAF. CAF DAI SDK selalu terbaru, jadi tidak perlu menetapkan versi tertentu. Kemudian, di tag skrip berikutnya, simpan konteks penerima dan pengelola pemutar sebagai konstanta sebelum memulai penerima.

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

Lakukan inisialisasi IMA Stream Manager

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

Buat pemroses pesan pemuatan

CAF DAI SDK menggunakan interceptor pesan pemuatan CAF untuk membuat permintaan streaming dan mengganti URL konten dengan streaming DAI akhir. Penyadap pesan memanggil streamManager.requestStream() yang menangani penyetelan jeda iklan, meminta streaming, dan mengganti contentURL yang ada.

Hanya boleh ada satu pencegat pesan pemuatan, jadi jika aplikasi Anda memerlukan penggunaan pencegat, Anda harus menggabungkan fungsi kustom apa pun ke dalam callback yang sama.

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

Buat permintaan streaming

Untuk menyelesaikan integrasi CAF DAI, Anda perlu membuat permintaan streaming menggunakan data yang disertakan dalam objek mediaInfo dari pengirim.

<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.networkCode) {
        streamRequest.networkCode = imaRequestData.networkCode;
      }
      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>

Sekarang Anda dapat meminta dan memutar ulang streaming DAI dengan CAF DAI SDK Google. Untuk mempelajari fitur SDK yang lebih canggih, lihat panduan lainnya atau download aplikasi penerima contoh kami.