สตรีมมิงแบบสด

Cast SDK มี API ในตัวเพื่อรองรับเนื้อหาสด ซึ่งรวมถึง UI ที่ยืดหยุ่นและพร้อมใช้งานทันที พร้อมกับ API ที่ช่วยให้นักพัฒนาซอฟต์แวร์สร้าง ด้วยการเขียนโค้ดเพียงไม่กี่บรรทัด Live API รองรับการแสดง เวลาเริ่มต้นและสิ้นสุด ข้อมูลเมตาของโปรแกรม การควบคุม DVR และกรอบเวลาที่ค้นหาได้

คู่มือนี้แสดงวิธีกำหนดค่าสตรีมไปยัง API แบบสด ซึ่งประกอบด้วย ตัวอย่างโค้ดและข้อมูลเมตาสำหรับการกำหนดค่าสถานการณ์หลักของการถ่ายทอดสด รวมถึง ภาพหน้าจอที่แสดงให้เห็นว่าแต่ละสถานการณ์มีลักษณะอย่างไร

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

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

คำต่อไปนี้ใช้ตลอดทั้งคำแนะนำ

  • ระยะเวลาที่ค้นหาได้ - ช่วงของสตรีมแบบสดที่ผู้ใช้ค้นหาได้
  • Live Edge - ส่วนล่าสุดของสตรีมแบบสดที่พร้อมให้ผู้เล่นใช้งาน
  • Play Head - การประทับเวลาของ UI สำหรับตำแหน่งการเล่นปัจจุบัน

การแคสต์สตรีมแบบสด

การกำหนดค่า Web Receiver SDK เพื่อใช้ Live API สำหรับ เนื้อหา:

  1. โดยใช้ตัวดักจับข้อความ LOAD ในแอปพลิเคชัน Web Receiver ของคุณ (แนะนำ)
  2. โดยใช้คำขอโหลดที่สร้างขึ้นจากฝั่งผู้ส่งหรือฝั่งผู้รับ

เครื่องมืออินเตอร์เซกเตอร์จะให้ LoadRequestData ที่มีข้อมูลเมตาที่สำคัญทั้งหมดเกี่ยวกับคำขอโหลด ถึง ระบุว่าคำขอโหลดมีไว้สำหรับสตรีมแบบสด เพียงแค่ตั้งค่า streamType ใน mediaInformation คัดค้าน StreamType.LIVE MediaInformation.duration ควรเป็น -1 เนื่องจากอินสแตนซ์ของโปรแกรมเล่นคือ มีหน้าที่คำนวณเมื่อเนื้อหามีขนาด LIVE

/*
* This interceptor is called before your content is loaded by a Cast device
*/
playerManager.setMessageInterceptor(
   cast.framework.messages.MessageType.LOAD,
   request => { /* cast.framework.messages.LoadRequestData */
       request.media.streamType = cast.framework.messages.StreamType.LIVE;
   return request;
});

การเพิ่มข้อมูลคู่มือรายการทีวี

สตรีมแบบสด โดยเฉพาะสตรีมที่แสดงเป็นเวลานานอย่างช่องทีวี จะทำสิ่งต่อไปนี้ได้ แสดงคำแนะนำบนหน้าจอ/ข้อมูลเมตาแบบเป็นโปรแกรมโดยอิงตามการเล่นปัจจุบัน ตำแหน่งที่เจาะจงในสตรีมแบบสด ขอแนะนำให้ผู้ให้บริการเนื้อหาใส่ ข้อมูลเมตาของการเขียนโปรแกรมในแอปพลิเคชัน Web Receiver สำหรับผู้ใช้ที่ดียิ่งขึ้น ประสบการณ์การใช้งาน

คุณสามารถกำหนดค่าข้อมูลคำแนะนำเริ่มต้นสำหรับสตรีมในข้อความ LOAD ในลักษณะเดียวกับที่เราระบุว่าสตรีมเป็นสตรีมแบบสดใน ตัวอย่างก่อนหน้านี้ ส่วนแต่ละรายการหรือรายการในสตรีมแบบสด แสดงเป็น MediaMetadata ซึ่งจะจัดเก็บไว้ใน คิว มีชั้นเรียน MediaMetadata ที่แตกต่างกันสำหรับโปรแกรมประเภทต่างๆ เช่น TvShowMediaMetadata, MovieMediaMetadata, MusicTrackMediaMetadata อื่นๆ

