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

IMA SDK ช่วยให้ผสานรวมโฆษณามัลติมีเดียลงในเว็บไซต์และแอปได้อย่างง่ายดาย IMA SDK สามารถส่งคําขอโฆษณาจากเซิร์ฟเวอร์โฆษณา ที่เป็นไปตามข้อกําหนดของ VAST ใดก็ได้ และจัดการการเล่นโฆษณาในแอป เมื่อใช้ IMA DAI SDK แอปจะส่งคําขอสตรีมสําหรับโฆษณาและวิดีโอเนื้อหา ไม่ว่าจะเป็น VOD หรือเนื้อหาสด จากนั้น SDK จะแสดงผลสตรีมวิดีโอแบบรวม คุณจึงไม่ต้องจัดการการสลับระหว่างโฆษณากับวิดีโอเนื้อหาภายในแอป

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

เล่นสตรีมแบบสดที่ลงทะเบียนกับ Google Cloud Video Stitcher API

คู่มือนี้สาธิตวิธีใช้ IMA DAI SDK สําหรับ HTML5 เพื่อขอและเล่นสตรีมแบบสดสําหรับกิจกรรมที่ลงทะเบียนกับ Google Cloud Video Stitcher API และวิธีแทรกช่วงพักโฆษณาระหว่างการเล่น

คู่มือนี้จะขยายตัวอย่างพื้นฐานจากคู่มือเริ่มต้นใช้งานสำหรับ IMA DAI

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

หากต้องการดูหรือทําตามการผสานรวมตัวอย่างที่เสร็จสมบูรณ์ ให้ดาวน์โหลดตัวอย่างโปรแกรมต่อวิดีโอของ Cloud สำหรับ HLS หรือ DASH

ตั้งค่าโปรเจ็กต์ Google Cloud

สร้างโปรเจ็กต์ Google Cloud และกำหนดค่าบัญชีบริการเพื่อเข้าถึงโปรเจ็กต์

สร้างการกำหนดค่าสำหรับกิจกรรมสตรีมแบบสดโดยใช้สตรีมแบบสดของเนื้อหาของคุณเองหรือสตรีมแบบสดทดสอบ คู่มือนี้ใช้กับสตรีม HLS

ป้อนตัวแปรต่อไปนี้เพื่อใช้ใน IMA SDK

ตำแหน่ง
ภูมิภาค Google Cloud ที่สร้างขึ้นเพื่อใช้กับการกำหนดค่าเวอร์ชันที่ใช้งานจริงมีดังนี้ LOCATION
หมายเลขโปรเจ็กต์
หมายเลขโปรเจ็กต์ Google Cloud ที่ใช้ Video Stitcher API: PROJECT_NUMBER
โทเค็น OAuth

โทเค็น OAuth ที่มีอายุสั้นของบัญชีบริการที่มีบทบาทผู้ใช้โปรแกรมต่อเชื่อมวิดีโอ 

OAUTH_TOKEN

อ่านเพิ่มเติมเกี่ยวกับการสร้างข้อมูลเข้าสู่ระบบที่มีอายุสั้นสำหรับบัญชีบริการ คุณนําโทเค็น OAuth ไปใช้ซ้ำในคําขอหลายรายการได้ ตราบใดที่โทเค็นยังไม่หมดอายุ

รหัสเครือข่าย

รหัสเครือข่าย Ad Manager สําหรับคําขอโฆษณา NETWORK_CODE

รหัสการกําหนดค่าที่ใช้งานอยู่
รหัสการกําหนดค่าแบบเรียลไทม์ที่คุณระบุเมื่อสร้างกิจกรรมสตรีมแบบสด LIVE_CONFIG_ID
คีย์เนื้อหาที่กำหนดเอง
คีย์ชิ้นงานที่กำหนดเองของ Ad Manager ที่สร้างขึ้นในระหว่างกระบวนการสร้างการกำหนดค่าสำหรับกิจกรรมสตรีมแบบสดด้วย Video Stitcher API CUSTOM_ASSET_KEY

กำหนดค่าสภาพแวดล้อมการพัฒนา

ตัวอย่างแอป IMA จะสาธิตเฉพาะคําขอสตรีม HLS คุณยังคงใช้ DASH stream ได้เมื่อสร้างคลาส VideoStitcherLiveStreamRequest เมื่อตั้งค่าโปรแกรมเล่นที่เข้ากันได้กับ DASH คุณจะต้องตั้งค่า Listener สําหรับเหตุการณ์ความคืบหน้าของโปรแกรมเล่นวิดีโอที่สามารถให้ข้อมูลเมตาของวิดีโอแก่ StreamManager.processMetadata() ฟังก์ชันนี้ใช้พารามิเตอร์ 3 รายการ ได้แก่

  1. type: สตริงที่ต้องตั้งค่าเป็น 'ID3' สำหรับสตรีม HLS และ 'urn:google:dai:2018' สำหรับสตรีม DASH

  2. data: สําหรับข้อความเหตุการณ์ DASH จะเป็นสตริงข้อมูลข้อความ

  3. timestamp: ตัวเลขที่เป็นเวลาเริ่มต้นของข้อความเหตุการณ์สําหรับสตรีม DASH

ส่งข้อมูลเมตาโดยเร็วที่สุดและบ่อยที่สุดเท่าที่เหตุการณ์ของโปรแกรมเล่นจะให้ข้อมูลได้ หากไม่มีหรือข้อมูลเมตาไม่ถูกต้อง IMA DAI SDK อาจไม่ทริกเกอร์เหตุการณ์โฆษณา ซึ่งทําให้เหตุการณ์โฆษณาที่รายงานไม่ถูกต้อง

