1. ภาพรวม
Codelab นี้จะสอนวิธีสร้างแอปตัวรับสัญญาณเว็บที่กำหนดเองซึ่งใช้ Cast Live Breaks API
Google Cast คืออะไร
Google Cast ช่วยให้ผู้ใช้แคสต์เนื้อหาจากอุปกรณ์เคลื่อนที่ไปยังทีวีได้ จากนั้นผู้ใช้จะใช้อุปกรณ์เคลื่อนที่เป็นรีโมตคอนโทรลสำหรับการเล่นสื่อบนทีวีได้
Google Cast SDK ช่วยให้คุณขยายแอปเพื่อควบคุมทีวีหรือระบบเสียงได้ Cast SDK ช่วยให้คุณเพิ่มคอมโพเนนต์ UI ที่จำเป็นตามรายการตรวจสอบการออกแบบ Google Cast ได้
รายการตรวจสอบการออกแบบ Google Cast มีไว้เพื่อให้ประสบการณ์ของผู้ใช้ Cast นั้นเรียบง่ายและคาดการณ์ได้ในทุกแพลตฟอร์มที่รองรับ
เราจะสร้างอะไร
เมื่อทำ Codelab นี้เสร็จแล้ว คุณจะสร้างตัวรับ Cast ที่ใช้ประโยชน์จาก Live API ได้
สิ่งที่คุณจะได้เรียนรู้
- วิธีจัดการเนื้อหาวิดีโอสดใน Cast
- วิธีกำหนดค่าสถานการณ์การไลฟ์สดต่างๆ ที่ Cast รองรับ
- วิธีเพิ่มข้อมูลโปรแกรมลงในไลฟ์สด
สิ่งที่คุณต้องมี
- เบราว์เซอร์ Google Chrome เวอร์ชันล่าสุด
- บริการโฮสติ้ง HTTPS เช่น Firebase Hosting หรือ ngrok
- อุปกรณ์ Google Cast เช่น Chromecast หรือ Android TV ที่กำหนดค่าให้เข้าถึงอินเทอร์เน็ตได้
- ทีวีหรือจอภาพที่มีอินพุต HDMI หรือ Google Home Hub
ประสบการณ์
- คุณจะต้องมีความรู้ด้านการพัฒนาเว็บมาก่อน
- มีประสบการณ์ในการสร้างแอปพลิเคชันตัวส่งและตัวรับ Cast มาก่อน
คุณจะใช้บทแนะนำนี้อย่างไร
คุณจะให้คะแนนประสบการณ์ในการสร้างเว็บแอปเท่าใด
2. รับโค้ดตัวอย่าง
คุณดาวน์โหลดโค้ดตัวอย่างทั้งหมดลงในคอมพิวเตอร์ได้...
และแตกไฟล์ ZIP ที่ดาวน์โหลด
3. การติดตั้งใช้งานตัวรับสัญญาณในเครื่อง
หากต้องการใช้ตัวรับเว็บกับอุปกรณ์ Cast คุณต้องโฮสต์ตัวรับเว็บในที่ที่อุปกรณ์ Cast เข้าถึงได้ หากคุณมีเซิร์ฟเวอร์ที่รองรับ HTTPS อยู่แล้ว ให้ข้ามวิธีการต่อไปนี้และจด URL ไว้ เนื่องจากคุณจะต้องใช้ในส่วนถัดไป
หากไม่มีเซิร์ฟเวอร์ให้ใช้งาน คุณสามารถใช้ Firebase Hosting หรือ ngrok
เรียกใช้เซิร์ฟเวอร์
เมื่อตั้งค่าบริการที่ต้องการแล้ว ให้ไปที่ app-start แล้วเริ่มเซิร์ฟเวอร์
จดบันทึก URL ของตัวรับที่โฮสต์ คุณจะต้องใช้ในส่วนถัดไป
4. ลงทะเบียนแอปพลิเคชันใน Cast Developer Console
คุณต้องลงทะเบียนแอปพลิเคชันเพื่อให้เรียกใช้ตัวรับสัญญาณที่กำหนดเองได้ตามที่สร้างไว้ใน Codelab นี้บนอุปกรณ์ Chromecast หลังจากลงทะเบียนแอปพลิเคชันแล้ว คุณจะได้รับรหัสแอปพลิเคชันที่แอปพลิเคชันผู้ส่งต้องใช้เพื่อทำการเรียก API เช่น เพื่อเปิดใช้แอปพลิเคชันตัวรับ
คลิก "เพิ่มแอปพลิเคชันใหม่"
เลือก "Custom Receiver" ซึ่งเป็นสิ่งที่เรากำลังสร้าง
ป้อนรายละเอียดผู้รับใหม่ โดยตรวจสอบว่าใช้ URL ที่คุณได้รับ
ในส่วนสุดท้าย จดรหัสแอปพลิเคชันที่กำหนดให้กับตัวรับสัญญาณใหม่ของคุณ
นอกจากนี้ คุณต้องลงทะเบียนอุปกรณ์ Google Cast เพื่อให้อุปกรณ์เข้าถึงแอปพลิเคชันตัวรับได้ก่อนที่จะเผยแพร่ เมื่อเผยแพร่แอปพลิเคชันตัวรับแล้ว แอปพลิเคชันจะพร้อมใช้งานในอุปกรณ์ Google Cast ทั้งหมด สำหรับ Codelab นี้ เราขอแนะนำให้ใช้แอปพลิเคชันตัวรับที่ยังไม่ได้เผยแพร่
คลิก "เพิ่มอุปกรณ์ใหม่"
ป้อนหมายเลขซีเรียลที่พิมพ์ไว้ที่ด้านหลังของอุปกรณ์ Cast และตั้งชื่อที่สื่อความหมาย นอกจากนี้ คุณยังดูหมายเลขซีเรียลได้โดยการแคสต์หน้าจอใน Chrome เมื่อเข้าถึงแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK
โดยตัวรับสัญญาณและอุปกรณ์จะใช้เวลา 5-15 นาทีในการเตรียมพร้อมสำหรับการทดสอบ หลังจากรอ 5-15 นาที คุณต้องรีบูตอุปกรณ์ Cast
5. แคสต์ไลฟ์สดแบบง่าย
ก่อนเริ่ม Codelab นี้ คุณอาจต้องอ่าน คู่มือนักพัฒนาแอปแบบสด ซึ่งจะให้ภาพรวมของ Live API
สำหรับผู้ส่ง เราจะใช้ Cactool เพื่อเริ่มเซสชันการแคสต์ โดยตัวรับสัญญาณได้รับการออกแบบมาให้เริ่มเล่นไลฟ์สดโดยอัตโนมัติ
ตัวรับประกอบด้วยไฟล์ 3 ไฟล์ ไฟล์ HTML พื้นฐานชื่อ receiver.html ซึ่งมีโครงสร้างแอปหลัก คุณไม่จำเป็นต้องแก้ไขไฟล์นี้ นอกจากนี้ยังมีไฟล์ชื่อ receiver.js ซึ่งมีตรรกะทั้งหมดสำหรับตัวรับ สุดท้ายนี้ ยังมี metadata_service.js ซึ่งจะใช้ใน Codelab ในภายหลังเพื่อจำลองการรับข้อมูลคู่มือรายการ
หากต้องการเริ่มต้น ให้เปิด Cactool ใน Chrome ป้อนรหัสแอปพลิเคชันตัวรับที่คุณได้รับใน Cast SDK Developer Console แล้วคลิกตั้งค่า
ต้องสั่งให้ Web Receiver Cast Application Framework (CAF) ทราบว่าเนื้อหาที่จะเล่นเป็นไลฟ์สด โดยแก้ไขแอปพลิเคชันด้วยบรรทัดโค้ดต่อไปนี้ เพิ่มลงในส่วนเนื้อหาหลักของเครื่องดักจับการโหลดใน receiver.js ดังนี้
request.media.streamType = cast.framework.messages.StreamType.LIVE;
การตั้งค่าประเภทสตรีมเป็น LIVE จะเปิดใช้ UI แบบสดของ CAF Web Receiver SDK จะข้ามไปยังขอบไลฟ์ของสตรีมโดยอัตโนมัติ ระบบยังไม่ได้เพิ่มข้อมูลคู่มือรายการสด แถบเลื่อนจึงแสดงความยาวเต็มของช่วงที่ค้นหาได้ของสตรีม
บันทึกการเปลี่ยนแปลงใน receiver.js และเริ่มเซสชันการแคสต์ใน Cactool โดยคลิกปุ่มแคสต์แล้วเลือกอุปกรณ์แคสต์เป้าหมาย ไลฟ์สดควรเริ่มเล่นทันที
6. การเพิ่มข้อมูลคู่มือรายการทีวี
การสนับสนุนเนื้อหาที่กำลังถ่ายทอดสดของ CAF ตอนนี้รวมถึงการรองรับการแสดงข้อมูลผังรายการในแอปพลิเคชันตัวรับและตัวส่งด้วย เราขอแนะนำให้ผู้ให้บริการเนื้อหารวมข้อมูลเมตาการเขียนโปรแกรมไว้ในแอปพลิเคชันตัวรับสัญญาณเพื่อประสบการณ์การใช้งานที่ดียิ่งขึ้นสำหรับผู้ใช้ปลายทาง โดยเฉพาะอย่างยิ่งสำหรับไลฟ์สดที่ออกอากาศเป็นเวลานาน เช่น ช่องทีวี
CAF รองรับการตั้งค่าข้อมูลเมตาสำหรับหลายๆ รายการในสตรีมเดียว การตั้งค่าการประทับเวลาเริ่มต้นและระยะเวลาในออบเจ็กต์ MediaMetadata จะทำให้ตัวรับอัปเดตข้อมูลเมตาที่แสดงในผู้ส่งและภาพซ้อนโดยอัตโนมัติตามตำแหน่งปัจจุบันของผู้เล่นในสตรีม ด้านล่างนี้คือตัวอย่าง API และการใช้งานทั่วไป
// A sample metadata object 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;
สำหรับ Codelab นี้ เราจะใช้บริการข้อมูลเมตาสุ่มเพื่อระบุข้อมูลเมตาสำหรับไลฟ์สด หากต้องการสร้างข้อมูลเมตาของรายการโปรแกรม ให้สร้างคอนเทนเนอร์ ContainerMetadata มีรายการออบเจ็กต์ MediaMetadata สำหรับสตรีมสื่อรายการเดียว ออบเจ็กต์ MediaMetadata แต่ละรายการจะแสดงส่วนเดียวในคอนเทนเนอร์ เมื่อหัวอ่านอยู่ภายในขอบเขตของส่วนที่กำหนด ระบบจะคัดลอกข้อมูลเมตาของหัวอ่านไปยังสถานะสื่อโดยอัตโนมัติ เพิ่มโค้ดต่อไปนี้ลงในไฟล์ receiver.js เพื่อดาวน์โหลดข้อมูลเมตาตัวอย่างจากบริการของเราและระบุคอนเทนเนอร์ให้กับ CAF
/**
* Gets the current program guide data from the sample MetadataService. Once
* obtained, the guide information is added using QueueManager.
*/
async function loadGuideData() {
const data = await MetadataService.fetchLiveMetadata();
const containerMetadata = new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}
นอกจากนี้ ให้เพิ่มการเรียกฟังก์ชันสำหรับการโหลดข้อมูลไกด์ในตัวสกัดกั้นการโหลด
loadGuideData();
บันทึกไฟล์ receiver.js แล้วเริ่มเซสชัน Cast คุณควรเห็นเวลาเริ่มต้น เวลาสิ้นสุด และชื่อของรายการปรากฏบนหน้าจอ
ระบบจะส่งข้อความสถานะสื่อใหม่จากตัวรับไปยังผู้ส่งทั้งหมดเมื่อหัวอ่านเปลี่ยนไปเป็นส่วนใหม่ในคอนเทนเนอร์ เพื่อให้แอปพลิเคชันของผู้ส่งอัปเดต UI ได้ เราขอแนะนำให้แอปพลิเคชันตัวรับอัปเดตข้อมูลเมตาของคอนเทนเนอร์ในตัวสกัดกั้นสถานะสื่อเพื่อป้อนข้อมูลโปรแกรมไปยังแอปพลิเคชันตัวส่งต่อไป ในบริการตัวอย่าง เราจะแสดงข้อมูลเมตาของรายการปัจจุบัน รวมถึงข้อมูลเมตาของรายการอีก 2 รายการถัดไป หากต้องการอัปเดตข้อมูลเมตาสำหรับสตรีม ให้สร้างคอนเทนเนอร์ใหม่และเรียกใช้ setContainerMetadata ตามตัวอย่างก่อนหน้า
7. การปิดใช้การกรอ
สตรีมวิดีโอส่วนใหญ่ประกอบด้วยส่วนต่างๆ ที่มีเฟรมวิดีโอหลายเฟรม CAF จะอนุญาตให้ผู้ใช้กรอในส่วนเหล่านี้ เว้นแต่จะระบุไว้เป็นอย่างอื่น Web Receiver ระบุได้โดยการเรียกใช้ API 2 รายการที่พร้อมใช้งาน
ในตัวสกัดกั้นการโหลด ให้นำคำสั่งสื่อที่รองรับ SEEK ออก การดำเนินการนี้จะปิดใช้การกรอในอินเทอร์เฟซการส่งและอินเทอร์เฟซแบบสัมผัสทั้งหมดบนอุปกรณ์เคลื่อนที่ เพิ่มโค้ดต่อไปนี้หลังคําจํากัดความสําหรับตัวแปรอินสแตนซ์ SDK ใน receiver.js
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
หากต้องการปิดใช้คำสั่งข้ามด้วยเสียงที่ขับเคลื่อนโดย Assistant เช่น Ok Google ข้ามกลับไป 60 วินาที คุณควรใช้ตัวสกัดกั้นการข้าม ระบบจะเรียกใช้ตัวสกัดกั้นนี้ทุกครั้งที่มีการส่งคำขอค้นหา หากปิดใช้คำสั่งสื่อที่ SEEK รองรับ ตัวสกัดกั้นจะปฏิเสธคำขอ SEEK เพิ่มข้อมูลโค้ดต่อไปนี้ลงในไฟล์ receiver.js
/**
* A seek interceptor is called whenever CAF receives a request to seek to
* a different location in media. This interceptor can be used to modify that
* seek request or disable seeking completely.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
// if the SEEK supported media command is disabled, block seeking
if (!(playerManager.getSupportedMediaCommands() &
cast.framework.messages.Command.SEEK)) {
castDebugLogger.info(TAG, 'Seek blocked.');
return null;
}
return seekRequestData;
});
บันทึกไฟล์ receiver.js แล้วเริ่มเซสชัน Cast คุณไม่ควรเลื่อนดูไลฟ์สดได้อีกต่อไป
8. ขอแสดงความยินดี
ตอนนี้คุณทราบวิธีสร้างแอปพลิเคชันตัวรับสัญญาณที่กำหนดเองโดยใช้ Cast Receiver SDK เวอร์ชันล่าสุดแล้ว
ดูรายละเอียดเพิ่มเติมได้ในคู่มือสำหรับนักพัฒนาซอฟต์แวร์การไลฟ์สด