ในข้อมูลโค้ดต่อไปนี้ เราใช้ออบเจ็กต์ MediaMetadata เพื่อระบุ ด้วย UNIX Timestamp พร้อมค่า sectionStartAbsoluteTime ระยะเวลาของรายการจะแสดงเป็นวินาที

// The metadata for a single TV show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

const previousShow = new ...;
const nextShow = new ...;

const containerMetadata = new cast.framework.messages.ContainerMetadata();
containerMetadata.title = 'My TV Channel';
containerMetadata.sections = [previousShow, currentShow, nextShow];

playerManager.getQueueManager().setContainerMetadata(containerMetadata);

ระยะที่ค้นหาได้แบบเรียลไทม์

Cast SDK มีองค์ประกอบ UI และการควบคุมที่อนุญาตให้ผู้ใช้ย้ายตำแหน่ง ส่วนหัวของตัวควบคุมการเล่นภายในสตรีมโดยใช้ ตัวควบคุมที่ขยาย หรือการควบคุมด้วยการสัมผัสในอุปกรณ์ที่เปิดใช้ระบบสัมผัส

LiveSeekableRange แสดงช่วงเวลาในสตรีมที่ผู้ใช้สามารถค้นหาได้ ใน ตัวรับเว็บที่คุณสามารถเข้าถึงข้อมูลเกี่ยวกับช่วงที่ค้นหาได้ผ่านทาง PlayerManager.getLiveSeekableRange() ซึ่งแสดงผล LiveSeekableRange ออบเจ็กต์ พร็อพเพอร์ตี้หลักของออบเจ็กต์ที่ควรระวังมีดังนี้

  • start — เวลาเริ่มต้น (เป็นวินาที) ของช่วงที่สัมพันธ์กับ เริ่มต้นสตรีมในเวลาไม่กี่วินาที
  • end — เวลาสูงสุดที่เป็นไปได้ (เป็นวินาที) ที่โปรแกรมเล่นสามารถค้นหาได้ ตามกลุ่มที่มีอยู่ เมื่อเทียบกับช่วงเริ่มต้นของสตรีม
  • isMovingWindow — ค่าบูลีนที่ระบุว่าช่วงที่ค้นหาได้หรือไม่ ย้าย (เช่น นำส่วนเก่าออกจากไฟล์ Manifest) ไปกับสตรีม ค่านี้ควรเป็น true สำหรับสตรีมแบบสดทั้งหมด
  • isLiveDone — ค่าบูลีนที่ระบุว่าสตรีมแบบสดมี เสร็จสิ้นแล้ว หมายความว่าจะไม่มีการสร้างกลุ่มใหม่ขึ้นมา

ขนาดของช่วงที่ค้นหาได้ ซึ่งแสดงเป็นเวลาระหว่าง start ถึง end พิจารณาจากจำนวนกลุ่มที่มีในสตรีม และจะ เคลื่อนไปตามสตรีม ตัวอย่างเช่น หากที่ช่วงเริ่มต้นของสตรีม ปุ่มที่ค้นหาได้ ช่วงคือ {start:0, end: 600, isMovingWindow: false, isLiveDone: false}, 10 วินาทีหลังจากที่สตรีมเริ่ม สตรีมอาจกลายเป็น {start: 10, end: 610, isMovingWindow: true, isLiveDone: false} คุณควรคำนึงถึงจุดเริ่มต้นและ ระบบจะอัปเดตเวลาสิ้นสุดในช่วงที่ค้นหาได้โดยอิงตามระยะเวลาที่ใช้ สร้างกลุ่มใหม่ ดังนั้นหากความยาวโดยทั่วไปของ ส่วนใดส่วนหนึ่งสำหรับสตรีมของคุณ 10 วินาที เวลาเริ่มต้นและสิ้นสุดจะอัปเดตทุกๆ 10 วินาทีโดยประมาณ

ปิดใช้การกรอวิดีโอ

หากต้องการปิดใช้การกรอวิดีโอในสตรีม คุณต้องนำฟังก์ชันการค้นหาออก จากคำสั่งสื่อที่รองรับใน Web Receiver ดังนี้

// disable seeking in the LOAD messageInterceptor
playerManager.removeSupportedMediaCommands(cast.framework.messages.Command.SEEK, true);

