ตั้งค่าด้วย DAI แบบบริการเต็มรูปแบบ

เลือกแพลตฟอร์ม: HTML5 Android iOS tvOS Cast Roku

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

หมายเหตุ: IMA DAI SDK สำหรับ CAF รองรับทั้งสตรีม HLS และ DASH โดยไม่มีความแตกต่างในการติดตั้งใช้งาน

ก่อนใช้คู่มือนี้ โปรดทำความคุ้นเคยกับโปรโตคอล Web Receiver ของ Chromecast Application Framework คู่มือนี้ถือว่าคุณมีความคุ้นเคยในระดับพื้นฐานกับแนวคิดเกี่ยวกับตัวรับสัญญาณ 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: ระบุคีย์เนื้อหา รวมถึงพารามิเตอร์อื่นๆ ที่ไม่บังคับ
  • VODStreamRequest: ระบุรหัสแหล่งที่มาของเนื้อหา รหัสวิดีโอ รวมถึงพารามิเตอร์อื่นๆ ที่ไม่บังคับ
  • คำขอทั้ง 2 ประเภทสามารถเลือกใส่คีย์ API ที่จำเป็นสำหรับการเข้าถึงสตรีมที่ระบุ และรหัสเครือข่าย Google Ad Manager เพื่อให้ IMA SDK จัดการตัวระบุโฆษณาตามที่ระบุไว้ในการตั้งค่า Google Ad Manager

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

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

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

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

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

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

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

ไลฟ์สด

{
  "media": {
    "contentId": "bbb",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
    "streamType": "LIVE",
    "customData": {
      "assetKey": "c-rArva4ShKVIAkNfy6HUQ",
      "networkCode": "21775744923",
      "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",
      "networkCode": "21775744923",
      "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 ไปยัง Web Receiver ต่อจากสคริปต์ที่โหลด CAF CAF DAI SDK เป็นเวอร์ชันที่อัปเดตตลอดเวลา จึงไม่จำเป็นต้องตั้งค่าเวอร์ชันที่เฉพาะเจาะจง จากนั้นในแท็กสคริปต์ที่ตามมา ให้จัดเก็บ Receiver Context และ Player Manager เป็นค่าคงที่ก่อนเริ่ม Receiver

<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

เริ่มต้นเครื่องมือจัดการสตรีมของ 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.networkCode) {
        streamRequest.networkCode = imaRequestData.networkCode;
      }
      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 ขั้นสูงเพิ่มเติม โปรดดูคู่มืออื่นๆ หรือดาวน์โหลดแอปพลิเคชันตัวรับสัญญาณตัวอย่าง