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

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

DAI แบบครบวงจร

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

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

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

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

ภาพรวม CAF DAI

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

  • StreamRequest: ออบเจ็กต์ที่กําหนดคําขอสตรีมไปยังเซิร์ฟเวอร์โฆษณาของ Google คำขอสตรีมมี 2 ประเภทหลักๆ ดังนี้

    • LiveStreamRequest: ระบุคีย์ชิ้นงานและคีย์ API (ไม่บังคับ) รวมถึงพารามิเตอร์อื่นๆ (ไม่บังคับ)
    • VODStreamRequest: ระบุรหัสแหล่งที่มาของเนื้อหา รหัสวิดีโอ และคีย์ API (ไม่บังคับ) รวมถึงพารามิเตอร์อื่นๆ (ไม่บังคับ)

  • StreamManager: ออบเจ็กต์ที่จัดการการสื่อสารระหว่างสตรีมวิดีโอกับ IMA DAI SDK เช่น การเรียกใช้การติดตาม Ping และการส่งต่อเหตุการณ์สตรีมไปยังผู้เผยแพร่โฆษณา

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

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

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

ก่อนอื่น ให้กําหนดค่า MediaInfo object ของแอปผู้ส่งให้รวมช่องต่อไปนี้

contentId ตัวระบุที่ไม่ซ้ำกันสำหรับรายการสื่อนี้
contentUrl URL สตรีมสำรองที่จะโหลดหากคําขอสตรีม DAI ไม่สําเร็จไม่ว่าด้วยเหตุผลใดก็ตาม
streamType สำหรับสตรีมแบบสด ค่านี้ควรตั้งเป็น "LIVE" สำหรับสตรีม VOD ค่านี้ควรตั้งเป็น "BUFFERED"
customData assetKey สตรีมแบบสดเท่านั้น ระบุสตรีมแบบสดที่จะโหลด
contentSourceId สตรีม VOD เท่านั้น ระบุฟีดสื่อที่มีสตรีมตามคำขอ
videoId สตรีม VOD เท่านั้น ระบุสตรีมที่ขอภายในฟีดสื่อที่ระบุ
ApiKey คีย์ API ที่ไม่บังคับซึ่งอาจต้องใช้เพื่อดึงข้อมูล URL สตรีมจาก IMA DAI SDK
senderCanSkip ค่าบูลีนเพื่อแจ้งให้ผู้รับทราบว่าอุปกรณ์ที่ส่งสามารถแสดงปุ่มข้ามได้หรือไม่ ซึ่งจะเปิดใช้การรองรับโฆษณาแบบข้ามได้

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

ถ่ายทอดสด

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

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

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

สร้างเครื่องมือรับข้อมูลเว็บพื้นฐานตามคู่มือเครื่องมือรับข้อมูลพื้นฐานของ CAF SDK

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

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

นําเข้า IMA DAI SDK และรับ Player Manager

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

    castContext.start();
  </script>
</body>
</html>

เริ่มต้น IMA Stream Manager

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

สร้างตัวขัดจังหวะข้อความการโหลด

CAF DAI SDK ใช้ message interceptor ของการโหลด CAF เพื่อส่งคําขอสตรีมและแทนที่ URL เนื้อหาด้วยสตรีม DAI สุดท้าย ตัวขัดจังหวะข้อความจะเรียก streamManager.requestStream() ซึ่งจัดการการตั้งค่าช่วงพักโฆษณา คำขอสตรีม และแทนที่ contentURL ที่มีอยู่

คุณจะติดตั้งตัวขัดจังหวะข้อความการโหลดได้เพียงตัวเดียวเท่านั้น ดังนั้นหากแอปต้องใช้ตัวขัดจังหวะ คุณต้องรวมฟังก์ชันที่กําหนดเองไว้ในการเรียกกลับเดียวกัน

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

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

หากต้องการผสานรวม CAF DAI ให้เสร็จสมบูรณ์ คุณต้องสร้างคําขอสตรีมโดยใช้ข้อมูลที่รวมอยู่ในออบเจ็กต์ mediaInfo จากผู้ส่ง

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

ตอนนี้คุณขอและเล่นสตรีม DAI โดยใช้ CAF DAI SDK ของ Google ได้แล้ว ดูข้อมูลเกี่ยวกับฟีเจอร์ขั้นสูงอื่นๆ ของ SDK ได้ในคู่มืออื่นๆ หรือดาวน์โหลดตัวอย่างแอปพลิเคชันตัวรับ