กำลังนำคำสั่งสื่อที่รองรับสำหรับสัญญาณ SEEK ออกจากแอปพลิเคชันผู้ส่ง และหน้าจอสัมผัสเพื่อปิดใช้การกรอวิดีโอ แต่ไม่ปิดใช้คำสั่งเสียง "Ok Google ย้อนกลับ 30 วินาที" ดู คำสั่งสื่อที่รองรับด้วยเสียง เพื่อดูรายละเอียดเกี่ยวกับวิธีปิดใช้คําสั่งสื่อสําหรับเสียง

กิจกรรมเกี่ยวกับเฟรมเวิร์กแบบสด

มี 2 กิจกรรม ได้แก่ LIVE_ENDED และ LIVE_IS_MOVING_WINDOW_CHANGED รวมอยู่ใน Live API ทั้ง 2 เหตุการณ์ผ่านการตรวจสอบแล้ว LiveStatusEvent ซึ่งมีช่วงที่ค้นหาได้แบบสดในปัจจุบัน

กิจกรรม คำอธิบาย
LIVE_ENDED ทริกเกอร์เมื่อสตรีมแบบสดสิ้นสุดลง ณ จุดนี้ ค่า end ใน LiveSeekableRange จะหยุดอัปเดต ผู้ใช้จะยังคงดูเนื้อหาภายในช่วงที่ค้นหาได้แบบสดได้
LIVE_IS_MOVING_WINDOW_CHANGED ทริกเกอร์เมื่อช่วงที่ค้นหาได้ของสตรีมแบบสดเปลี่ยนจากช่วงเวลาคงที่เป็นช่วงเวลาที่มีการเคลื่อนไหว หรือในทางกลับกัน สำหรับสตรีมแบบสด เหตุการณ์นี้จะใช้เมื่อโปรแกรมเล่นตรวจพบว่าไฟล์ Manifest กำลังนำส่วนก่อนหน้าออก

สถานการณ์ของสตรีมแบบสด

สถานการณ์ที่เป็นไปได้สำหรับสตรีมมิงแบบสดมีอยู่ 8 ประเภท ซึ่งแต่ละประเภทมีดังนี้ กำหนดค่าได้ด้วยการตั้งค่า 3 แบบหลักดังนี้

  • สตรีมมีเวลาเริ่มต้น
  • สตรีมมีเวลาสิ้นสุด
  • ผู้ใช้สามารถค้นหาภายในกรอบเวลาที่ค้นหาได้ของสตรีมแบบสดได้

โปรดดูการเพิ่มข้อมูลคู่มือโปรแกรมสำหรับวิธีกำหนดค่า ค่าเหล่านั้น

ด้านล่างนี้คือคำอธิบายและภาพหน้าจอของสถานการณ์ที่การถ่ายทอดสดที่รองรับ API ตัวแปร T1 และ T2 ใช้เพื่อแสดงการประทับเวลาใน ซ้ายและขวาของ UI ตามลำดับ

เวลาเริ่มต้น เวลาสิ้นสุด ค้นหาได้ T1 T2
สถานการณ์ 1 ไม่ได้ ไม่ได้ ไม่ได้ ส่วนหัวของตัวควบคุมการเล่น ไม่แสดง
สถานการณ์ 2 ไม่ ไม่ มี ส่วนหัว ไม่แสดง
สถานการณ์ 3 ไม่ มี ไม่ ส่วนหัว ไม่แสดง
สถานการณ์ 4 ไม่ มี มี ส่วนหัว ไม่แสดง
สถานการณ์ 5 มี ไม่ ไม่ แสดงเวลาเริ่มต้น ส่วนหัว
สถานการณ์ 6 มี ไม่ มี แสดงเวลาเริ่มต้น ส่วนหัว
สถานการณ์ 7 ใช่ ได้ ไม่ได้ แสดงเวลาเริ่มต้น แสดงเวลาสิ้นสุด
สถานการณ์ 8 ใช่ ได้ ใช่ แสดงเวลาเริ่มต้น แสดงเวลาสิ้นสุด

สถานการณ์ที่ 1

เวลาเริ่มต้น เวลาสิ้นสุด ค้นหาได้ T1 T2
ไม่ได้ ไม่ได้ ไม่ได้ เล่นส่วนหัว ไม่แสดง

