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

1. ภาพรวม

Codelab นี้จะสอนวิธีเพิ่มเครื่องมือบันทึกข้อบกพร่องของ Cast ลงในแอปตัวรับสัญญาณเว็บที่กำหนดเองที่มีอยู่

Google Cast คืออะไร

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

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

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

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

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

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

• วิธีตั้งค่าสภาพแวดล้อมสำหรับการพัฒนาตัวรับสัญญาณเว็บ
• วิธีผสานรวม Debug Logger เข้ากับตัวรับ Cast

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

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

ประสบการณ์

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

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

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

file_downloadดาวน์โหลดแหล่งที่มา

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

3. การติดตั้งใช้งานตัวรับสัญญาณในเครื่อง

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

หากไม่มีเซิร์ฟเวอร์ให้ใช้งาน คุณสามารถใช้ Firebase Hosting หรือ ngrok

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

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

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

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

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

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

เลือก "Custom Receiver" ซึ่งเป็นสิ่งที่เรากำลังสร้าง

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

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

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

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

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

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

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

1. เปิดเครื่องมือคำสั่งและการควบคุม (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

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

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

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

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

index.html

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

receiver.js

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

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

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

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

Cast Receiver SDK มีอีกตัวเลือกหนึ่งสำหรับนักพัฒนาแอปในการแก้ไขข้อบกพร่องของแอปตัวรับได้อย่างง่ายดายโดยใช้ CastDebugLogger API

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

การเริ่มต้น

ใส่สคริปต์ต่อไปนี้ในแท็ก <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 และเปิดใช้เครื่องบันทึกในเครื่องมือฟังเหตุการณ์ 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 เรียกใช้ และใช้ระดับ Logger ต่างๆ เพื่อบันทึกข้อมูลเหตุการณ์ได้อย่างง่ายดาย loggerLevelByEvents config ใช้ 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 คือข้อความบันทึก แท็กอาจเป็นสตริงใดก็ได้ที่คุณเห็นว่ามีประโยชน์

หากต้องการแสดงบันทึกใน Action ให้เพิ่มบันทึกลงในอินเทอร์เซ็ปเตอร์ 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 เป็นค่าที่ไม่บังคับ หากไม่ได้กำหนดค่าแท็กที่กำหนดเองสำหรับระดับ Logger ข้อความบันทึกทั้งหมดจะแสดงในการวางซ้อนการแก้ไขข้อบกพร่อง

เพิ่มโค้ดต่อไปนี้ใต้การเรียกใช้ 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. การใช้เครื่องมือสั่งการและควบคุม (CaC)

ภาพรวม

เครื่องมือคำสั่งและการควบคุม (CaC) จะบันทึกบันทึกและควบคุมการซ้อนทับการแก้ไขข้อบกพร่อง

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

เริ่มการเชื่อมต่อ Cast ใหม่

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

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

1. รับรหัสเซสชัน Cast ที่กําลังทํางานโดยใช้ SDK ของตัวรับหรือ SDK ของผู้ส่ง จากฝั่งผู้รับ ให้ป้อนข้อมูลต่อไปนี้เพื่อรับรหัสเซสชันในคอนโซล Chrome Remote Debugger

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. ขอแสดงความยินดี

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

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