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

เริ่มต้นใช้งาน 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 ได้ในคู่มืออื่นๆ หรือดาวน์โหลดตัวอย่างแอปพลิเคชันตัวรับ