Mulai menggunakan IMA DAI SDK

Pilih solusi DAI yang Anda minati

Pod yang menyalurkan DAI

IMA SDK menyederhanakan pengintegrasian iklan multimedia ke dalam situs web dan aplikasi.

IMA SDK dapat meminta iklan dari Sesuai dengan VAST server iklan dan mengelola pemutaran iklan di aplikasi Anda.

Dengan IMA DAI SDK, aplikasi membuat permintaan streaming untuk iklan dan video konten untuk VOD atau konten live. SDK kemudian menampilkan streaming video gabungan, sehingga Anda tidak perlu mengelola peralihan antara iklan dan video konten dalam .

Panduan ini menunjukkan cara memutar streaming Penayangan Pod DAI Live, menggunakan IMA DAI SDK untuk CAF.

Sebelum menggunakan panduan ini, pahami Penerima Web Framework Aplikasi Chromecast dan berperforma tinggi karena merupakan protokol biner. Panduan ini mengasumsikan pemahaman dasar tentang konsep penerima CAF, seperti pencegat pesan dan mediaInformation objek, dan pengetahuan tentang Alat Kontrol dan Perintah Cast, untuk mengemulasi pengirim CAF.

Untuk menggunakan penayangan pod IMA DAI, Anda harus bekerja sama dengan partner penayangan pod dan harus memiliki Ad Manager 360 Lanjutan menggunakan akun layanan. Jika Anda memiliki akun Ad Manager, hubungi Account Manager Anda untuk secara lebih mendetail. Untuk informasi tentang pendaftaran ke Ad Manager, kunjungi Pusat Bantuan Ad Manager.

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

Ringkasan Penayangan Pod IMA DAI

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

• StreamRequest: Objek yang menentukan permintaan streaming ke server iklan Google. Permintaan menentukan Kode Jaringan, Kunci Aset Khusus, 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.
• Penerima web yang dihosting aplikasi yang yang terdaftar pada Konsol Developer Cast dan yang dapat diubah untuk dihosting kode yang diberikan oleh panduan ini.
• Aplikasi pengirim yang dikonfigurasi untuk menggunakan aplikasi penerima web Anda. Untuk tujuan contoh ini, gunakan Perintah dan Kontrol Cast sebagai pengirim.

Mengonfigurasi objek MediaInfo pengirim

Pertama, konfigurasikan aplikasi pengirim Objek MediaInfo untuk menyertakan kolom berikut:

Berikut adalah beberapa contoh kode untuk membantu Anda memulai:

// 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); });

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());

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

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
}

{
  "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"
    }
  }
}

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

Membuat penerima CAF dasar

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

Kode penerima akan terlihat seperti ini:

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

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. Dalam tag skrip, simpan konteks penerima dan {i>player manager<i} 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 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();

Membuat permintaan streaming

Selesaikan fungsi createStreamRequest untuk membuat aliran penayangan pod berbasis pada permintaan pemuatan CAF.

    /**
     * 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;
    };

Ganti URL konten dengan URL manifes dan ID streaming

Jika permintaan streaming Anda berhasil, gunakan streamManager.getStreamId() untuk mengambil ID aliran data dan memasukkannya ke manifestUrl Anda, mengganti [[STREAMID]]. Lalu, ganti contentUrl yang ada dengan yang baru manifestUrl agar CAF memutar livestream dengan pod iklan yang digabungkan.

    /**
     * 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;
          });
    };

Kini Anda dapat meminta dan memutar streaming penayangan pod dengan Aplikasi Transmisi Framework dan IMA DAI SDK untuk CAF.