สถานการณ์ที่ 1 ไม่มีเวลาเริ่มต้นหรือสิ้นสุด และผู้ใช้ไม่สามารถค้นหาภายในช่วงเวลา สตรีม เมื่อผู้ใช้หยุดสตรีม การเล่นจะกลับมาทำงานอีกครั้งจากขอบการถ่ายทอดสดแทน ของตำแหน่งที่สตรีมหยุดชั่วคราว

สถานการณ์ที่ 7

ทีวีแสดง UI สดของ Chromecast สำหรับสถานการณ์ที่ 7 พร้อมเวลานาฬิกา โทรศัพท์มือถือแสดง UI การถ่ายทอดสดสำหรับสถานการณ์ 7 พร้อมเวลานาฬิกา

เวลาเริ่มต้น เวลาสิ้นสุด ค้นหาได้ T1 T2
ใช่ ได้ ไม่ได้ ส่วนหัวของตัวควบคุมการเล่น ระยะเวลาของโปรแกรม

สถานการณ์ที่ 7 มีเวลาเริ่มต้นและเวลาสิ้นสุด แต่ไม่สามารถค้นหาได้ สอง การประทับเวลาใน UI, T1 และ T2 แสดงเวลาและจำนวนรวมของส่วนหัวของตัวควบคุมการเล่นปัจจุบัน ระยะเวลาโปรแกรมตามลำดับ หากผู้ใช้หยุดเล่นชั่วคราว/เล่นต่อ สตรีมจะ ให้กลับมาทำงานอีกครั้งที่ขอบของสตรีม ในตัวอย่างข้างต้น ส่วนสีแดงของ แถบเลื่อนแสดงส่วนของสตรีมนับตั้งแต่ผู้ใช้เริ่ม ที่ดูวิดีโอ

สถานการณ์ที่ 8

ทีวีแสดง UI สดของ Chromecast สำหรับสถานการณ์ที่ 8 พร้อมเวลานาฬิกา โทรศัพท์มือถือแสดง UI การถ่ายทอดสดสำหรับสถานการณ์ 8 พร้อมเวลานาฬิกา

เวลาเริ่มต้น เวลาสิ้นสุด ค้นหาได้ T1 T2
ใช่ ได้ ใช่ ส่วนหัวของตัวควบคุมการเล่น ระยะเวลาของโปรแกรม

สถานการณ์ที่ 7 มีเวลาเริ่มต้น เวลาสิ้นสุด และสามารถค้นหาได้ การประทับเวลา 2 รายการ ใน UI, T1 และ T2 ให้แสดงเวลาของส่วนหัวของตัวควบคุมการเล่นปัจจุบันและโปรแกรมทั้งหมด ตามลำดับ หากผู้ใช้หยุดเล่นชั่วคราว/เล่นต่อ สตรีมจะกลับมาทำงานอีกครั้ง ในขณะที่หยุดชั่วคราวหากอยู่ในหน้าต่างที่ค้นหาได้ พื้นที่ที่เป็นสีแดงบน แถบเลื่อนจะแสดงตำแหน่งที่ผู้ใช้ย้อนกลับได้และพื้นที่ที่เป็นสีขาว แสดงถึงที่ที่พวกเขาสามารถมุ่งไปข้างหน้าได้

การกำหนดค่าสถานการณ์

การกำหนดค่าสตรีมเป็นสถานการณ์สดที่เจาะจงจะแบ่งออกเป็น 3 ส่วน ดังนี้

  1. ตั้งค่าประเภทสตรีม - ทำเครื่องหมายสตรีมว่าเป็น สตรีมแบบสด
  2. เพิ่มข้อมูลคู่มือโปรแกรม - กำหนดเวลาเริ่มต้น และระยะเวลาในออบเจ็กต์ MediaMetadata
  3. กำหนดค่าฟังก์ชันการกรอวิดีโอ - เปิดใช้หรือ ปิดใช้การกรอวิดีโอ

ลักษณะการเล่น

โดย UI จะอัปเดตข้อมูลเมตาการเล่นต่อไปขณะที่หยุดชั่วคราว รวมส่วนหัวการเล่นและเวลา Edge สด เมื่อสตรีมกลับมาเล่นอีกครั้ง เป็นลักษณะการทำงานบางอย่างที่ควรทราบ ซึ่งจะแตกต่างกันไปตามการกำหนดค่าของสตรีม

สตรีมที่ค้นหาได้