ดาวน์โหลดตัวอย่าง IMA DAI สําหรับ HTML5 และแตกไฟล์ตัวอย่าง HLS.js แบบง่ายลงในโฟลเดอร์ใหม่ ตัวอย่างนี้คือเว็บแอปที่คุณสามารถโฮสต์ในเครื่องเพื่อวัตถุประสงค์ในการทดสอบ

หากต้องการโฮสต์ตัวอย่างในเครื่อง ให้ไปที่โฟลเดอร์ใหม่ แล้วเรียกใช้คำสั่ง Python ต่อไปนี้เพื่อเริ่มเว็บเซิร์ฟเวอร์

python3 -m http.server 8000

http.server พร้อมให้ใช้งานใน Python 3.x เท่านั้น คุณสามารถใช้เว็บเซิร์ฟเวอร์อื่นๆ ก็ได้ เช่น Apache HTTP Server หรือ Node JS

เปิดเว็บเบราว์เซอร์และไปที่ localhost:8000 เพื่อดูโปรแกรมเล่นวิดีโอ เบราว์เซอร์ต้องรองรับไลบรารี HLS.js

หากทุกอย่างทำงานอย่างถูกต้อง การคลิกปุ่มเล่นในวิดีโอเพลเยอร์จะเริ่มภาพยนตร์สั้น "Tears of Steel" หลังจากโฆษณาสั้นๆ เนื้อหานี้แสดงโดยใช้สตรีมวิดีโอออนดีมานด์ (VOD)

ขอใช้ฟีเจอร์สตรีมแบบสด

หากต้องการแทนที่สตรีม VOD ตัวอย่างด้วยสตรีมแบบสด ให้ใช้คลาส VideoStitcherLiveStreamRequest ที่สร้างเซสชันโฆษณากับ Google Ad Manager โดยอัตโนมัติ คุณใช้ UI ของ Google Ad Manager เพื่อค้นหาเซสชัน DAI ที่สร้างขึ้นสําหรับการตรวจสอบและการแก้ไขข้อบกพร่องได้

ในตัวอย่างที่อยู่แล้วจะมีฟังก์ชันสำหรับขอสตรีม VOD หรือสตรีมแบบสด หากต้องการให้ทํางานร่วมกับ Google Cloud Video Stitcher API คุณต้องเพิ่มฟังก์ชันใหม่เพื่อแสดงผลออบเจ็กต์ VideoStitcherLiveStreamRequest

เช่น

// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.LOADED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
      ],
      onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = 'block';
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

สำหรับการทดสอบในพื้นที่ หากไฟล์สตรีมแบบสดอยู่ในที่เก็บข้อมูล Cloud Storage คุณจะต้องเปิดใช้ CORS สำหรับต้นทาง http://localhost:8000

โหลดหน้าเว็บซ้ำ จากนั้นคุณจะขอและเล่นสตรีมแบบสดที่กำหนดเองได้

(ไม่บังคับ) เพิ่มตัวเลือกเซสชันสตรีมมิง

ปรับแต่งคำขอสตรีมโดยเพิ่มตัวเลือกเซสชันเพื่อลบล้างการกำหนดค่าเริ่มต้นของ Cloud Video Stitcher API โดยใช้ VideoStitcherLiveStreamRequest.videoStitcherSessionOptions หากคุณระบุตัวเลือกที่ไม่รู้จัก Cloud Video Stitcher API จะตอบกลับด้วยข้อผิดพลาด HTTP 400 โปรดดูความช่วยเหลือจากคู่มือการแก้ปัญหา

เช่น คุณสามารถลบล้างตัวเลือกไฟล์ Manifest ได้ด้วยข้อมูลโค้ดต่อไปนี้ ซึ่งจะขอไฟล์ Manifest สตรีม 2 รายการที่มีการแสดงผลที่จัดเรียงตามอัตราบิตต่ำสุดไปจนถึงสูงสุด

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

แทรกช่วงพักโฆษณา

Google Cloud Video Stitcher API จะแทรกโฆษณาที่ดึงมาจากแท็กโฆษณาสําหรับช่วงพักโฆษณาแต่ละช่วง ระบบจะระบุช่วงพักโฆษณาในไฟล์ Manifest โดยใช้เครื่องหมายโฆษณา ตัวแปลงไฟล์สตรีมแบบสดจะแทรกเครื่องหมายโฆษณา

โฆษณาจะเล่นทันทีหลังจากแทรกช่วงพักโฆษณา

ล้างข้อมูล

เมื่อคุณโฮสต์สตรีมแบบสดโดยใช้ Google Cloud Video Stitcher API และขอสตรีมโดยใช้ IMA DAI SDK สำหรับ HTML5 เรียบร้อยแล้ว สิ่งสำคัญคือต้องล้างทรัพยากรการแสดงผล

ทำตามคำแนะนำล้างข้อมูลสตรีมแบบสดเพื่อนำทรัพยากรและเนื้อหาที่ไม่จำเป็นออก

สุดท้าย ในหน้าต่างเทอร์มินัลที่คุณเริ่มเว็บเซิร์ฟเวอร์ Python 3 ให้ใช้คำสั่ง ctrl+C เพื่อปิดเซิร์ฟเวอร์ภายใน