1. ภาพรวม
Codelab นี้จะสอนวิธีเพิ่มตัวบันทึกการแก้ไขข้อบกพร่องของแคสต์ลงในแอป Custom Web Receiver ที่มีอยู่
Google Cast คืออะไร
Google Cast SDK ช่วยให้แอปของคุณเล่นเนื้อหาและควบคุมการเล่นบนอุปกรณ์ที่พร้อมใช้งาน Google Cast ได้ และมีคอมโพเนนต์ UI ที่จำเป็นตามรายการตรวจสอบการออกแบบ Google Cast
รายการตรวจสอบการออกแบบของ Google Cast มีไว้เพื่อมอบประสบการณ์ของผู้ใช้ Cast ที่เรียบง่ายและคาดการณ์ได้ในทุกแพลตฟอร์มที่รองรับ
เรากำลังจะสร้างอะไร
เมื่อทำ Codelab นี้เสร็จแล้ว คุณจะมีเว็บรีซีฟเวอร์ที่กำหนดเองผสานรวมกับตัวบันทึกการแก้ไขข้อบกพร่องของแคสต์
โปรดดูรายละเอียดและข้อมูลเพิ่มเติมในคู่มือตัวบันทึกการแก้ไขข้อบกพร่องของ Cast
สิ่งที่คุณจะได้เรียนรู้
- วิธีตั้งค่าสภาพแวดล้อมสำหรับการพัฒนาเว็บรีซีฟเวอร์
- วิธีผสานรวมตัวบันทึกการแก้ไขข้อบกพร่องเข้ากับเครื่องรับการแคสต์
สิ่งที่ต้องมี
- เบราว์เซอร์ Google Chrome เวอร์ชันล่าสุด
- บริการโฮสติ้ง HTTPS เช่น โฮสติ้งของ Firebase หรือ ngrok
- อุปกรณ์ Google Cast เช่น Chromecast หรือ Android TV ที่กำหนดค่าด้วยการเข้าถึงอินเทอร์เน็ต
- ทีวีหรือจอภาพที่มีอินพุต HDMI
ประสบการณ์การใช้งาน
- คุณควรมีประสบการณ์การแคสต์แบบเดิมและเข้าใจวิธีการทำงานของโปรแกรมรับเว็บ Cast
- คุณจะต้องมีความรู้ด้านการพัฒนาเว็บมาก่อน
- คุณต้องมีความรู้เรื่องการดูทีวีมาก่อนด้วย :)
คุณจะใช้บทแนะนำนี้อย่างไร
คุณจะให้คะแนนประสบการณ์การสร้างเว็บแอปอย่างไร
คุณจะให้คะแนนประสบการณ์ในการดูทีวีอย่างไร
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. เรียกใช้แอปตัวอย่าง
ระหว่างที่เรารอให้ Web Receiver ใหม่พร้อมใช้งานสำหรับการทดสอบ มาดูกันว่าแอป Web Receiver ที่เสร็จสมบูรณ์นั้นมีลักษณะอย่างไร อุปกรณ์รับที่เราจะสร้างจะสามารถเล่นสื่อโดยใช้การสตรีมแบบปรับอัตราบิตได้
- เปิดเครื่องมือ Command and Control (CaC) ในเบราว์เซอร์
- ใช้รหัสผู้รับ
CC1AD845
เริ่มต้น แล้วคลิกปุ่มSET APP ID
- คลิกปุ่ม "แคสต์" ที่ด้านซ้ายบน แล้วเลือกอุปกรณ์ที่พร้อมใช้งาน Google Cast
- ไปที่แท็บ
LOAD MEDIA
ที่ด้านบน
- เปลี่ยนปุ่มตัวเลือกประเภทคำขอเป็น
LOAD
- คลิกปุ่ม
SEND REQUEST
เพื่อเล่นวิดีโอตัวอย่าง - วิดีโอจะเริ่มเล่นบนอุปกรณ์ที่พร้อมใช้งาน Google Cast เพื่อแสดงฟังก์ชันพื้นฐานของตัวรับสัญญาณเมื่อใช้ตัวรับสัญญาณเริ่มต้น
6. เตรียมการเริ่มโปรเจ็กต์
เราต้องเพิ่มการรองรับ Google Cast ให้กับแอปเริ่มต้นที่คุณดาวน์โหลดมา ต่อไปนี้คือคำศัพท์ของ Google Cast ที่เราจะใช้ใน Codelab
- แอปของผู้ส่งทำงานบนอุปกรณ์เคลื่อนที่หรือแล็ปท็อป
- แอปตัวรับจะทำงานในอุปกรณ์ Google Cast หรือ Android TV
ตอนนี้คุณพร้อมที่จะสร้างโครงการเริ่มต้นเพิ่มเติมโดยใช้โปรแกรมแก้ไขข้อความที่คุณชื่นชอบแล้ว:
- เลือกไดเรกทอรี
app-start
จากการดาวน์โหลดโค้ดตัวอย่าง - เปิด
js/receiver.js
และindex.html
โปรดทราบว่าขณะที่คุณใช้ Codelab นี้ http-server
ควรดำเนินการตามการเปลี่ยนแปลงที่คุณทำ หากไม่ ให้ลองหยุดและรีสตาร์ท http-server
การออกแบบแอป
แอปผู้รับจะเริ่มต้นเซสชันการแคสต์และจะสแตนด์บายจนกว่าคำขอ LOAD (เช่น คำสั่งให้เล่นสื่อ) จากผู้ส่งมาถึง
แอปประกอบด้วยมุมมองหลัก 1 มุมมอง ซึ่งกำหนดไว้ใน index.html
และไฟล์ JavaScript 1 ไฟล์ที่เรียกว่า js/receiver.js
ที่มีตรรกะทั้งหมดเพื่อทำให้ตัวรับทำงานของเราทำงานได้
index.html
ไฟล์ HTML นี้มี UI ทั้งหมดสำหรับแอปตัวรับสัญญาณ
receiver.js
สคริปต์นี้จัดการตรรกะทั้งหมดสำหรับแอปตัวรับสัญญาณ
คำถามที่พบบ่อย
7. ผสานรวมกับ CastDebugLogger API
SDK ของตัวรับสัญญาณแคสต์มีตัวเลือกอีกตัวหนึ่งที่ช่วยให้นักพัฒนาแอปแก้ไขข้อบกพร่องของแอปตัวรับสัญญาณได้อย่างง่ายดายโดยใช้ CastDebugLogger API
โปรดดูรายละเอียดและข้อมูลเพิ่มเติมในคู่มือตัวบันทึกการแก้ไขข้อบกพร่องของ Cast
การเริ่มต้น
ใส่สคริปต์ต่อไปนี้ในแท็ก <head>
ในแอปตัวรับสัญญาณหลังจากสคริปต์ SDK ของ Web Receiver ใน index.html
<head>
...
<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<!-- Cast Debug Logger -->
<script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>
ใน js/receiver.js
ที่ด้านบนของไฟล์และใต้ playerManager
ให้รับอินสแตนซ์ CastDebugLogger
และเปิดใช้ตัวบันทึกใน Listener เหตุการณ์ READY
ดังนี้
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
}
});
เมื่อเปิดใช้ตัวบันทึกการแก้ไขข้อบกพร่อง การวางซ้อนของ DEBUG MODE
จะปรากฏบนตัวรับ
เหตุการณ์ของเครื่องเล่นบันทึก
การใช้ CastDebugLogger
ช่วยให้คุณบันทึกเหตุการณ์ของโปรแกรมเล่นที่ SDK ของ Cast Web Receiver เริ่มทำงานได้โดยง่าย และใช้ตัวบันทึกระดับต่างๆ เพื่อบันทึกข้อมูลเหตุการณ์ การกำหนดค่า loggerLevelByEvents
จะใช้ cast.framework.events.EventType
และ cast.framework.events.category
เพื่อระบุเหตุการณ์ที่จะบันทึก
เพิ่มข้อมูลต่อไปนี้ใต้ Listener เหตุการณ์ READY
เพื่อบันทึกไว้เมื่อมีการทริกเกอร์เหตุการณ์ CORE
ของโปรแกรมเล่นหรือการเผยแพร่การเปลี่ยนแปลง mediaStatus
...
// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
};
ข้อความในบันทึกและแท็กที่กำหนดเอง
CastDebugLogger API ช่วยให้คุณสร้างข้อความบันทึกที่ปรากฏบนการวางซ้อนการแก้ไขข้อบกพร่องของเครื่องรับด้วยสีที่ต่างกัน ใช้วิธีการบันทึกต่อไปนี้ โดยเรียงลำดับจากลำดับความสำคัญสูงสุดไปต่ำสุด
castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);
สําหรับวิธีบันทึกแต่ละวิธี พารามิเตอร์แรกควรเป็นแท็กที่กําหนดเอง และพารามิเตอร์ที่ 2 คือข้อความบันทึก แท็กสามารถเป็นสตริงใดๆ ที่คุณคิดว่ามีประโยชน์
หากต้องการแสดงการทำงานของบันทึก ให้เพิ่มบันทึกไปยังตัวตรวจจับ LOAD
playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
loadRequestData => {
// Listed in order from highest to lowest priority.
castDebugLogger.error(LOG_TAG, 'Test error log');
castDebugLogger.warn(LOG_TAG, 'Test warn log');
castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);
castDebugLogger.debug(LOG_TAG, 'Test debug log');
return loadRequestData;
}
);
คุณควบคุมข้อความที่จะปรากฏในการวางซ้อนการแก้ไขข้อบกพร่องได้โดยตั้งค่าระดับการบันทึกใน loggerLevelByTags
สำหรับแท็กที่กำหนดเองแต่ละรายการ ตัวอย่างเช่น การเปิดใช้แท็กที่กําหนดเองซึ่งมีระดับการบันทึก cast.framework.LoggerLevel.DEBUG
จะแสดงข้อความทั้งหมดที่เพิ่มพร้อมข้อผิดพลาด คําเตือน ข้อมูล และข้อความบันทึกการแก้ไขข้อบกพร่อง อีกตัวอย่างหนึ่งคือการเปิดใช้แท็กที่กำหนดเองด้วยระดับ WARNING
จะแสดงเฉพาะข้อความแสดงข้อผิดพลาดและเตือนข้อความบันทึก
การกำหนดค่า loggerLevelByTags
เป็นตัวเลือกที่ไม่บังคับ หากไม่ได้กำหนดค่าแท็กที่กำหนดเองสำหรับระดับตัวบันทึก ข้อความบันทึกทั้งหมดจะแสดงบนการวางซ้อนการแก้ไขข้อบกพร่อง
เพิ่มข้อมูลต่อไปนี้ใต้การเรียก loggerLevelByEvents
...
// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};
...
8. การใช้การวางซ้อนการแก้ไขข้อบกพร่อง
ตัวบันทึกการแก้ไขข้อบกพร่องของแคสต์จะมีการวางซ้อนการแก้ไขข้อบกพร่องบนตัวรับเพื่อแสดงข้อความบันทึกที่กำหนดเอง ใช้ showDebugLogs
เพื่อเปิดหรือปิดการวางซ้อนการแก้ไขข้อบกพร่อง และใช้ clearDebugLogs
เพื่อล้างข้อความบันทึกในการวางซ้อน
เพิ่มข้อมูลต่อไปนี้ลงใน Listener เหตุการณ์ READY
เพื่อดูตัวอย่างการวางซ้อนการแก้ไขข้อบกพร่องบนตัวรับ:
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
// Show debug overlay.
castDebugLogger.showDebugLogs(true);
// Clear log messages on debug overlay.
castDebugLogger.clearDebugLogs();
}
});
9. การใช้เครื่องมือ Command and Control (CaC)
ภาพรวม
Command and Control (CaC) Tool จะบันทึกบันทึกและควบคุมการวางซ้อนการแก้ไขข้อบกพร่อง
การเชื่อมต่อตัวรับกับเครื่องมือ CaC มี 2 วิธีดังนี้
เริ่มการเชื่อมต่อการแคสต์ใหม่โดยทำดังนี้
- เปิดเครื่องมือ CaC แล้วตั้งรหัสแอปของผู้รับ แล้วคลิกปุ่ม "แคสต์" เพื่อแคสต์ไปยังเครื่องรับ
- แคสต์แอปของผู้ส่งแยกต่างหากไปยังอุปกรณ์เดียวกันโดยมีรหัสแอปของผู้รับเหมือนกัน
- โหลดสื่อจากแอปของผู้ส่ง และข้อความบันทึกจะปรากฏในเครื่องมือ
เข้าร่วมเซสชันการแคสต์ที่มีอยู่
- รับรหัสเซสชันการแคสต์ที่ทำงานอยู่โดยใช้ SDK ตัวรับหรือ SDK ของผู้ส่ง จากฝั่งผู้รับ ให้ป้อนข้อมูลต่อไปนี้เพื่อรับรหัสเซสชันในคอนโซลโปรแกรมแก้ไขข้อบกพร่องระยะไกลของ Chrome
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;
หรือคุณจะขอรหัสเซสชันจากผู้ส่งเว็บที่เชื่อมต่อโดยใช้วิธีต่อไปนี้ก็ได้
cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();
- ป้อนรหัสเซสชันในเครื่องมือ CaC และคลิกปุ่ม
RESUME
- ปุ่ม "แคสต์" ควรเชื่อมต่อได้แล้วและเริ่มแสดงข้อความบันทึกในเครื่องมือ
สิ่งที่ควรลองทำ
ต่อไปเราจะใช้เครื่องมือ CaC เพื่อดูบันทึกบนตัวรับตัวอย่าง
- เปิดเครื่องมือ CAC
- ป้อนรหัสแอปของผู้รับของแอปตัวอย่างแล้วคลิกปุ่ม
SET APP ID
- คลิกปุ่ม "แคสต์" ที่ด้านซ้ายบน แล้วเลือกอุปกรณ์ที่พร้อมใช้งาน Google Cast เพื่อเปิดอุปกรณ์รับสัญญาณ
- ไปที่แท็บ
LOAD MEDIA
ที่ด้านบน
- เปลี่ยนปุ่มตัวเลือกประเภทคำขอเป็น
LOAD
- คลิกปุ่ม
SEND REQUEST
เพื่อเล่นวิดีโอตัวอย่าง
- วิดีโอตัวอย่างควรเล่นในอุปกรณ์แล้วในตอนนี้ คุณจะเริ่มเห็นบันทึกจากขั้นตอนก่อนหน้าที่เริ่มแสดงในแท็บ "บันทึกข้อความ" ที่ด้านล่างของเครื่องมือ
ลองสำรวจฟีเจอร์ต่อไปนี้เพื่อตรวจสอบบันทึกและควบคุมผู้รับ
- คลิกแท็บ
MEDIA INFO
หรือMEDIA STATUS
เพื่อดูข้อมูลสื่อและสถานะสื่อ - คลิกปุ่ม
SHOW OVERLAY
เพื่อดูการวางซ้อนการแก้ไขข้อบกพร่องบนตัวรับ - ใช้ปุ่ม
CLEAR CACHE AND STOP
เพื่อโหลดแอปตัวรับสัญญาณซ้ำและแคสต์อีกครั้ง
10. ขอแสดงความยินดี
ตอนนี้คุณทราบวิธีเพิ่มตัวบันทึกการแก้ไขข้อบกพร่องของแคสต์ลงในแอปเว็บรีซีฟเวอร์ที่พร้อมใช้งาน Cast โดยใช้ SDK ของ Cast Receiver เวอร์ชันล่าสุดแล้ว
โปรดดูรายละเอียดเพิ่มเติมในคู่มือนักพัฒนาซอฟต์แวร์ตัวบันทึกการแก้ไขข้อบกพร่องของ Cast และเครื่องมือ Command and Control (CaC)