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

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

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

DAI บริการเต็มรูปแบบ

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

ก่อนใช้คู่มือนี้ โปรดทำความคุ้นเคยกับโปรโตคอลตัวรับเว็บของเฟรมเวิร์กแอปพลิเคชัน Chromecast คู่มือนี้จะอธิบายถึงความคุ้นเคยกับแนวคิดตัวรับ CAF เช่น ตัวดักจับข้อความและออบเจ็กต์ mediaInformation รวมถึงความคุ้นเคยกับการใช้เครื่องมือควบคุมและคำสั่งแคสต์เพื่อจำลองผู้ส่ง 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 Developer Console และสามารถแก้ไขได้เพื่อโฮสต์โค้ดจากคู่มือนี้
แอปส่งที่กำหนดค่าให้ใช้แอปตัวรับเว็บ ตัวอย่างนี้ใช้เครื่องมือควบคุมและคำสั่งแคสต์เป็นผู้ส่ง

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

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

`contentId`		ตัวระบุที่ไม่ซ้ำกันสำหรับรายการสื่อนี้
`contentUrl`		URL ของสตรีมสำรองที่จะโหลดหาก DAI StreamRequest ล้มเหลวไม่ว่าด้วยเหตุผลใดก็ตาม
`streamType`		สำหรับสตรีมแบบสด ควรกำหนดค่านี้เป็น "LIVE" และควรกำหนดค่านี้เป็น "BUFFERED" สำหรับสตรีม VOD
`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 และรับโปรแกรมจัดการโปรแกรมเล่น

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

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

เริ่มต้นตัวจัดการสตรีม IMA

เริ่มต้นเครื่องมือจัดการสตรีมของ 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 ใช้ตัวตรวจจับข้อความโหลด CAF เพื่อส่งคำขอสตรีมและแทนที่ URL เนื้อหาด้วยสตรีม DAI สุดท้าย ตัวดักจับข้อความจะเรียกใช้ streamManager.requestStream() ซึ่งจัดการการตั้งค่าช่วงพักโฆษณา ขอสตรีม และแทนที่ contentURL ที่มีอยู่

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

<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 โปรดดูคำแนะนำอื่นๆ หรือดาวน์โหลดแอปพลิเคชันตัวรับสัญญาณตัวอย่าง