Mulai menggunakan IMA DAI SDK

Pilih solusi DAI yang Anda minati

DAI layanan penuh

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 Penerima Web Framework Aplikasi Chromecast. Panduan ini mengasumsikan tingkat dasar pemahaman tentang konsep penerima CAF, seperti intersepsi pesan dan objek mediaInformation, serta pemahaman tentang penggunaan alat Perintah dan Kontrol Cast 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 mendapatkan detail selengkapnya. Untuk mengetahui informasi tentang pendaftaran ke Ad Manager, kunjungi Pusat Bantuan Ad Manager.

Untuk informasi tentang cara berintegrasi dengan platform lain, atau cara menggunakan SDK sisi klien IMA, lihat Interactive Media Ads SDK.

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 terbagi menjadi dua variasi utama:

    • LiveStreamRequest: menentukan Kunci Aset, dan kunci API opsional, serta parameter opsional lainnya.
    • VODStreamRequest: Menentukan ID Sumber Konten, ID Video, dan kunci API opsional, serta parameter opsional lainnya.
  • StreamManager: Objek yang menangani komunikasi antara streaming video dan IMA DAI SDK, seperti mengaktifkan ping pelacakan dan meneruskan peristiwa streaming ke penayang.

Prasyarat

  • Akun Konsol Developer Cast dengan perangkat pengujian yang terdaftar.
  • Aplikasi penerima web yang dihosting dan terdaftar dengan Konsol Developer Cast dan dapat dimodifikasi untuk menghosting kode yang diberikan oleh panduan ini.
  • Aplikasi pengirim yang dikonfigurasi untuk menggunakan aplikasi penerima web Anda. Contoh ini menggunakan alat Perintah dan Kontrol Cast sebagai pengirim.

Mengonfigurasi objek MediaInfo pengirim

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

contentId ID unik untuk item media ini
contentUrl URL streaming penggantian yang akan dimuat jika StreamRequest DAI gagal karena alasan apa pun
streamType Untuk live stream, nilai ini harus disetel ke `LIVE`. Untuk streaming VOD, nilai ini harus disetel ke `BUFFERED`
customData assetKey Khusus live stream. Mengidentifikasi livestream yang akan dimuat
contentSourceId Streaming VOD saja. Mengidentifikasi feed media yang berisi streaming yang diminta.
videoId Streaming VOD saja. Mengidentifikasi streaming yang diminta dalam feed media yang ditentukan.
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, yang mengaktifkan dukungan untuk iklan yang dapat dilewati

Untuk mengonfigurasi nilai ini di alat kontrol dan perintah 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": "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"
}

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

Impor IMA DAI SDK dan dapatkan Pengelola Pemutar

Tambahkan tag skrip untuk mengimpor IMA DAI SDK untuk CAF ke penerima web Anda, tepat setelah skrip yang memuat CAF. CAF DAI SDK bersifat evergreen, sehingga tidak perlu menetapkan versi tertentu. Kemudian, dalam tag skrip yang mengikutinya, 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>

Melakukan inisialisasi Pengelola Streaming IMA

Lakukan inisialisasi Stream Manager DAI SDK CAF.

<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 pencegat pesan pemuatan

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

Hanya boleh ada satu pencegat pesan pemuatan, jadi jika aplikasi Anda memerlukan penggunaan pencegat ini, Anda harus menyertakan 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>

Membuat permintaan streaming

Untuk menyelesaikan integrasi DAI CAF, 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.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>

Kini Anda dapat meminta dan memutar streaming DAI dengan CAF DAI SDK dari Google. Untuk mempelajari fitur SDK lanjutan lebih lanjut, lihat panduan lain atau download aplikasi penerima contoh kami.