Cast SDK มี API ในตัวเพื่อรองรับเนื้อหาสด ซึ่งรวมถึง UI ที่ยืดหยุ่นและพร้อมใช้งานทันที พร้อมใช้งานร่วมกับ API ที่จะช่วยให้นักพัฒนาซอฟต์แวร์สร้างประสบการณ์การใช้งานแบบสดได้ผ่านทางโค้ดเพียงไม่กี่บรรทัด Live API รองรับการแสดงเวลาเริ่มต้นและสิ้นสุด ข้อมูลเมตาของโปรแกรม การควบคุม DVR และหน้าต่างที่ค้นหาได้
คําแนะนํานี้สาธิตวิธีกําหนดค่าสตรีมให้กับ Live API รวมถึงโค้ดและตัวอย่างข้อมูลเมตาสําหรับการกําหนดค่าสถานการณ์หลักแบบสด รวมถึงภาพหน้าจอที่แสดงให้เห็นว่าแต่ละสถานการณ์มีลักษณะอย่างไร
คําเตือน: ปัจจุบันยังไม่รองรับ Live API ของ Ad Breaks API
สิ่งที่ต้องดำเนินการก่อน
คุณต้องทําความคุ้นเคยกับพื้นฐานของการใช้ตัวรับเว็บ ก่อนอ่านคู่มือนี้ นอกจากนี้ หากต้องการเรียกใช้ตัวอย่างโค้ด คุณจะต้องมีสิทธิ์เข้าถึงสตรีมแบบสดที่สอดคล้องกับประเภทสื่อที่รองรับสําหรับ Cast โดยทั่วไปแล้ว ฟีเจอร์สตรีมแบบสดรองรับการกําหนดค่าสตรีมแบบสดทั่วไปสําหรับสื่อที่รองรับ
ข้อกําหนดต่อไปนี้ใช้ตลอดคู่มือ
กรอบเวลาที่ค้นหาได้ - ช่วงของสตรีมแบบสดที่ผู้ใช้ค้นหาได้Live Edge - ส่วนใหม่ล่าสุดของสตรีมแบบสดที่พร้อมใช้งานสําหรับผู้เล่นส่วนหัวของตัวควบคุมการเล่น - การประทับเวลาของ UI สําหรับตําแหน่งการเล่นปัจจุบัน
การแคสต์สตรีมแบบสด
คุณกําหนดค่า SDK ตัวรับเว็บเพื่อใช้ Live API สําหรับเนื้อหาได้ 2 วิธี ดังนี้
โดยใช้ตัวสกัดกั้นข้อความ LOAD ในแอปพลิเคชัน Web Receiver ของคุณ
(แนะนำ)
โดยใช้คําขอโหลดที่ฝั่งผู้ส่งหรือฝั่งผู้รับสร้างขึ้น
สกัดกั้นมีออบเจ็กต์ LoadRequestDatastreamTypemediaInformationStreamType.LIVEMediaInformation.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;
});
การเพิ่มข้อมูลคู่มือโปรแกรม
สตรีมแบบสด โดยเฉพาะอย่างยิ่งสตรีมที่ยาวนาน เช่น ช่องทีวี จะสามารถแสดงคู่มือบนหน้าจอ/ข้อมูลเมตาการจัดโปรแกรมโดยอิงจากตําแหน่งการเล่นปัจจุบันในสตรีมแบบสดได้ ผู้ให้บริการเนื้อหาขอแนะนําให้ใส่ข้อมูลเมตาการเขียนโปรแกรมในเว็บแอปพลิเคชันสําหรับผู้รับเว็บ เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้น
คุณกําหนดค่าข้อมูลคู่มือเบื้องต้นสําหรับสตรีมในการสกัดกั้นข้อความ "LOAD" ได้ ซึ่งเหมือนกับที่เราระบุว่าสตรีมเป็นสตรีมแบบสดในตัวอย่างก่อนหน้านี้ ส่วนแต่ละรายการหรือโปรแกรมในสตรีมแบบสดจะแสดงเป็นออบเจ็กต์ MediaMetadataคิว
มีโปรแกรม MediaMetadata ที่แตกต่างกันสําหรับโปรแกรมประเภทต่างๆ เช่น TvShowMediaMetadataMovieMediaMetadataMusicTrackMediaMetadata
ในข้อมูลโค้ดต่อไปนี้ เราใช้ออบเจ็กต์ 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 ที่ให้ผู้ใช้ย้ายส่วนหัวของตัวควบคุมการเล่นภายในสตรีมโดยใช้ตัวควบคุมแบบขยาย หรือการควบคุมด้วยการสัมผัสบนอุปกรณ์ที่เปิดใช้หน้าจอสัมผัส
LiveSeekableRangePlayerManager.getLiveSeekableRange()LiveSeekableRange
start — เวลาเริ่มต้น (เป็นวินาที) ของช่วงที่เกี่ยวข้องกับจุดเริ่มต้นของสตรีมเป็นวินาทีend — เวลาสูงสุดที่เป็นไปได้ (เป็นวินาที) ที่ผู้เล่นสามารถเรียกดูได้ โดยอิงตามกลุ่มที่ใช้ได้เมื่อเทียบกับจุดเริ่มต้นของสตรีมismoveWindow - ค่าบูลีนที่ระบุว่ามีช่วงที่ค้นหาได้ซึ่งมีการย้าย (เช่น การนํากลุ่มเก่าออกจากไฟล์ Manifest) ที่มีสตรีมหรือไม่ ค่านี้ควรเป็นจริง สําหรับสตรีมแบบสดทั้งหมดisLiveDone - ค่าบูลีนที่ระบุว่าสตรีมแบบสดจบลงหรือยัง ซึ่งหมายความว่าไม่มีการสร้างกลุ่มใหม่
ขนาดของช่วงที่ขอได้ซึ่งแสดงเป็นเวลาระหว่าง start ถึง end จะกําหนดโดยจํานวนกลุ่มที่มีในสตรีมและจะย้ายด้วยสตรีม ตัวอย่างเช่น ที่จุดเริ่มต้นของสตรีม ช่วงที่ค้นหาได้คือ {start:0, end: 600, isMovingWindow: false, isLiveDone: false} และ 10 วินาทีหลังจากที่สตรีมเริ่มต้นขึ้น จะกลายเป็น {start: 10, end: 610,
isMovingWindow: true, isLiveDone: false} โปรดทราบว่าเวลาเริ่มต้นและสิ้นสุดในช่วงที่ค้นหาได้จะอัปเดตตามเวลาที่ใช้ในการสร้างกลุ่มใหม่ ดังนั้นหากความยาวเฉลี่ยของกลุ่มสําหรับสตรีมคือ 10 วินาที เวลาเริ่มต้นและเวลาสิ้นสุดจะอัปเดตประมาณทุก 10 วินาทีด้วย
หมายเหตุ: หากผู้ใช้หยุดสตรีมชั่วคราวนานเกินกว่าที่ส่วนหัวของการเล่นจะอยู่นอกกรอบเวลาที่เรียกดูได้แบบสด หรือในกรณีที่การค้นหาไม่ได้ปิดใช้อยู่เลย สตรีมจะเริ่มเล่นที่ขอบสตรีมของสตรีมแบบสดอีกครั้ง ปิดใช้การกรอวิดีโอ
หากต้องการปิดใช้การค้นหาภายในสตรีม คุณจะต้องนําฟังก์ชันการค้นหาออกจากคําสั่งสื่อที่รองรับในตัวรับเว็บ ดังนี้
// 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ทํางานเมื่อสตรีมแบบสดสิ้นสุดลง ณ จุดนี้ ค่าสิ้นสุด ใน LiveSeekableRange จะหยุดการอัปเดต ผู้ใช้จะยังสามารถดูเนื้อหาภายในช่วงที่ค้นหาได้แบบสด
LIVE_IS_MOVING_WINDOW_CHANGEDทํางานเมื่อช่วงที่ค้นหาได้ของสตรีมแบบสดเปลี่ยนจากหน้าต่างคงที่เป็นหน้าต่างเคลื่อนไหว หรือในทางกลับกัน สําหรับสตรีมแบบสด กรณีนี้จะเกิดขึ้นเมื่อโปรแกรมเล่นตรวจพบว่าไฟล์ Manifest นํากลุ่มก่อนหน้านี้ออก
สถานการณ์สตรีมแบบสด
ข้อควรระวัง: ระบบรองรับสถานการณ์ที่ 1, 7 และ 8 อย่างเป็นทางการ สตรีมมิงแบบสดมีสถานการณ์ที่เป็นไปได้ 8 ประเภท ซึ่งแต่ละประเภทจะได้รับการกําหนดค่าโดยการตั้งค่าหลัก 3 แบบ ได้แก่
สตรีมมีเวลาเริ่มต้น
สตรีมมีเวลาสิ้นสุด
ผู้ใช้ได้รับอนุญาตให้กรอวิดีโอได้ในหน้าต่างสตรีมแบบสดของสตรีมแบบสด
ดูวิธีกําหนดค่าเหล่านั้นที่การเพิ่มข้อมูลคู่มือโปรแกรม
ด้านล่างนี้คือคําอธิบายและภาพหน้าจอของสถานการณ์ที่ Live API รองรับ ระบบจะใช้ตัวแปร T1 และ T2 เพื่อแสดงการประทับเวลาทางด้านซ้ายและขวาของ UI ตามลําดับ
เวลาเริ่มต้น
เวลาสิ้นสุด
ค้นหาได้
เฟรมที่ 1
T2
สถานการณ์ 1
ไม่ได้
ไม่ได้
ไม่ได้
เล่นบนศีรษะ
ไม่แสดง
สถานการณ์ 2
ไม่ต้องการ
ไม่ต้องการ
ต้องการ
ส่วนหัวของ Play
ไม่แสดง
สถานการณ์ 3
ไม่ต้องการ
ต้องการ
ไม่ต้องการ
ส่วนหัวของ Play
ไม่แสดง
สถานการณ์ 4
ไม่ต้องการ
ต้องการ
ต้องการ
ส่วนหัวของ Play
ไม่แสดง
สถานการณ์ 5
ต้องการ
ไม่ต้องการ
ไม่ต้องการ
แสดงการเริ่มเชื่อมต่อ
ส่วนหัวของ Play
สถานการณ์ 6
ต้องการ
ไม่ต้องการ
ต้องการ
แสดงการเริ่มเชื่อมต่อ
ส่วนหัวของ Play
สถานการณ์ 7
ได้
ได้
ไม่ได้
แสดงเวลาเริ่มต้น
แสดงเวลาสิ้นสุด
สถานการณ์ 8
ได้
ได้
ได้
แสดงเวลาเริ่มต้น
แสดงเวลาสิ้นสุด
ข้อควรระวัง: ระบบไม่รองรับสถานการณ์ 3 และ 4 อย่างเป็นทางการ แต่ก็อาจเล่นได้ สถานการณ์ 1
เวลาเริ่มต้น
เวลาสิ้นสุด
ค้นหาได้
เฟรมที่ 1
T2
ไม่ได้
ไม่ได้
ไม่ได้
เล่นหัว
ไม่แสดง
สถานการณ์แรกไม่มีเวลาเริ่มต้นหรือสิ้นสุด และผู้ใช้ไม่สามารถค้นหาภายในสตรีม เมื่อผู้ใช้หยุดสตรีม การเล่นจะกลับมาทํางานอีกครั้งจากขอบแบบสดแทนตําแหน่งที่หยุดชั่วคราวสตรีม
สถานการณ์ 7
เวลาเริ่มต้น
เวลาสิ้นสุด
ค้นหาได้
เฟรมที่ 1
T2
ได้
ได้
ไม่ได้
เล่นบนศีรษะ
ระยะเวลาของโปรแกรม
สถานการณ์ 7 มีเวลาเริ่มต้นและเวลาสิ้นสุด แต่ค้นหาไม่ได้ การประทับเวลา 2 รายการต่อไปนี้ใน UI T1 และ T2 จะแสดงเวลาปัจจุบันของส่วนหัวของตัวควบคุมการเล่นและระยะเวลาทั้งหมดของโปรแกรมตามลําดับ หากผู้ใช้หยุดชั่วคราว/เล่นต่อ สตรีมจะเล่นต่อจากขอบสตรีมแบบสด ในตัวอย่างข้างต้น ส่วนสีแดงของแถบค้นหาแสดงถึงส่วนของสตรีมนับตั้งแต่ที่ผู้ใช้เริ่มรับชม
สถานการณ์ 8
เวลาเริ่มต้น
เวลาสิ้นสุด
ค้นหาได้
เฟรมที่ 1
T2
ได้
ได้
ได้
เล่นบนศีรษะ
ระยะเวลาของโปรแกรม
สถานการณ์ 7 มีเวลาเริ่มต้น เวลาสิ้นสุด และมองหาได้ การประทับเวลา 2 รายการต่อไปนี้ใน UI T1 และ T2 จะแสดงเวลาปัจจุบันของส่วนหัวของตัวควบคุมการเล่นและระยะเวลาทั้งหมดของโปรแกรมตามลําดับ หากผู้ใช้หยุดชั่วคราว/เล่นต่อ สตรีมจะกลับมาทํางานอีกครั้งเมื่อถึงเวลาที่หยุดชั่วคราวหากอยู่ภายในกรอบเวลาที่ค้นหาได้ พื้นที่สีแดงบนแถบค้นหาแสดงถึงที่ที่ผู้ใช้ย้อนกลับไปดูได้และพื้นที่สีขาวจะแสดงจุดที่จะกรอไปข้างหน้า
การกําหนดค่าสถานการณ์
การกําหนดค่าสตรีมเป็นสถานการณ์จริงแบบสดๆ แบ่งออกเป็น 3 ส่วนดังนี้
ตั้งค่าประเภทสตรีม - ทําเครื่องหมายสตรีมว่าเป็นสตรีมแบบสดเพิ่มข้อมูลคู่มือโปรแกรม - กําหนดเวลาเริ่มต้นและระยะเวลาในออบเจ็กต์ MediaMetadataกําหนดค่าฟังก์ชันการค้นหา - เปิดใช้หรือปิดใช้การค้นหา
พฤติกรรมการเล่น
ในขณะที่หยุดชั่วคราว UI จะอัปเดตข้อมูลเมตาของการเล่นต่อไป ซึ่งรวมถึงเวลาเล่นที่ศีรษะและ Edge แบบเรียลไทม์ เมื่อสตรีมต่อมีสตรีม 2-3 พฤติกรรมที่ควรคํานึงถึง ซึ่งแตกต่างกันไปตามการกําหนดค่าสตรีม
สตรีมที่ค้นหาได้
เมื่อเรียกคืนสตรีมที่ต้องการแล้ว ให้ทําดังนี้
ขอบแบบเรียลไทม์จะอัปเดตในสถานที่จริงและช่วงที่ค้นหาได้จะได้รับการปรับเปลี่ยนให้สอดคล้องกัน
หากส่วนหัวของตัวควบคุมการเล่นข้ามผ่านรายการปัจจุบัน ระบบจะอัปเดตแถบสครับที่มีข้อมูลเมตาจากรายการใหม่ (รวมถึงเวลาเริ่มต้นและเวลาสิ้นสุด)
หากหน้าต่างที่ค้นหาได้มีความยาว "X" ช่วงที่ค้นหาได้จะย้อนกลับไปเป็น "X" มากที่สุด หรือตอนต้นของรายการ ขึ้นอยู่กับว่ากรณีใดเล็กกว่า
หากผู้ใช้หยุดชั่วคราวเป็นเวลานานจนทําให้เวลาปัจจุบันไม่อยู่ในกรอบเวลาที่ค้นหาได้อีก สตรีมจะกลับมาทํางานอีกครั้งโดยเร็วที่สุด (ซ้ายสุด) ของหน้าต่างที่ค้นหาได้
กรอวิดีโอ
LiveSeekableRange.end
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;
}
...
});
สตรีมที่รับชมไม่ได้
เมื่อรีสตรีมสตรีมที่ไม่สามารถค้นหาได้ ให้ทําดังนี้
ในกรณีนี้ การเล่นจะกลับมาทํางานที่ขอบแบบสด
หากขอบสดกระโดดผ่านรายการปัจจุบัน ก็ควรอัปเดตแถบสครับด้วยข้อมูลเมตาจากรายการใหม่ (รวมถึงเวลาเริ่มต้นและเวลาสิ้นสุด หากมี)
การเปลี่ยนแปลงแพลตฟอร์ม API และปรับแต่ง UI สด
Cast SDK มีการสนับสนุนในตัวสําหรับสร้างอินเทอร์เฟซผู้ใช้ที่กําหนดเองแทนการใช้ UI พร้อมใช้งานทันที อย่างไรก็ตาม คุณต้องปฏิบัติตามรายการตรวจสอบการออกแบบ UX ขณะปรับแต่งอินเทอร์เฟซ
เว็บตัวรับ
ใน Web Receiver
PlayerData
isLive - แฟล็กที่ระบุว่าสตรีมปัจจุบันเป็นสตรีมแบบสดหรือไม่ ไม่ใช่ VODliveSeekableRange - ช่วงที่ต้องการแสดงในหน้าจอการถอดรหัสหน้าต่าง DVRmediaStartAbsoluteTime - ส่วนที่ส่วนเริ่มในเวลาสัมบูรณ์
(UNIX Epoch )sectionStartTimeInMedia - เวลาเริ่มต้นของส่วนเป็นวินาทีที่สัมพันธ์กับเวลาเริ่มต้นของสื่อsectionDuration - ระยะเวลาของส่วนเป็นวินาที
และโปรดคํานึงถึงการถ่ายทอดสด 2 รายการ ด้วยเมื่อปรับแต่ง UI
Android SDK
เราเลิกใช้งานวิดเจ็ต Seekbar ของ Android ใน UIMediaController แล้ว ซึ่งเป็นฟังก์ชันการทํางานแบบเรียลไทม์ แต่จะใช้ CastSeekBar แทน
