เริ่มต้นใช้งาน IMA DAI SDK

เลือกโซลูชัน DAI ที่คุณสนใจ

DAI ที่แสดงในพ็อด

IMA SDK ทำให้การผสานรวมโฆษณามัลติมีเดียเข้ากับเว็บไซต์และแอปของคุณง่ายขึ้น

IMA SDK สามารถขอโฆษณาจาก สอดคล้องกับ VAST เซิร์ฟเวอร์โฆษณาและจัดการการเล่นโฆษณาในแอปของคุณ

เมื่อใช้ IMA DAI SDK แอปจะส่งคำขอสตรีมสำหรับโฆษณาและวิดีโอเนื้อหาสำหรับ ทั้ง VOD หรือเนื้อหาสด จากนั้น SDK จะส่งสตรีมวิดีโอแบบรวมกลับมา ซึ่งคุณไม่ต้องจัดการสลับเปลี่ยนระหว่าง วิดีโอโฆษณากับเนื้อหาภายใน แอป

คู่มือนี้แสดงวิธีเล่นสตรีมการแสดงพ็อด DAI แบบสดโดยใช้ IMA DAI SDK สำหรับ CAF

ก่อนใช้คู่มือนี้ โปรดทำความคุ้นเคยกับ ตัวรับเว็บของเฟรมเวิร์กแอปพลิเคชัน Chromecast คู่มือนี้มีความเข้าใจเบื้องต้นเกี่ยวกับแนวคิดเรื่องตัวรับสัญญาณ CAF เช่น เครื่องมือดักจับข้อความ และ mediaInformation และความคุ้นเคยกับการใช้ คำสั่งแคสต์และเครื่องมือควบคุม เพื่อจำลองผู้ส่ง CAF

หากต้องการใช้การแสดงพ็อด IMA DAI คุณต้องทำงานร่วมกับพาร์ทเนอร์ที่แสดงพ็อดและ ต้องมีแอตทริบิวต์ Ad Manager 360 ขั้นสูง ของคุณได้ หากคุณมีบัญชี Ad Manager โปรดติดต่อผู้จัดการฝ่ายดูแลลูกค้าสำหรับ รายละเอียดเพิ่มเติม สำหรับข้อมูลเกี่ยวกับการลงชื่อสมัครใช้ Ad Manager โปรดไปที่ ศูนย์ช่วยเหลือของ Ad Manager

สำหรับข้อมูลเกี่ยวกับการผสานรวมกับแพลตฟอร์มอื่นๆ หรือการใช้ IMA SDK ฝั่งไคลเอ็นต์ โปรดดู SDK โฆษณาสื่ออินเทอร์แอกทีฟ

ภาพรวมการแสดงพ็อด IMA DAI

การใช้การแสดงพ็อดโดยใช้ IMA CAF DAI SDK ประกอบด้วยองค์ประกอบหลัก 2 อย่าง ได้แก่ ซึ่งแสดงในคู่มือนี้

  • StreamRequest ออบเจ็กต์ที่กำหนดคำขอสตรีมไปยังเซิร์ฟเวอร์โฆษณาของ Google คำขอระบุรหัสเครือข่าย คีย์เนื้อหาที่กำหนดเอง และคีย์ API ที่ไม่บังคับ รวมถึงพารามิเตอร์ที่ไม่บังคับอื่นๆ
  • StreamManager ออบเจ็กต์ที่จัดการการสื่อสารระหว่างสตรีมวิดีโอและ IMA DAI SDK เช่น การเริ่มทำงานด้วยคำสั่ง ping ของการติดตามและการส่งต่อเหตุการณ์สตรีมไปยัง ผู้เผยแพร่โฆษณา

ข้อกำหนดเบื้องต้น

กำหนดค่าออบเจ็กต์ MediaInfo ของผู้ส่ง

ขั้นแรก ให้กำหนดค่าแอปของผู้ส่ง ออบเจ็กต์ MediaInfo รายการ ให้รวมช่องต่อไปนี้

ช่อง เนื้อหา
contentId ตัวระบุที่ไม่ซ้ำกันสำหรับรายการสื่อนี้

CONTENT_ID
contentUrl ไม่บังคับ URL ของสตรีมสำรองที่จะเล่นเมื่อโหลดสตรีม DAI ไม่สำเร็จ

BACKUP_STREAM_URL

contentType ไม่บังคับ ประเภท MIME ของสตรีมการสำรองข้อมูลเนื้อหา จําเป็นสําหรับ DASH เท่านั้น สตรีม

