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

1. ภาพรวม

โลโก้ Google Cast

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 เช่น เพื่อเปิดแอปพลิเคชันตัวรับ

รูปภาพแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Cast ที่ไฮไลต์ปุ่ม "เพิ่มแอปพลิเคชันใหม่"

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

รูปภาพของหน้าจอ "แอปพลิเคชันตัวรับใหม่" ที่ไฮไลต์ตัวเลือก "ตัวรับสัญญาณที่กำหนดเอง"

เลือก "ตัวรับสัญญาณที่กำหนดเอง" ซึ่งเป็นสิ่งที่เรากำลังสร้าง

รูปภาพแสดงช่อง "URL แอปพลิเคชันตัวรับ" ในกล่องโต้ตอบ "ตัวรับสัญญาณที่กำหนดเองใหม่"

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

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

รูปภาพแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK ที่ไฮไลต์ปุ่ม "เพิ่มอุปกรณ์ใหม่"

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

รูปภาพกล่องโต้ตอบ "เพิ่มอุปกรณ์รับการแคสต์"

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

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

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

โลโก้ Google Chrome

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

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

รูปภาพของแท็บ "Cast Connect & Logger Controls" ของเครื่องมือ Command and Control (CaC)

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

รูปภาพของแท็บ "Cast Connect & Logger Controls" ของเครื่องมือ Command and Control (CaC) ซึ่งบ่งชี้ว่าอุปกรณ์เชื่อมต่อกับแอปตัวรับสัญญาณอยู่

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

รูปภาพของแท็บ "Load Media" ของเครื่องมือ Command and Control (CaC)

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

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

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

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

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

  1. เลือกไดเรกทอรี ไอคอนโฟลเดอร์app-start จากการดาวน์โหลดโค้ดตัวอย่าง
  2. เปิด 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 จะปรากฏบนตัวรับ

รูปภาพของวิดีโอที่กำลังเล่นมีข้อความ &quot;โหมด DEBUG&quot; ปรากฏบนพื้นหลังสีแดงที่มุมซ้ายบนของเฟรม

เหตุการณ์ของเครื่องเล่นบันทึก

การใช้ 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 วิธีดังนี้

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

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

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

  1. รับรหัสเซสชันการแคสต์ที่ทำงานอยู่โดยใช้ SDK ตัวรับหรือ SDK ของผู้ส่ง จากฝั่งผู้รับ ให้ป้อนข้อมูลต่อไปนี้เพื่อรับรหัสเซสชันในคอนโซลโปรแกรมแก้ไขข้อบกพร่องระยะไกลของ Chrome
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

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

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

รูปภาพของแท็บ &quot;Cast Connect & Logger Controls&quot; ของเครื่องมือ Command and Control (CaC) เพื่อเริ่มเซสชันต่อ

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

สิ่งที่ควรลองทำ

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

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

รูปภาพของแท็บ &quot;Cast Connect & Logger Controls&quot; ของเครื่องมือ Command and Control (CaC)

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

รูปภาพของแท็บ &quot;Cast Connect & Logger Controls&quot; ของเครื่องมือ Command and Control (CaC) ซึ่งบ่งชี้ว่าอุปกรณ์เชื่อมต่อกับแอปตัวรับสัญญาณอยู่

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

รูปภาพของแท็บ &quot;Load Media&quot; ของเครื่องมือ Command and Control (CaC)

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

รูปภาพแท็บ &quot;Cast Connect & Logger Controls&quot; ของเครื่องมือ Command and Control (CaC) ซึ่งมีข้อความบันทึกอยู่ในบานหน้าต่างด้านล่าง

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

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

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

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

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

โปรดดูรายละเอียดเพิ่มเติมในคู่มือนักพัฒนาซอฟต์แวร์ตัวบันทึกการแก้ไขข้อบกพร่องของ Cast และเครื่องมือ Command and Control (CaC)