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

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

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

DAI สำหรับบริการเต็มรูปแบบ

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

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

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

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

ภาพรวม CAF DAI

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

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

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

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

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

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

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

เพิ่มแท็กสคริปต์เพื่อนำเข้า 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 ที่มีอยู่

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

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