เมื่อสตรีมที่ค้นหาได้กลับมาแสดงอีกครั้ง

  • ขอบแบบเรียลไทม์ต้องได้รับการอัปเดตเป็นตําแหน่งแบบเรียลไทม์และช่วงที่ค้นหาได้ จะได้รับการปรับให้สอดคล้องกัน
  • หากส่วนหัวของตัวควบคุมการเล่นข้ามผ่านรายการปัจจุบัน ระบบจะอัปเดตแถบกรอ พร้อมข้อมูลเมตาจากรายการใหม่ (รวมถึงเวลาเริ่มต้นและเวลาสิ้นสุด หาก ว่าง)
  • หากหน้าต่างที่ค้นหาได้มีความยาว "X" ช่วงที่ค้นหาได้จะขยายกลับไปที่ ไม่เกิน "X" หรือในช่วงต้นของการแสดง แล้วแต่ว่าจำนวนใดจะน้อยกว่า
  • หากผู้ใช้หยุดชั่วคราวเป็นเวลานานพอจนออกจากเวลาปัจจุบันไปแล้ว หน้าต่างที่ค้นหาได้ สตรีมจะกลับมาทำงานอีกครั้งในจุดแรกสุด (ซ้ายสุด) ของหน้าต่างที่ค้นหาได้

กรอวิดีโอไปที่ LiveSeekableRange.end ในการเล่นต่อที่ Live Edge หลังจากยกเลิกการหยุดชั่วคราว

let playerManager = cast.framework.CastReceiverContext.getInstance().getPlayerManager();
// Intercept the message to PLAY
playerManager.setMessageInterceptor(cast.framework.messages.MessageType.PLAY, (requestData) => {
  ...
  if (playerManager.getLiveSeekableRange()) {
    // Resume playback at the live edge
    playerManager.seek(playerManager.getLiveSeekableRange().end);
  } else {
    return requestData;
  }
  ...
});

สตรีมที่ค้นหาไม่ได้

เมื่อสตรีมที่ค้นหาไม่ได้กลับมาทำงานอีกครั้ง สิ่งที่จะเกิดขึ้นมีดังนี้

  • ในกรณีนี้ การเล่นจะกลับมาทำงานที่ Edge สด
  • หากขอบสดข้ามผ่านรายการปัจจุบัน แถบกรอควรจะ อัปเดตด้วยข้อมูลเมตาจากรายการใหม่ (รวมถึงเวลาเริ่มต้นและสิ้นสุด ทุกครั้ง)

การเปลี่ยนแปลงแพลตฟอร์ม API และ การปรับแต่ง UI การถ่ายทอดสด

Cast SDK มีการสนับสนุนในตัวสำหรับการสร้างอินเทอร์เฟซผู้ใช้ที่กำหนดเอง โดยใช้ UI ที่พร้อมใช้งานทันที อย่างไรก็ตาม คุณจะต้องปฏิบัติตาม รายการตรวจสอบการออกแบบ UX ของการแคสต์เมื่อปรับแต่ง ของ Google

เว็บรีซีฟเวอร์

บนเว็บรีซีฟเวอร์ จะมี PlayerData มีช่องต่อไปนี้เพื่อให้นักพัฒนาซอฟต์แวร์ขยาย อินเทอร์เฟซสำหรับสตรีมแบบสด

  • isLive - ธงที่ระบุว่าสตรีมปัจจุบันเป็นสตรีมแบบสดหรือไม่ แทนที่จะเป็น VOD
  • liveSeekableRange - ช่วงที่ค้นหาได้ที่จะแสดงบนการแบ่งหน้าจอ หน้าต่าง DVR
  • mediaStartAbsoluteTime - เวลาที่ส่วนดังกล่าวเริ่มต้นในเวลาสัมบูรณ์ (UNIX Epoch)
  • sectionStartTimeInMedia - เวลาเริ่มต้นของส่วนเป็นวินาทีที่สัมพันธ์กับ เวลาเริ่มต้นของสื่อ
  • sectionDuration - ระยะเวลาของส่วนเป็นวินาที

และอย่าลืมคำนึงถึง การถ่ายทอดสด 2 รายการเมื่อปรับแต่ง UI

Android SDK

การใช้วิดเจ็ต Seekbar ของ Android ในฟังก์ชัน "สด" UIMediaController เลิกใช้งานแล้ว โปรดใช้ CastSeekBar แทน

ก่อนหน้า
ช่วงพักโฆษณา
ถัดไป
รูปภาพรอง