1. ภาพรวม
Codelab นี้จะสอนวิธีสร้างแอปตัวรับสัญญาณที่กําหนดเองบนเว็บซึ่งใช้ Cast Live Breaks API
Google Cast คืออะไร
Google Cast ช่วยให้ผู้ใช้แคสต์เนื้อหาจากอุปกรณ์เคลื่อนที่ไปยัง TV ได้ จากนั้นผู้ใช้จะใช้อุปกรณ์เคลื่อนที่เป็นรีโมตคอนโทรลในการเล่นสื่อบนทีวีได้
Google Cast SDK ช่วยให้คุณขยายแอปเพื่อควบคุมทีวีหรือระบบเสียงได้ Cast SDK ช่วยให้คุณเพิ่มคอมโพเนนต์ UI ที่จําเป็นได้ตามรายการตรวจสอบการออกแบบ Google Cast
รายการตรวจสอบการออกแบบ Google Cast มีไว้ให้ผู้ใช้ของ Cast ใช้งานได้ง่ายและคาดการณ์ได้ในทุกแพลตฟอร์มที่รองรับ
สิ่งที่เรากําลังจะสร้าง
หลังจากที่คุณสร้างโค้ดแล็บนี้เสร็จแล้ว คุณจะสร้างตัวรับการแคสต์ที่ใช้ประโยชน์จากฟังก์ชันสดใหม่ๆ ได้
สิ่งที่คุณจะได้เรียนรู้
- วิธีจัดการเนื้อหาวิดีโอสดใน Cast
- วิธีกําหนดค่าสถานการณ์สตรีมมิงแบบสดแบบต่างๆ ที่ Cast รองรับ
- วิธีเพิ่มข้อมูลโปรแกรมลงในสตรีมแบบสด
สิ่งที่ต้องมี
- เบราว์เซอร์ Google Chrome เวอร์ชันล่าสุด
- บริการโฮสติ้ง HTTPS เช่น โฮสติ้งของ Firebase หรือ ngrok
- อุปกรณ์ Google Cast เช่น Chromecast หรือ Android TV ที่กําหนดค่าด้วยการเข้าถึงอินเทอร์เน็ต
- ทีวีหรือจอภาพที่มีอินพุต HDMI หรือ Google Home Hub
ประสบการณ์การใช้งาน
- คุณจะต้องมีความรู้เกี่ยวกับการพัฒนาเว็บมาก่อน
- ประสบการณ์ที่ผ่านมาในการสร้างแอปพลิเคชันผู้ส่งและผู้รับการแคสต์
คุณจะใช้บทแนะนํานี้อย่างไร
คุณจะให้คะแนนประสบการณ์ในการสร้างเว็บแอปอย่างไร
2. รับโค้ดตัวอย่าง
คุณสามารถดาวน์โหลดตัวอย่างโค้ดทั้งหมดลงในคอมพิวเตอร์ของคุณได้...
และคลายไฟล์ ZIP ที่ดาวน์โหลด
3. การทําให้ผู้รับใช้งานได้ภายในเครื่อง
หากต้องการใช้อุปกรณ์รับสัญญาณบนเว็บกับอุปกรณ์ Cast คุณต้องโฮสต์อุปกรณ์ดังกล่าวไว้ในตําแหน่งที่อุปกรณ์ Cast เข้าถึงได้ ถ้ามีเซิร์ฟเวอร์ที่รองรับ https อยู่แล้ว ให้ข้ามวิธีการต่อไปนี้และจดบันทึก URL ไว้ เนื่องจากต้องใช้ในหัวข้อถัดไป
หากไม่มีเซิร์ฟเวอร์พร้อมให้ใช้งาน คุณก็ใช้ Firebase Hosting หรือ ngrok ได้
เรียกใช้เซิร์ฟเวอร์
เมื่อคุณตั้งค่าบริการที่คุณเลือกแล้ว ให้ไปที่ app-start และเริ่มเซิร์ฟเวอร์ของคุณ
โปรดจด URL สําหรับผู้รับที่โฮสต์ของคุณ ซึ่งจะนําไปใช้ในส่วนถัดไป
4. ลงทะเบียนแอปพลิเคชันในคอนโซลนักพัฒนาซอฟต์แวร์ Cast
คุณต้องลงทะเบียนแอปพลิเคชันของคุณเพื่อให้สามารถเรียกใช้ตัวรับสัญญาณที่กําหนดเอง ดังเช่นใน Codelab นี้บนอุปกรณ์ Chromecast หลังจากที่คุณลงทะเบียนแอปพลิเคชัน คุณจะได้รับรหัสแอปพลิเคชันที่แอปพลิเคชันผู้ส่งของคุณต้องใช้ในการเรียก API เช่น ในการเรียกใช้แอปพลิเคชันตัวรับ
คลิก "เพิ่มแอปพลิเคชันใหม่"
เลือก "ตัวรับสัญญาณที่กําหนดเอง" ซึ่งเป็นสิ่งที่เรากําลังสร้าง
ป้อนรายละเอียดของผู้รับใหม่ อย่าลืมใช้ URL ที่คุณลงท้ายด้วย
ในส่วนสุดท้าย จดรหัสแอปพลิเคชันที่กําหนดให้กับผู้รับรายใหม่
นอกจากนี้ คุณต้องลงทะเบียนอุปกรณ์ Google Cast เพื่อให้เข้าถึงอุปกรณ์ของผู้รับก่อนเผยแพร่ เมื่อคุณเผยแพร่แอปพลิเคชันตัวรับสัญญาณแล้ว แอปพลิเคชันนั้นจะใช้งานได้กับอุปกรณ์ Google Cast ทั้งหมด สําหรับวัตถุประสงค์ของ Codelab นี้ ขอแนะนําให้คุณทํางานกับแอปพลิเคชันรีซีฟเวอร์ที่ไม่ได้เผยแพร่
คลิก "เพิ่มอุปกรณ์ใหม่"
ป้อนหมายเลขซีเรียลที่พิมพ์ไว้ด้านหลังอุปกรณ์ Cast และตั้งชื่อที่สื่อความหมาย นอกจากนี้ คุณยังค้นหาหมายเลขซีเรียลได้โดยแคสต์หน้าจอใน Chrome เมื่อเข้าถึง Google Cast SDK Developer Console
ผู้รับและอุปกรณ์อาจใช้เวลา 5-15 นาทีเพื่อเตรียมพร้อมสําหรับการทดสอบ หลังจากรอ 5-15 นาที คุณต้องรีบูตอุปกรณ์ Cast
5. การส่งสตรีมแบบสดอย่างง่าย
ก่อนเริ่มต้น Codelab การอ่าน คู่มือนักพัฒนาซอฟต์แวร์แบบสดซึ่งให้ภาพรวมของฟังก์ชันการทํางานแบบสดแบบใหม่อาจเป็นประโยชน์
สําหรับผู้ส่ง เราจะใช้การแก้ไขข้อบกพร่องของเครื่องรับ CAF เช่นกันเพื่อเริ่มเซสชันการแคสต์ รีซีฟเวอร์ออกแบบมาเพื่อเริ่มเล่นสตรีมแบบสดโดยอัตโนมัติ
รีซีฟเวอร์ประกอบด้วยไฟล์สองไฟล์ ไฟล์ HTML พื้นฐานชื่อ receiver.html ที่เริ่มต้นบริบทการแคสต์ และตัวยึดตําแหน่งสําหรับโปรแกรมเล่นสื่อของ Cast คุณไม่จําเป็นต้องแก้ไขไฟล์นี้ นอกจากนี้ยังมีไฟล์ชื่อ receiver.js ซึ่งจะประกอบด้วยตรรกะทั้งหมดของเราของผู้รับ
ในการเริ่มต้น ให้เปิดผู้ส่งเว็บใน Chrome ป้อนรหัสแอปพลิเคชันของผู้รับที่คุณได้รับในแผงควบคุมสําหรับนักพัฒนาซอฟต์แวร์ Cast SDK แล้วคลิก "ตั้งค่า"
ในรีซีฟเวอร์ เราจําเป็นต้องเพิ่มตรรกะบางอย่างเพื่อบอกเฟรมเวิร์กของแอปพลิเคชัน Cast (CAF) ว่าสตรีมถ่ายทอดสดอยู่ ซึ่งเพียงแค่ใส่โค้ดบรรทัดเดียวก็ใช้ได้แล้ว เพิ่มบรรทัดของโค้ดต่อไปนี้ลงในอินเตอร์เซปเตอร์การโหลดใน receiver.js
request.media.streamType = cast.framework.messages.StreamType.LIVE;
การตั้งค่าประเภทสตรีมเป็น LIVE จะเปิดใช้ UI แบบสดของ CAF ในสถานการณ์นี้ หมายความว่าเมื่อเข้าร่วมสตรีมแล้ว CAF จะข้ามไปที่สตรีมแบบสดของสตรีมโดยอัตโนมัติ เรายังไม่ได้ตั้งค่าข้อมูลแนะแนวทางในโปรแกรม ดังนั้นแถบกรอจะแสดงถึงความยาวทั้งหมดของสตรีมที่ต้องการ
บันทึกการเปลี่ยนแปลงของคุณไปยัง receiver.js และเริ่มต้นเซสชันการแคสต์บนผู้ส่งเว็บด้วยการคลิกขวาที่ใดก็ได้บนหน้าเว็บแล้วเลือก "แคสต์" สตรีมแบบสดควรเริ่มเล่นทันที
6. การเพิ่มข้อมูลคู่มือโปรแกรม
การสนับสนุนใหม่ของ CAF สําหรับเนื้อหาสดในขณะนี้รวมถึงการสนับสนุนสําหรับการแสดงข้อมูลคู่มือโปรแกรมบนหน้าจอตัวรับสัญญาณและแอปพลิเคชัน เราขอแนะนําอย่างยิ่งให้ผู้ให้บริการเนื้อหาใส่ข้อมูลเมตาการจัดโปรแกรมลงในแอปพลิเคชันรีซีฟเวอร์ของพวกเขา เพื่อประสบการณ์การใช้งานที่ดีขึ้นสําหรับผู้ใช้ โดยเฉพาะสําหรับสตรีมแบบสดระยะยาวอย่างช่องทีวี
ขณะนี้คุณสามารถระบุข้อมูลเมตาสําหรับหลายๆ โปรแกรม CAF ในสตรีมเดียวได้ การตั้งค่าการประทับเวลาเริ่มต้นและระยะเวลาในออบเจ็กต์ MediaMetadata ทําให้ผู้รับอัปเดตข้อมูลเมตาที่แสดงในผู้ส่งและผู้รับโดยอัตโนมัติ โดยอิงตามตําแหน่งปัจจุบันของผู้เล่นในสตรีม
// 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 นี้ เราจะใช้บริการข้อมูลเมตาตัวอย่างเพื่อระบุข้อมูลเมตาสําหรับสตรีมแบบสดของเรา หากต้องการสร้างรายการข้อมูลเมตาของโปรแกรม ก่อนอื่นเราต้องสร้างคอนเทนเนอร์ คอนเทนเนอร์มีรายการออบเจ็กต์ MediaMetadata สําหรับสตรีมสื่อเดียว ออบเจ็กต์ MediaMetadata แต่ละรายการจะแสดงเพียงส่วนเดียวในคอนเทนเนอร์ เมื่อส่วนหัวของตัวควบคุมการเล่นอยู่ภายในขอบเขตของส่วนหนึ่งๆ ระบบจะคัดลอกข้อมูลเมตาไปยังสถานะของสื่อโดยอัตโนมัติ เพิ่มโค้ดต่อไปนี้ลงในไฟล์ receiver.js เพื่อดาวน์โหลดข้อมูลเมตาตัวอย่างจากบริการของเราและระบุคอนเทนเนอร์ให้กับ CAF
/**
* Gets the current program guide data from our Google Cloud Function
* @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
*/
function loadGuideData() {
return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
.then((response) => response.json())
.then(function(data) {
const containerMetadata =
new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
});
}
และเพิ่มการเรียกไปยังฟังก์ชันการโหลดข้อมูลไกด์ในอินเตอร์เซ็ปโหลด ดังนี้
loadGuideData();
บันทึกไฟล์ receiver.js และเริ่มเซสชันการแคสต์ คุณจะเห็นเวลาเริ่มต้น เวลาสิ้นสุด และชื่อรายการที่แสดงบนหน้าจอทั้งหมด
ระบบจะส่งข้อความสถานะสื่อใหม่จากผู้รับไปยังผู้ส่งทุกคนเมื่อส่วนหัวของตัวควบคุมการเล่นเปลี่ยนไปเป็นส่วนใหม่ในคอนเทนเนอร์ ดังนั้นคุณอาจจําเป็นต้องอัปเดตข้อมูลเมตาของคอนเทนเนอร์ในการสกัดกั้นสถานะสื่อ เพื่อให้คุณมีข้อมูลโปรแกรมที่เป็นปัจจุบันอยู่เสมอ ในบริการตัวอย่างของเรา เราจะคืนข้อมูลเมตาของโปรแกรมปัจจุบันและข้อมูลเมตาของสองโปรแกรมถัดไป หากต้องการอัปเดตข้อมูลเมตาสําหรับสตรีม ให้สร้างคอนเทนเนอร์ใหม่และเรียกใช้ setContainerMetadata ตามตัวอย่างข้างต้น
7. กําลังปิดใช้งานการค้นหา
สตรีมวิดีโอส่วนใหญ่ประกอบด้วยส่วนที่มีเฟรมวิดีโอหลากหลาย CAF จะอนุญาตให้ผู้ใช้ค้นหาภายในกลุ่มดังกล่าวได้ เว้นแต่จะระบุไว้เป็นอย่างอื่น ในการปิดใช้การกรอวิดีโอ เราต้องเพิ่มข้อมูลโค้ด 2 ตัวไปยังผู้รับของเรา
ในคําสั่งลัดการโหลด ให้นําคําสั่งสื่อที่รองรับ SEEK ออก การดําเนินการนี้จะปิดใช้การค้นหาบนอินเทอร์เฟซผู้ส่งและหน้าจอสัมผัสทั้งหมดในอุปกรณ์เคลื่อนที่
playerManager.removeSupportedMediaCommands(cast.framework.messages.Command.SEEK, true);
จากนั้น เราจะต้องปิดใช้คําสั่งเสียงจากการให้ผู้ชมข้ามไปรอบๆ สตรีม เช่น "Ok Google ข้ามกลับไป 60 วินาที" หากต้องการปิดการค้นหาด้วยเสียง เราจะสกัดกั้นการค้นหา ระบบจะเรียกใช้อินเตอร์เซ็ปเตอร์นี้ทุกครั้งที่มีการเรียก หากคําสั่งสื่อที่รองรับ SEEK ปิดอยู่ เครื่องมือสกัดกั้นจะปฏิเสธคําขอค้นหา เพิ่มข้อมูลโค้ดต่อไปนี้ในไฟล์ receiver.js
/**
* Seek 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.
* @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK,
(seekData) => {
// 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 seekData;
}
);
บันทึกไฟล์ receiver.js และเริ่มเซสชันการแคสต์ คุณจึงจะไม่สามารถค้นหาภายในสตรีมแบบสดได้อีกต่อไป
8. ขอแสดงความยินดี
ตอนนี้คุณทราบวิธีสร้างแอปพลิเคชันตัวรับสัญญาณที่กําหนดเองโดยใช้ Cast Receiver SDK ล่าสุดแล้ว
โปรดดูรายละเอียดเพิ่มเติมในคู่มือนักพัฒนาซอฟต์แวร์สตรีมมิงแบบสด