การแก้ไขข้อบกพร่องของแอปเครื่องส่ง Cast

1. ภาพรวม

Codelab นี้จะสอนวิธีเพิ่มตัวบันทึกการแก้ไขข้อบกพร่องของแคสต์ลงในแอป Custom Web Receiver ที่มีอยู่

Google Cast คืออะไร

Google Cast SDK ทำให้แอปของคุณเล่นเนื้อหาและควบคุมการเล่นบนอุปกรณ์ที่พร้อมใช้งาน Google Cast ได้ ซึ่งจะจัดเตรียมคอมโพเนนต์ UI ที่จำเป็นตามรายการตรวจสอบการออกแบบของ Google Cast

รายการตรวจสอบสำหรับการออกแบบของ Google Cast มีไว้เพื่อมอบประสบการณ์ของผู้ใช้ Cast ที่เรียบง่ายและคาดเดาได้ในทุกแพลตฟอร์มที่รองรับ

เราจะสร้างอะไร

เมื่อดำเนินการ Codelab เสร็จแล้ว คุณจะมีตัวรับเว็บที่กำหนดเองที่ผสานรวมกับตัวบันทึกการแก้ไขข้อบกพร่องของแคสต์

ดูรายละเอียดและข้อมูลเพิ่มเติมในคำแนะนำจากตัวบันทึกการแก้ไขข้อบกพร่องของ Cast

สิ่งที่คุณจะได้เรียนรู้

• วิธีตั้งค่าสภาพแวดล้อมสำหรับการพัฒนา Web Receiver
• วิธีผสานรวมตัวบันทึกการแก้ไขข้อบกพร่องเข้ากับเครื่องรับการแคสต์

สิ่งที่คุณต้องมี

• เบราว์เซอร์ Google Chrome เวอร์ชันล่าสุด
• บริการโฮสติ้ง HTTPS เช่น โฮสติ้งของ Firebase หรือ ngrok
• อุปกรณ์ Google Cast เช่น Chromecast หรือ Android TV ที่กำหนดค่าการเข้าถึงอินเทอร์เน็ต
• ทีวีหรือจอภาพที่มีอินพุต HDMI

ประสบการณ์การใช้งาน

• คุณควรมีประสบการณ์การแคสต์ก่อนหน้านี้และเข้าใจวิธีการทำงานของ Cast Web Receiver
• คุณจะต้องมีความรู้ด้านการพัฒนาเว็บมาก่อน
• คุณจะต้องมีความรู้เบื้องต้นเกี่ยวกับการดูทีวีด้วย :)

หากมีปัญหาเกี่ยวกับเครือข่าย

หากคุณอยู่ในสถานที่ที่เครือข่าย Wi-Fi ไม่เสถียร คุณสามารถต่อสายอุปกรณ์ Chromecast โดยใช้อะแดปเตอร์อีเทอร์เน็ตสำหรับ Chromecast หรือสำหรับ Chromecast พร้อม Google TV ได้

คุณจะใช้บทแนะนำนี้อย่างไร

อ่านเท่านั้น อ่านและทำแบบฝึกหัด

คุณจะให้คะแนนประสบการณ์การสร้างเว็บแอปอย่างไร

มือใหม่ ระดับกลาง ผู้ชำนาญ

คุณจะให้คะแนนประสบการณ์ในการดูทีวีอย่างไร

มือใหม่ ระดับกลาง ผู้ชำนาญ

2. รับโค้ดตัวอย่าง

คุณดาวน์โหลดโค้ดตัวอย่างทั้งหมดลงในคอมพิวเตอร์ได้...

แหล่งที่มาของการดาวน์โหลด

แล้วแตกไฟล์ ZIP ที่ดาวน์โหลดมา

ที่เก็บ Codelab ของ Cast Debug Logger มีโปรเจ็กต์ตัวอย่าง 2 โปรเจ็กต์ดังนี้

• app-start - โค้ดเริ่มต้นที่คุณสามารถสร้างได้ใน Codelab นี้
• app-done - โค้ดที่สมบูรณ์สำหรับแอปวิดีโอตัวอย่างที่ทำเสร็จแล้ว

3. การทำให้เครื่องรับใช้งานได้ภายใน

อุปกรณ์แคสต์จะต้องโฮสต์ไว้ในที่ที่อุปกรณ์แคสต์สามารถเข้าถึงได้ จึงจะใช้เว็บรับสัญญาณกับอุปกรณ์แคสต์ได้ หากคุณมีเซิร์ฟเวอร์ที่รองรับ https อยู่แล้ว ให้ข้ามวิธีการต่อไปนี้และจดบันทึก URL ไว้ เนื่องจากคุณจะต้องใช้ในส่วนถัดไป

