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

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

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

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

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

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

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

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

ภาพรวม CAF DAI

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

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

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

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

กำหนดค่าออบเจ็กต์ 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

จะมีตัวดักจับข้อความโหลดเพียงรายการเดียวเท่านั้น ดังนั้นหากแอปของคุณจำเป็นต้องใช้ ของอินเตอร์เซกเตอร์ คุณจะต้องรวมฟังก์ชันที่กำหนดเองใดๆ ก็ตามลงใน 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 โปรดดูคำแนะนำอื่นๆ หรือ ดาวน์โหลดตัวรับตัวอย่างของเรา แอปพลิเคชัน