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

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

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

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

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

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

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

  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 ไปยังปลายทาง ดูรายละเอียดได้ที่ เมธอด: ข้อมูลเมตา.

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

    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 ที่มีการกำหนดเวลาเพื่อส่งข้อมูลเมตาที่มีการกำหนดเวลา ดูรายละเอียดได้ที่เกี่ยวกับ Common Media Application Format กับ 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 ข้อมูลเมตาของโฆษณาจาก สำรวจข้อมูลเมตาของโฆษณา ออบเจ็กต์ 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

ส่ง Ping การยืนยันสื่อ

ส่ง Ping การยืนยันสื่อสำหรับเหตุการณ์โฆษณาทุกประเภท ยกเว้นประเภท progress Google DAI จะทิ้งเหตุการณ์ 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) เพื่อตรวจสอบบันทึกประวัติของเหตุการณ์โฆษณาทั้งหมด ดูรายละเอียดได้ที่ตรวจสอบและแก้ปัญหา ไลฟ์สด