หากยังไม่มีเซิร์ฟเวอร์ ให้ใช้โฮสติ้งของ Firebase หรือ ngrok

เรียกใช้เซิร์ฟเวอร์

เมื่อตั้งค่าบริการที่ต้องการแล้ว ให้ไปที่ app-start แล้วเริ่มต้นเซิร์ฟเวอร์

จด URL ของผู้รับที่โฮสต์ไว้ คุณจะได้ใช้ในส่วนถัดไป

4. ลงทะเบียนแอปพลิเคชันใน Cast Developer Console

หากไม่มีบัญชีนักพัฒนาแอป Cast

ลงชื่อสมัครใช้บัญชีบนแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK และชำระค่าลงทะเบียน

คุณต้องลงทะเบียนแอปพลิเคชันเพื่อให้เรียกใช้ Web Receiver ที่กำหนดเองในอุปกรณ์ Chromecast ได้ ตามที่กำหนดไว้ใน Codelab นี้ หลังจากที่คุณลงทะเบียนแอปพลิเคชันแล้ว คุณจะได้รับรหัสแอปพลิเคชันที่แอปพลิเคชันผู้ส่งของคุณต้องใช้เพื่อทำการเรียก API เช่น เปิดใช้งานแอปพลิเคชันตัวรับ

คลิก "เพิ่มแอปพลิเคชันใหม่"

เลือก "ตัวรับแบบกำหนดเอง" นี่คือสิ่งที่เรากำลังสร้าง

ป้อนรายละเอียดของผู้รับใหม่ อย่าลืมใช้ URL จากส่วนสุดท้าย จดบันทึกรหัสแอปพลิเคชันที่กำหนดให้กับผู้รับรายใหม่

นอกจากนี้ คุณต้องลงทะเบียนอุปกรณ์ Google Cast เพื่อให้อุปกรณ์สามารถเข้าถึงแอปพลิเคชันของเครื่องรับก่อนที่จะเผยแพร่ เมื่อคุณเผยแพร่แอปพลิเคชันตัวรับสัญญาณแล้ว แอปพลิเคชันนั้นจะพร้อมใช้งานบนอุปกรณ์ Google Cast ทุกเครื่อง สำหรับ Codelab นี้ขอแนะนำให้ทำงานกับแอปพลิเคชันตัวรับที่ยังไม่ได้เผยแพร่

คลิก "เพิ่มอุปกรณ์ใหม่"

ป้อนหมายเลขซีเรียลที่พิมพ์อยู่ด้านหลังอุปกรณ์ Cast แล้วตั้งชื่อที่สื่อความหมาย คุณยังสามารถค้นหาหมายเลขซีเรียลได้โดยการแคสต์หน้าจอใน Chrome เมื่อเข้าถึงแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK

ระบบจะใช้เวลา 5-15 นาทีเพื่อเตรียมเครื่องรับและอุปกรณ์ให้พร้อมสำหรับการทดสอบ หลังจากรอ 5-15 นาที คุณต้องรีบูตอุปกรณ์แคสต์

5. เรียกใช้แอปตัวอย่าง

ในขณะที่เรารอ Web Receiver ใหม่ของเราที่จะพร้อมสำหรับการทดสอบ มาดูกันว่าตัวอย่างแอป Web Receiver ที่สมบูรณ์ตัวอย่างมีลักษณะอย่างไร ตัวรับสัญญาณที่เรากำลังจะสร้างจะเล่นสื่อโดยใช้สตรีมมิงแบบบิตเรตที่ปรับเปลี่ยนได้

1. เปิดเครื่องมือ Command and Control (CaC) ในเบราว์เซอร์

2. ใช้รหัสผู้รับ CC1AD845 เริ่มต้นและคลิกปุ่ม SET APP ID
3. คลิกปุ่ม "แคสต์" ที่ด้านซ้ายบน แล้วเลือกอุปกรณ์ที่พร้อมใช้งาน Google Cast

4. ไปที่แท็บ LOAD MEDIA ที่ด้านบน

5. เปลี่ยนปุ่มตัวเลือกประเภทคำขอเป็น LOAD
6. คลิกปุ่ม SEND REQUEST เพื่อเล่นวิดีโอตัวอย่าง
7. วิดีโอจะเริ่มเล่นในอุปกรณ์ที่พร้อมใช้งาน Google Cast เพื่อแสดงฟังก์ชันการทำงานของตัวรับสัญญาณพื้นฐานเมื่อใช้ตัวรับเริ่มต้น

