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

คู่มือนี้ครอบคลุมการพัฒนาแอปพลิเคชันไคลเอ็นต์เพื่อโหลดไลฟ์สด HLS หรือ DASH ด้วย Pod Serving API และตัวจัดการไฟล์ Manifest

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

คุณต้องมีสิ่งต่อไปนี้ก่อนดำเนินการต่อ

ส่งคำขอสตรีม

เมื่อผู้ใช้เลือกสตรีม ให้ทำดังนี้

  1. ส่งคำขอ POST ไปยังเมธอดบริการสตรีมแบบสด ดูรายละเอียดได้ที่ Method: stream

  2. ส่งพารามิเตอร์การกำหนดเป้าหมายโฆษณาในรูปแบบ application/x-www-form-urlencoded หรือ application/json คำขอนี้จะลงทะเบียนเซสชันสตรีมกับ Google DAI

    ตัวอย่างต่อไปนี้จะส่งคำขอสตรีม

    การเข้ารหัสแบบฟอร์ม

    const url = `https://dai.google.com/ssai/pods/api/v1/` +
      `network/NETWORK_CODE/custom_asset/CUSTOM_ASSET_KEY/stream`;

const params = new URLSearchParams({
        cust_params: 'section=sports&page=golf,tennis'
}).toString();

const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: params
});

console.log(await response.json());

    การเข้ารหัส JSON

    const url = `https://dai.google.com/ssai/pods/api/v1/` +
      `network/NETWORK_CODE/custom_asset/CUSTOM_ASSET_KEY/stream`;

const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          cust_params: {
            section: 'sports',
            page: 'golf,tennis'
          }
        })
});

console.log(await response.json());

    หากสำเร็จ คุณจะเห็นเอาต์พุตคล้ายกับตัวอย่างต่อไปนี้

    {
"stream_id": "8d2b2292-6356-4c0e-94be-cece01d2df2e:DLS",
"media_verification_url": "https://dai.google.com/view/.../event/c14aZDWtQg-ZwQaEGl6bYA/media/",
"metadata_url": "https://dai.google.com/linear/pods/hls/.../metadata",
"session_update_url": "https://dai.google.com/linear/.../session",
"polling_frequency": 10
}

  3. ในคำตอบ JSON ให้ค้นหารหัสเซสชันสตรีมและจัดเก็บข้อมูลอื่นๆ สำหรับขั้นตอนถัดไป

ข้อมูลเมตาของโฆษณาแบบสำรวจ

หากต้องการสำรวจข้อมูลเมตาของโฆษณา ให้ทำดังนี้

  1. อ่านค่า metadata_url จากการตอบกลับการลงทะเบียนสตรีม

  2. ส่งคำขอ GET ไปยังปลายทาง ดูรายละเอียดได้ที่Method: metadata

    ตัวอย่างต่อไปนี้จะดึงข้อมูลเมตาของโฆษณา

    const response = await fetch(metadata_url);
console.log(await response.json());

    หากสำเร็จ คุณจะได้รับการตอบกลับ PodMetadata สำหรับช่วงพักโฆษณาปัจจุบันและที่กำลังจะมาถึง

    {
  "tags":{
    "google_5555555555":{
      "ad":"0000229834_ad1",
      "ad_break_id":"0000229834",
      "type":"firstquartile"
    },
    "google_1234567890123456789":{
      "ad":"0000229834_ad1",
      "ad_break_id":"0000229834",
      "type":"progress"
    },
    ...
  },
  "ads":{
    "0000229834_ad1":{
      "ad_break_id":"0000229834",
      "position":1,
      "duration":15,
      "clickthrough_url":"https://.../",
      ...
    },
          ...
  },
  "ad_breaks":{
    "0000229834":{
      "type":"mid",
      "duration":15,
      "ads":1
    },
    ...
  }
}

  3. บันทึกออบเจ็กต์ tags ไว้สำหรับขั้นตอนถัดไป

  4. ตั้งตัวจับเวลาโดยใช้ค่า polling_frequency เพื่อขอข้อมูลเมตาเป็นประจำ สำหรับช่วงพักโฆษณาที่ต่อเนื่องทั้งหมด

โหลดสตรีมลงในวิดีโอเพลเยอร์

หลังจากได้รหัสเซสชันจากการตอบกลับการลงทะเบียนแล้ว ให้ส่งรหัสไปยัง ตัวจัดการ Manifest หรือสร้าง URL ของ Manifest เพื่อโหลดสตรีมลงใน วิดีโอเพลเยอร์

หากต้องการส่งรหัสเซสชัน โปรดดูเอกสารประกอบของเครื่องมือจัดการไฟล์ Manifest หากคุณ พัฒนาเครื่องมือจัดการไฟล์ Manifest โปรดดูเครื่องมือจัดการไฟล์ Manifest สำหรับ ไลฟ์สด

ตัวอย่างต่อไปนี้จะประกอบ URL ของไฟล์ Manifest

https://<your_manifest_manipulator_url>/manifest.m3u8?DAI_stream_ID=SESSION_ID&network_code=NETWORK_CODE&DAI_custom_asset_key=CUSTOM_ASSET_KEY"