CONTENT_STREAM_MIMETYPE
streamType ลิเทอรัลของสตริงหรือค่าคงที่ที่ใช้สำหรับค่านี้จะแตกต่างกันไปตามผู้ส่ง ที่มีการจัดการครบวงจรได้เลย
customData ฟิลด์ customData มีที่เก็บคีย์-ค่า ช่องที่ต้องกรอก
ช่อง เนื้อหา
manifestUrl URL ของสตรีมวิดีโอที่ระบุโดยเครื่องมือจัดการไฟล์ Manifest หรือบุคคลที่สาม พาร์ทเนอร์ ซึ่งควรกำหนดให้คุณแทรกรหัสสตรีมที่ให้ไว้โดย IMA DAI SDK ก่อนที่จะส่งคำขอ ในตัวอย่างนี้ URL ของไฟล์ Manifest มีตัวยึดตำแหน่ง [[STREAMID]] ซึ่งแทนที่ด้วย ก่อนส่งคำขอ

MANIFEST_URL
networkCode รหัสเครือข่ายสำหรับบัญชี Google Ad Manager 360

NETWORK_CODE
customAssetKey คีย์ชิ้นงานที่กําหนดเองซึ่งระบุเหตุการณ์การแสดงพ็อดใน Google Ads Manager 360 ในบางกรณี คุณอาจได้รับไฟล์นี้จากไฟล์ Manifest เครื่องมือควบคุมหรือพาร์ทเนอร์ที่ให้บริการพ็อดบุคคลที่สาม

CUSTOM_ASSET_KEY
apiKey คีย์ API ที่ไม่บังคับสำหรับเรียกข้อมูลรหัสสตรีมจาก IMA DAI SDK

API_KEY

ตัวอย่างโค้ดบางส่วนที่จะช่วยคุณเริ่มต้นมีดังนี้

เว็บ

หากต้องการกำหนดค่าเหล่านี้ในตัวส่งการแคสต์เว็บ ก่อนอื่นให้สร้าง MediaInfo ด้วยข้อมูลที่จำเป็น จากนั้นจึงทำการโหลด ไปยังเว็บรีซีฟเวอร์

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

Android

หากต้องการกำหนดค่าเหล่านี้ในตัวส่งการแคสต์เว็บ ก่อนอื่นให้สร้าง ออบเจ็กต์ MediaInfo ด้วยข้อมูลที่จำเป็นแล้วสร้าง โหลดคำขอไปยังเว็บ รีซีฟเวอร์

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

iOS (Obj-C)

หากต้องการกำหนดค่าเหล่านี้ในตัวส่งการแคสต์เว็บ ก่อนอื่นให้สร้าง GCKMediaInformation ด้วยข้อมูลที่จำเป็น จากนั้นจึงทำการโหลด ไปยังเว็บรีซีฟเวอร์

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

iOS (Swift)

หากต้องการกำหนดค่าเหล่านี้ในตัวส่งการแคสต์เว็บ ก่อนอื่นให้สร้าง GCKMediaInformation ด้วยข้อมูลที่จำเป็น จากนั้นจึงทำการโหลด ไปยังเว็บรีซีฟเวอร์

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
}

เครื่องมือ CAC

หากต้องการกำหนดค่าเหล่านี้ในคำสั่งและการควบคุมการแคสต์ เครื่องมือ คลิกแท็บโหลดสื่อ ประเภทคำขอโหลดที่กำหนดเองที่จะ LOAD จากนั้นแทนที่ข้อมูล JSON ในพื้นที่ข้อความ ที่มี JSON นี้:

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

สามารถส่งคำขอโหลดที่กำหนดเองนี้ไปยังผู้รับเพื่อทดสอบ ขั้นตอน

สร้างตัวรับ CAF พื้นฐาน

สร้าง Web Receiver ที่กำหนดเองตามที่แสดงใน CAF SDK Custom Web Receiver คำแนะนำ

รหัสของผู้รับควรมีลักษณะดังนี้

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

นำเข้า IMA DAI SDK และรับโปรแกรมจัดการโปรแกรมเล่น

เพิ่มแท็กสคริปต์เพื่อนำเข้า IMA DAI SDK สำหรับ CAF ไปยังเว็บรีซีฟเวอร์ เพียงแค่ หลังจากที่สคริปต์โหลด 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 ให้สร้างคำขอสตรีมใน โหลดข้อความ Interceptor

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

สร้างคำขอสตรีม

ใช้ฟังก์ชัน createStreamRequest ให้เสร็จสมบูรณ์เพื่อสร้างสตรีมการแสดงพ็อดตาม ในคำขอโหลด 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;
    };

แทนที่ URL เนื้อหาด้วย URL ของไฟล์ Manifest และรหัสสตรีม

หากคำขอสตรีมสำเร็จ ให้ใช้ streamManager.getStreamId() เพื่อ ดึงรหัสของสตรีมแล้วแทรกลงใน ManifestUrl โดยแทนที่ [[STREAMID]] จากนั้นแทนที่ contentUrl ที่มีอยู่ด้วย manifestUrl เพื่อให้ CAF เล่นสตรีมแบบสดกับพ็อดโฆษณาที่ต่อกัน

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

คุณขอและเล่นสตรีมที่แสดงพ็อดด้วยแอปพลิเคชันแคสต์ได้แล้วตอนนี้ เฟรมเวิร์กและ IMA DAI SDK สำหรับ CAF