1. ภาพรวม
Codelab นี้จะสอนวิธีสร้างแอป Custom Web Receiver ที่ใช้ API ของ Cast Live Breaks
Google Cast คืออะไร
Google Cast ช่วยให้ผู้ใช้แคสต์เนื้อหาจากอุปกรณ์เคลื่อนที่ไปยังทีวีได้ จากนั้นผู้ใช้จะใช้อุปกรณ์เคลื่อนที่เป็นรีโมตคอนโทรลในการเล่นสื่อบนทีวีได้
Google Cast SDK ช่วยให้คุณขยายแอปเพื่อควบคุมทีวีหรือระบบเสียงได้ Cast SDK ช่วยให้คุณเพิ่มคอมโพเนนต์ UI ที่จำเป็นได้ตามรายการตรวจสอบการออกแบบ Google Cast
รายการตรวจสอบการออกแบบของ Google Cast มีไว้เพื่อมอบประสบการณ์ของผู้ใช้ Cast ที่เรียบง่ายและคาดการณ์ได้ในทุกแพลตฟอร์มที่รองรับ
เรากำลังจะสร้างอะไร
เมื่อทำ Codelab นี้เสร็จแล้ว คุณจะสร้างเครื่องรับการแคสต์ที่ใช้ประโยชน์จาก API แบบสด
สิ่งที่คุณจะได้เรียนรู้
- วิธีจัดการเนื้อหาวิดีโอสดใน Cast
- วิธีกำหนดค่าสถานการณ์สตรีมมิงแบบสดต่างๆ ที่ 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
คุณต้องลงทะเบียนแอปพลิเคชันเพื่อให้สามารถใช้เครื่องรับที่กำหนดเองภายใน Codelab นี้ในอุปกรณ์ Chromecast หลังจากที่ได้ลงทะเบียนแอปพลิเคชันแล้ว คุณจะได้รับรหัสแอปพลิเคชันที่แอปพลิเคชันของผู้ส่งต้องใช้เพื่อเรียกใช้ 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 ป้อนรหัสแอปพลิเคชันของผู้รับที่คุณได้รับใน Developer Console ของ Cast SDK แล้วคลิกตั้งค่า
เฟรมเวิร์กแอปพลิเคชันการแคสต์เว็บรีซีฟเวอร์ (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 และเริ่มเซสชันการแคสต์ คุณจะเห็นเวลาเริ่มต้น เวลาสิ้นสุด และชื่อของโปรแกรมแสดงบนหน้าจอ
ข้อความสถานะสื่อใหม่จะส่งข้อความจากผู้รับไปยังผู้ส่งทุกคนเมื่อส่วนหัวของตัวควบคุมการเล่นเปลี่ยนไปใช้ส่วนใหม่ในคอนเทนเนอร์ เพื่อให้แอปพลิเคชันของผู้ส่งอัปเดต UI ของตนเองได้ ขอแนะนำให้แอปพลิเคชันฝั่งผู้รับอัปเดตข้อมูลเมตาของคอนเทนเนอร์ในตัวตรวจจับสถานะสื่อเพื่อป้อนข้อมูลโปรแกรมไปยังแอปพลิเคชันของผู้ส่งต่อไป ในบริการตัวอย่างของเรา เราจะแสดงข้อมูลเมตาปัจจุบันของโปรแกรม และข้อมูลเมตาสำหรับอีก 2 โปรแกรมถัดไป หากต้องการอัปเดตข้อมูลเมตาสำหรับสตรีม ให้สร้างคอนเทนเนอร์ใหม่และเรียก setContainerMetadata ตามที่แสดงในตัวอย่างก่อนหน้านี้
7. กําลังปิดใช้การกรอ
สตรีมวิดีโอส่วนใหญ่ประกอบด้วยส่วนต่างๆ ที่รองรับเฟรมวิดีโอจำนวนมาก CAF จะอนุญาตให้ผู้ใช้ค้นหาภายในกลุ่มเหล่านี้ เว้นแต่จะระบุไว้เป็นอย่างอื่น ซึ่ง Web Receiver สามารถระบุได้โดยเรียกใช้ API สองรายการที่มีให้ใช้งาน
ในตัวตรวจจับการโหลด ให้นำคำสั่ง "SEEK สื่อที่รองรับ" ออก ซึ่งจะปิดใช้การกรอวิดีโอของผู้ส่งบนอุปกรณ์เคลื่อนที่และอินเทอร์เฟซแบบสัมผัสทั้งหมด เพิ่มโค้ดต่อไปนี้หลังคําจํากัดความของตัวแปรอินสแตนซ์ SDK ใน receiver.js
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
หากต้องการปิดใช้คําสั่งการกรอเสียงที่ขับเคลื่อนโดย Assistant เช่น Ok Google ย้อนกลับไป 60 วินาที คุณควรใช้ตัวตรวจจับการค้นหา ระบบจะเรียกตัวตรวจจับนี้ทุกครั้งที่มีการส่งคำขอค้นหา หากปิดใช้คำสั่งสื่อที่รองรับ "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 และเริ่มเซสชันการแคสต์ คุณจึงไม่ควรค้นหาภายในสตรีมแบบสดได้อีกต่อไป
8. ขอแสดงความยินดี
ตอนนี้คุณทราบวิธีสร้างแอปพลิเคชันตัวรับสัญญาณที่กำหนดเองโดยใช้ SDK ตัวรับการแคสต์เวอร์ชันล่าสุดแล้ว
โปรดดูรายละเอียดเพิ่มเติมในคู่มือสตรีมมิงแบบสดสำหรับนักพัฒนาซอฟต์แวร์