เมื่อเพลเยอร์พร้อมแล้ว ให้เริ่มเล่น

รอเหตุการณ์โฆษณา

ตรวจสอบรูปแบบคอนเทนเนอร์ของสตรีมสำหรับข้อมูลเมตาที่กำหนดเวลาแล้ว

  • สตรีม HLS ที่มีคอนเทนเนอร์ Transport Stream (TS) จะใช้แท็ก ID3 ที่กำหนดเวลาเพื่อ ส่งข้อมูลเมตาที่กำหนดเวลา ดูรายละเอียดได้ที่เกี่ยวกับรูปแบบแอปพลิเคชันสื่อทั่วไปที่มี HTTP Live Streaming (HLS)

  • สตรีม DASH ใช้องค์ประกอบ EventStream เพื่อระบุเหตุการณ์ใน ไฟล์ Manifest

  • สตรีม DASH ใช้องค์ประกอบ InbandEventStream เมื่อกลุ่มมีกล่องข้อความเหตุการณ์ (emsg) สำหรับข้อมูลเพย์โหลด รวมถึงแท็ก ID3 ดูรายละเอียดได้ที่ InbandEventStream

  • สตรีม CMAF รวมถึง DASH และ HLS ใช้กล่อง emsg ที่มีแท็ก ID3

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

หากต้องการดึงรหัสเหตุการณ์โฆษณาจากแท็ก ID3 ให้ทำดังนี้

  1. กรองเหตุการณ์ตาม scheme_id_uri ด้วย urn:google:dai:2018 หรือ https://aomedia.org/emsg/ID3

  2. แยกอาร์เรย์ไบต์จากฟิลด์ message_data

    ตัวอย่างต่อไปนี้จะถอดรหัสข้อมูล emsg เป็น JSON

    {
  "scheme_id_uri": "https://developer.apple.com/streaming/emsg-id3",
  "presentation_time": 27554,
  "timescale": 1000,
  "message_data": "ID3TXXXgoogle_1234567890123456789",
  ...
}

  3. กรองแท็ก ID3 ด้วยรูปแบบ TXXXgoogle_{ad_event_ID} ดังนี้

    TXXXgoogle_1234567890123456789

แสดงข้อมูลเหตุการณ์โฆษณา

หากต้องการค้นหาออบเจ็กต์ TagSegment ให้ทำดังนี้

  1. ดึงข้อมูลเมตาของโฆษณาออบเจ็กต์ tags จาก Poll ad metadata ออบเจ็กต์ tags คืออาร์เรย์ของออบเจ็กต์ TagSegment

  2. ใช้รหัสเหตุการณ์โฆษณาแบบเต็มเพื่อค้นหาออบเจ็กต์ TagSegment ที่มีประเภท progress

  3. ใช้ 17 อักขระแรกของรหัสเหตุการณ์โฆษณาเพื่อค้นหาTagSegmentออบเจ็กต์ ประเภทอื่นๆ

  4. หลังจากได้ TagSegment แล้ว ให้ใช้พร็อพเพอร์ตี้ ad_break_id เป็นคีย์ เพื่อค้นหาออบเจ็กต์ AdBreak ในออบเจ็กต์ข้อมูลเมตาของโฆษณา ad_breaks

    ตัวอย่างต่อไปนี้ค้นหาออบเจ็กต์ AdBreak

    {
  "type":"mid",
  "duration":15,
  "ads":1
}

  5. ใช้ข้อมูล TagSegment และ AdBreak เพื่อแสดงข้อมูลเกี่ยวกับตำแหน่งโฆษณาในช่วงพักโฆษณา เช่น Ad 1 of 3

ส่งการปิงการยืนยันสื่อ

สําหรับเหตุการณ์โฆษณาทุกรายการ ยกเว้นประเภท progress ให้ส่งการปิงการยืนยันสื่อ DAI ของ Google จะทิ้งเหตุการณ์ progress และการส่งเหตุการณ์เหล่านี้บ่อยๆ อาจส่งผลต่อประสิทธิภาพของแอป

หากต้องการสร้าง URL การยืนยันสื่อที่สมบูรณ์ของเหตุการณ์โฆษณา ให้ทำดังนี้

  1. จากคำตอบของสตรีม ให้ต่อท้ายรหัสเหตุการณ์โฆษณาแบบเต็มกับค่า media_verification_url

  2. ส่งGETคำขอพร้อม URL แบบเต็ม

    // media_verification_url: "https://dai.google.com/view/.../event/c14aZDWtQg-ZwQaEGl6bYA/media/"
const completeUrl = `${media_verification_url}google_5555555555123456789`;

const response = await fetch(completeUrl);

    หากสำเร็จ คุณจะได้รับการตอบกลับสถานะรหัส 202 มิฉะนั้น คุณจะได้รับ404รหัสข้อผิดพลาด

คุณใช้เครื่องมือตรวจสอบกิจกรรมการสตรีม (SAM) เพื่อตรวจสอบบันทึกประวัติของเหตุการณ์โฆษณาทั้งหมดได้ โปรดดูรายละเอียดที่หัวข้อตรวจสอบและแก้ปัญหาไลฟ์สด