6. เตรียมเริ่มโปรเจ็กต์

เราต้องเพิ่มการรองรับ Google Cast ในแอปเริ่มต้นที่คุณดาวน์โหลด ต่อไปนี้คือคำศัพท์ของ Google Cast บางส่วนที่เราจะใช้ใน Codelab นี้

• แอปผู้ส่งทำงานบนอุปกรณ์เคลื่อนที่หรือแล็ปท็อป
• แอปตัวรับทำงานบนอุปกรณ์ Google Cast หรือ Android TV

ตอนนี้คุณก็พร้อมที่จะต่อยอดจากโปรเจ็กต์เริ่มต้นโดยใช้เครื่องมือแก้ไขข้อความที่คุณชอบแล้ว

1. เลือกไดเรกทอรี app-start จากการดาวน์โหลดโค้ดตัวอย่าง
2. เปิด js/receiver.js และ index.html

โปรดทราบว่า http-server น่าจะกำลังรับการเปลี่ยนแปลงที่คุณทำขณะทำงานผ่าน Codelab นี้ หากไม่มี ให้ลองหยุดและรีสตาร์ท http-server

การออกแบบแอป

แอปตัวรับจะเริ่มต้นเซสชันการแคสต์ และจะสแตนด์บายจนกว่าคำขอ LOAD (เช่น คำสั่งเล่นสื่อ) จากผู้ส่งจะมาถึง

แอปนี้ประกอบด้วยมุมมองหลัก 1 มุมมองที่กำหนดไว้ใน index.html และไฟล์ JavaScript 1 ไฟล์ชื่อ js/receiver.js ซึ่งมีตรรกะทั้งหมดที่จะทำให้ตัวรับของเราทำงานได้

index.html

ไฟล์ HTML นี้มี UI ทั้งหมดสำหรับแอปตัวรับสัญญาณ

receiver.js

สคริปต์นี้จัดการตรรกะทั้งหมดสำหรับแอปตัวรับสัญญาณของเรา

เอกสารประกอบเกี่ยวกับการแคสต์ไหม

เรามีเอกสารประกอบที่ครอบคลุมเกี่ยวกับผู้รับ, iOS, Android และผู้ส่ง Chrome

คำถามที่พบบ่อย

• Google Cast คืออะไร
• ฉันจะเป็นนักพัฒนาซอฟต์แวร์ Google Cast ได้อย่างไร

7. ผสานรวมกับ CastDebugLogger API

Cast Receiver SDK เป็นอีกตัวเลือกหนึ่งที่ช่วยให้นักพัฒนาซอฟต์แวร์สามารถแก้ไขข้อบกพร่องของแอปตัวรับสัญญาณได้ง่ายๆ โดยใช้ CastDebugLogger API

ดูรายละเอียดและข้อมูลเพิ่มเติมในคำแนะนำจากตัวบันทึกการแก้ไขข้อบกพร่องของ Cast

★ หมายเหตุ:

หากต้องการใช้ CastDebugLogger API คุณต้องลงทะเบียนอุปกรณ์ Cast บนแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK และใช้เฟิร์มแวร์ของอุปกรณ์เวอร์ชัน 1.44 ขึ้นไป

การเริ่มต้น

ใส่สคริปต์ต่อไปนี้ลงในแท็ก <head> ในแอปตัวรับสัญญาณข้างสคริปต์ Web Receiver SDK ใน 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);
  }
});

คำเตือน: อย่าลืมเปลี่ยน setEnabled เป็น false สำหรับตัวรับสัญญาณที่ใช้งานจริง

เมื่อเปิดใช้บันทึกการแก้ไขข้อบกพร่อง การวางซ้อนของ DEBUG MODE จะปรากฏบนเครื่องรับ

เหตุการณ์โปรแกรมเล่นบันทึก

คุณสามารถใช้ CastDebugLogger เพื่อบันทึกเหตุการณ์ของโปรแกรมเล่นที่ Cast Web Receiver SDK เริ่มทำงานได้อย่างง่ายดายและใช้ระดับตัวบันทึกที่แตกต่างกันในการบันทึกข้อมูลเหตุการณ์ การกำหนดค่า 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. การใช้การวางซ้อนการแก้ไขข้อบกพร่อง

