หน้านี้ได้รับการแปลโดย Cloud Translation API

เริ่มต้นใช้งาน 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

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

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

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

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

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

บัญชี Cast Developer Console พร้อมอุปกรณ์ทดสอบที่ลงทะเบียนไว้
แอปเว็บตัวรับสัญญาณที่โฮสต์ไว้ซึ่งลงทะเบียนกับ Cast Developer Console ซึ่งแก้ไขได้เพื่อโฮสต์โค้ดที่คู่มือนี้ระบุไว้
แอปที่ส่งซึ่งกำหนดค่าให้ใช้แอปตัวรับสัญญาณเว็บ ตามวัตถุประสงค์ของตัวอย่างนี้ โปรดใช้เครื่องมือส่งคำสั่งและควบคุมเป็นผู้ส่ง

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

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

ฟิลด์ เนื้อหา

contentId

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

CONTENT_ID

contentUrl

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

BACKUP_STREAM_URL

contentType

ไม่บังคับ Mimetype ของสตรีมสำรองเนื้อหา จำเป็นต้องใช้สำหรับสตรีม 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 Ad Manager 360 ในบางกรณี คุณอาจได้รับไฟล์นี้จากโปรแกรมจัดการไฟล์ Manifest หรือพาร์ทเนอร์การแสดงพ็อดบุคคลที่สาม `CUSTOM_ASSET_KEY`
`apiKey`	คีย์ API ที่ไม่บังคับสำหรับเรียกข้อมูลรหัสสตรีมจาก IMA DAI SDK `API_KEY`

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

เว็บไซต์

หากต้องการกำหนดค่าเหล่านี้ในผู้ส่งเว็บของ Cast ให้สร้างออบเจ็กต์ 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

หากต้องการกำหนดค่าเหล่านี้ในผู้ส่งเว็บของ Cast ให้สร้างออบเจ็กต์ 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)

หากต้องการกำหนดค่าเหล่านี้ในผู้ส่งเว็บของ Cast ให้สร้างออบเจ็กต์ 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)

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 พื้นฐาน

สร้างเว็บรีซีฟเวอร์ที่กำหนดเอง ดังที่เห็นในคู่มือเว็บรีซีฟเวอร์ที่กำหนดเองของ CAF SDK

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

<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

<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 ให้สร้างคำขอสตรีมในตัวตรวจจับข้อความ LOAD

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

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