1. ภาพรวม
Codelab นี้จะสอนวิธีสร้างแอป Web Receiver แบบกำหนดเองที่ใช้ Cast Live Breaks API
Google Cast คืออะไร
Google Cast ช่วยให้ผู้ใช้แคสต์เนื้อหาจากอุปกรณ์เคลื่อนที่ไปยังทีวีได้ ผู้ใช้จะใช้อุปกรณ์เคลื่อนที่เป็นรีโมตคอนโทรลในการเล่นสื่อบนทีวีได้
Google Cast SDK ช่วยให้คุณขยายแอปเพื่อควบคุมทีวีหรือระบบเสียงได้ Cast SDK ช่วยให้คุณสามารถเพิ่มคอมโพเนนต์ UI ที่จำเป็นตามรายการตรวจสอบการออกแบบของ Google Cast ได้
รายการตรวจสอบสำหรับการออกแบบของ Google Cast มีไว้เพื่อมอบประสบการณ์ของผู้ใช้ Cast ที่เรียบง่ายและคาดเดาได้ในทุกแพลตฟอร์มที่รองรับ
เราจะสร้างอะไร
เมื่อสร้าง Codelab นี้เสร็จแล้ว คุณจะสร้างตัวรับการแคสต์ที่ใช้ประโยชน์จาก Live API ได้
สิ่งที่คุณจะได้เรียนรู้
- วิธีจัดการเนื้อหาวิดีโอสดในแคสต์
- วิธีกำหนดค่าสถานการณ์สตรีมมิงแบบสดแบบต่างๆ ที่ Cast รองรับ
- วิธีเพิ่มข้อมูลโปรแกรมในสตรีมแบบสด
สิ่งที่คุณต้องมี
- เบราว์เซอร์ Google Chrome เวอร์ชันล่าสุด
- บริการโฮสติ้ง HTTPS เช่น โฮสติ้งของ Firebase หรือ ngrok
- อุปกรณ์ Google Cast เช่น Chromecast หรือ Android TV ที่กำหนดค่าการเข้าถึงอินเทอร์เน็ต
- ทีวีหรือจอแสดงผลที่มีช่อง HDMI หรือ Google Home Hub
ประสบการณ์การใช้งาน
- คุณจะต้องมีความรู้ด้านการพัฒนาเว็บมาก่อน
- ประสบการณ์ในการสร้างตัวส่งการแคสต์และ แอปพลิเคชันตัวรับสัญญาณ
คุณจะใช้บทแนะนำนี้อย่างไร
คุณจะให้คะแนนประสบการณ์การสร้างเว็บแอปอย่างไร
2. รับโค้ดตัวอย่าง
คุณดาวน์โหลดโค้ดตัวอย่างทั้งหมดลงในคอมพิวเตอร์ได้...
แล้วแตกไฟล์ ZIP ที่ดาวน์โหลดมา
3. การทำให้เครื่องรับใช้งานได้ภายใน
อุปกรณ์แคสต์จะต้องโฮสต์ไว้ในที่ที่อุปกรณ์แคสต์สามารถเข้าถึงได้ จึงจะใช้เว็บรับสัญญาณกับอุปกรณ์แคสต์ได้ หากคุณมีเซิร์ฟเวอร์ที่รองรับ https อยู่แล้ว ให้ข้ามวิธีการต่อไปนี้และจดบันทึก URL ไว้ เนื่องจากคุณจะต้องใช้ในส่วนถัดไป
หากยังไม่มีเซิร์ฟเวอร์ ให้ใช้โฮสติ้งของ Firebase หรือ ngrok
เรียกใช้เซิร์ฟเวอร์
เมื่อตั้งค่าบริการที่ต้องการแล้ว ให้ไปที่ app-start แล้วเริ่มต้นเซิร์ฟเวอร์
จด URL ของผู้รับที่โฮสต์ไว้ คุณจะได้ใช้ในส่วนถัดไป
4. ลงทะเบียนแอปพลิเคชันใน Cast Developer Console
คุณต้องลงทะเบียนแอปพลิเคชันเพื่อให้เรียกใช้ตัวรับสัญญาณที่กำหนดเองในอุปกรณ์ Chromecast ได้เนื่องจากมี Codelab นี้เป็นในตัว หลังจากที่คุณลงทะเบียนแอปพลิเคชันแล้ว คุณจะได้รับรหัสแอปพลิเคชันที่แอปพลิเคชันผู้ส่งของคุณต้องใช้เพื่อทำการเรียก API เช่น เปิดใช้งานแอปพลิเคชันตัวรับ
คลิก "เพิ่มแอปพลิเคชันใหม่"
เลือก "ตัวรับแบบกำหนดเอง" นี่คือสิ่งที่เรากำลังสร้าง
ป้อนรายละเอียดของผู้รับใหม่ อย่าลืมใช้ URL ที่คุณได้
ในส่วนสุดท้าย จดบันทึกรหัสแอปพลิเคชันที่กำหนดให้กับผู้รับรายใหม่
นอกจากนี้ คุณต้องลงทะเบียนอุปกรณ์ Google Cast เพื่อให้อุปกรณ์สามารถเข้าถึงแอปพลิเคชันของเครื่องรับก่อนที่จะเผยแพร่ เมื่อคุณเผยแพร่แอปพลิเคชันตัวรับสัญญาณแล้ว แอปพลิเคชันนั้นจะพร้อมใช้งานบนอุปกรณ์ Google Cast ทุกเครื่อง สำหรับ Codelab นี้ขอแนะนำให้ทำงานกับแอปพลิเคชันตัวรับที่ยังไม่ได้เผยแพร่
คลิก "เพิ่มอุปกรณ์ใหม่"
ป้อนหมายเลขซีเรียลที่พิมพ์อยู่ด้านหลังอุปกรณ์ Cast แล้วตั้งชื่อที่สื่อความหมาย คุณยังสามารถค้นหาหมายเลขซีเรียลได้โดยการแคสต์หน้าจอใน Chrome เมื่อเข้าถึงแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK
ระบบจะใช้เวลา 5-15 นาทีเพื่อเตรียมเครื่องรับและอุปกรณ์ให้พร้อมสำหรับการทดสอบ หลังจากรอ 5-15 นาที คุณต้องรีบูตอุปกรณ์แคสต์
5. การแคสต์สตรีมแบบสดง่ายๆ
ก่อนที่จะเริ่ม Codelab นี้ คุณควรอ่าน คู่มือนักพัฒนาซอฟต์แวร์เวอร์ชันที่ใช้จริง ซึ่งให้ภาพรวมของ API ที่เผยแพร่อยู่
สำหรับผู้ส่ง เราจะใช้ Cactool ในการเริ่มเซสชันการแคสต์ อุปกรณ์รับออกแบบมาเพื่อเริ่มเล่นสตรีมแบบสดโดยอัตโนมัติ
ตัวรับประกอบด้วยไฟล์ 3 ไฟล์ ไฟล์ HTML พื้นฐานชื่อ receiver.html ซึ่งมีโครงสร้างแอปหลัก คุณไม่จำเป็นต้องแก้ไขไฟล์นี้ นอกจากนี้ ยังมีไฟล์ชื่อ receiver.js ซึ่งมีตรรกะทั้งหมดสำหรับตัวรับ สุดท้ายยังมี metadata_service.js ซึ่งจะนำมาใช้ใน Codelab ในภายหลังเพื่อจำลองการรับข้อมูลคู่มือรายการทีวี
ในการเริ่มต้น ให้เปิด Cactool ใน Chrome ป้อนรหัสแอปพลิเคชันของผู้รับที่คุณได้รับใน Cast SDK Developer Console แล้วคลิกตั้งค่า
เฟรมเวิร์กแอปพลิเคชันการแคสต์เว็บตัวรับสัญญาณ (CAF) ต้องได้รับคำแนะนำว่าเนื้อหาที่จะเล่นเป็นสตรีมแบบสด โดยแก้ไขแอปพลิเคชันด้วยบรรทัดของโค้ดต่อไปนี้ เพิ่มลงในตัวหลักของตัวตัดโหลดใน receiver.js:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
การตั้งค่าประเภทสตรีมเป็น LIVE จะเปิดใช้ UI แบบเรียลไทม์ของ CAF 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 นี้ เราจะใช้บริการข้อมูลเมตาตัวอย่างเพื่อระบุข้อมูลเมตาสำหรับสตรีมแบบสด หากต้องการสร้างรายการข้อมูลเมตาของโปรแกรม ให้สร้างcontainer ContainerMetadata มีรายการออบเจ็กต์ MediaMetadata สำหรับสตรีมสื่อ 1 รายการ ออบเจ็กต์ 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 และเริ่มเซสชันการแคสต์ คุณควรเห็นเวลาเริ่มต้น เวลาสิ้นสุด และชื่อของโปรแกรมปรากฏบนหน้าจอทั้งหมด
ระบบจะส่งข้อความสถานะสื่อใหม่จากผู้รับไปยังผู้ส่งทุกคนเมื่อส่วนหัวของตัวควบคุมการเล่นเปลี่ยนเป็นส่วนใหม่ในคอนเทนเนอร์ เพื่อให้แอปพลิเคชันของผู้ส่งอัปเดต UI ของตนได้ ขอแนะนำให้แอปพลิเคชันตัวรับอัปเดตข้อมูลเมตาของคอนเทนเนอร์ในตัวสกัดกั้นสถานะสื่อเพื่อป้อนข้อมูลโปรแกรมไปยังแอปพลิเคชันของผู้ส่งต่อไป ในบริการตัวอย่างของเรา เราส่งคืนข้อมูลเมตาของโปรแกรมปัจจุบัน ตลอดจนข้อมูลเมตาสำหรับ 2 โปรแกรมถัดไป หากต้องการอัปเดตข้อมูลเมตาสำหรับสตรีม ให้สร้างคอนเทนเนอร์ใหม่และเรียกใช้ setContainerMetadata ตามตัวอย่างก่อนหน้านี้
7. ปิดใช้การกรอวิดีโอ
สตรีมวิดีโอส่วนใหญ่ประกอบด้วยส่วนต่างๆ ที่มีช่วงเฟรมวิดีโอ CAF จะอนุญาตให้ผู้ใช้ค้นหาภายในกลุ่มเหล่านี้ เว้นแต่จะระบุไว้เป็นอย่างอื่น ซึ่งตัวรับเว็บสามารถระบุสิ่งนี้ได้ด้วยการเรียกใช้ API ที่มีอยู่แล้ว
ในตัวตัดโหลด ให้นำคำสั่งสื่อที่รองรับ "ค้นหา" ออก การดำเนินการนี้จะปิดใช้การกรอวิดีโอในส่วนติดต่อสำหรับผู้ส่งและอินเทอร์เฟซระบบสัมผัสทั้งหมด เพิ่มโค้ดต่อไปนี้หลังคำจำกัดความของตัวแปรอินสแตนซ์ SDK ใน receiver.js
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
หากต้องการปิดใช้คำสั่งค้นหาด้วยเสียงที่ขับเคลื่อนโดย Assistant เช่น Ok Google ข้ามกลับไป 60 วินาที ควรใช้เครื่องมือดักจับการค้นหา ระบบจะเรียกใช้ตัวดักจับสัญญาณนี้ทุกครั้งที่มีการส่งคำขอ หากปิดใช้คำสั่งสื่อที่รองรับ "ค้นหา" เครื่องมือดักจับจะปฏิเสธคำขอค้นหา เพิ่มข้อมูลโค้ดต่อไปนี้ลงในไฟล์ 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 และเริ่มเซสชันการแคสต์ คุณไม่สามารถค้นหาภายในสตรีมแบบสดได้อีกต่อไป
8. ขอแสดงความยินดี
ตอนนี้คุณทราบวิธีสร้างแอปพลิเคชันตัวรับสัญญาณที่กำหนดเองโดยใช้ Cast Receiver SDK เวอร์ชันล่าสุดแล้ว
สำหรับรายละเอียดเพิ่มเติม โปรดดูคู่มือสำหรับนักพัฒนาซอฟต์แวร์สตรีมมิงแบบสด