ตัวบันทึกการแก้ปัญหาของ Cast จะแสดงการวางซ้อนการแก้ไขข้อบกพร่องบนตัวรับเพื่อแสดงข้อความบันทึกที่กำหนดเอง ใช้ 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) จะเก็บบันทึกของคุณและควบคุมการวางซ้อนการแก้ไขข้อบกพร่อง

การเชื่อมต่อตัวรับกับเครื่องมือ CaC ทำได้ 2 วิธีดังนี้

เริ่มการเชื่อมต่อ Cast ใหม่โดยทำดังนี้

1. เปิดเครื่องมือ CaC ตั้งรหัสแอปตัวรับสัญญาณ แล้วคลิกปุ่ม "แคสต์" เพื่อแคสต์ไปยังเครื่องรับ
2. แคสต์แอปของผู้ส่งแยกต่างหากไปยังอุปกรณ์เดียวกันโดยใช้รหัสแอปของผู้รับเดียวกัน
3. โหลดสื่อจากแอปผู้ส่งและข้อความบันทึกจะแสดงในเครื่องมือ

เข้าร่วมเซสชันการแคสต์ที่มีอยู่

1. รับรหัสเซสชันการแคสต์ที่ทำงานอยู่โดยใช้ SDK ตัวรับสัญญาณหรือ SDK ของผู้ส่ง จากฝั่งผู้รับ ให้ป้อนข้อมูลต่อไปนี้เพื่อรับรหัสเซสชันในคอนโซลโปรแกรมแก้ไขข้อบกพร่องระยะไกลของ Chrome

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

หรือจะรับรหัสเซสชันจากผู้ส่งเว็บที่เชื่อมต่อก็ได้ โดยใช้วิธีการต่อไปนี้

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

2. ป้อนรหัสเซสชันในเครื่องมือ CaC แล้วคลิกปุ่ม RESUME
3. ปุ่ม "แคสต์" ควรเชื่อมต่อและเริ่มแสดงข้อความบันทึกบนเครื่องมือ

สิ่งที่น่าลอง

ต่อไปเราจะใช้เครื่องมือ CaC เพื่อดูบันทึกในเครื่องรับตัวอย่างของคุณ

1. เปิดเครื่องมือ CaC

2. ป้อนรหัสแอปของผู้รับของแอปตัวอย่าง แล้วคลิกปุ่ม SET APP ID
3. คลิกปุ่ม "แคสต์" ที่ด้านซ้ายบน แล้วเลือกอุปกรณ์ที่พร้อมใช้งาน Google Cast เพื่อเปิดเครื่องรับ

4. ไปที่แท็บ LOAD MEDIA ที่ด้านบน

5. เปลี่ยนปุ่มตัวเลือกประเภทคำขอเป็น LOAD
6. คลิกปุ่ม SEND REQUEST เพื่อเล่นวิดีโอตัวอย่าง

7. ตอนนี้วิดีโอตัวอย่างจะเล่นบนอุปกรณ์ของคุณ บันทึกของคุณที่ทำขั้นตอนก่อนหน้านี้จะเริ่มปรากฏใน "ข้อความบันทึก" แท็บที่ด้านล่างของเครื่องมือ

ลองสำรวจฟีเจอร์ต่อไปนี้เพื่อตรวจสอบบันทึกและควบคุมผู้รับ

• คลิกแท็บ MEDIA INFO หรือ MEDIA STATUS เพื่อดูข้อมูลสื่อและสถานะสื่อ
• คลิกปุ่ม SHOW OVERLAY เพื่อดูการวางซ้อนการแก้ไขข้อบกพร่องบนตัวรับ
• ใช้ปุ่ม CLEAR CACHE AND STOP เพื่อโหลดแอปตัวรับสัญญาณซ้ำและแคสต์อีกครั้ง

10. ขอแสดงความยินดี

ตอนนี้คุณทราบวิธีเพิ่มตัวบันทึกการแก้ไขข้อบกพร่องของแคสต์ลงในแอป Web Receiver ที่พร้อมใช้งาน Cast โดยใช้ Cast Receiver SDK เวอร์ชันล่าสุดแล้ว

ดูรายละเอียดเพิ่มเติมได้ที่คู่มือสำหรับนักพัฒนาซอฟต์แวร์ Cast Debug Logger และ Command and Control (CaC) สำหรับนักพัฒนาซอฟต์แวร์

หากต้องการการแคสต์เพิ่มเติม

ลองดู Cast Codelab อื่นๆ และตัวอย่างแอปบน GitHub