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

1. ภาพรวม

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

Google Cast คืออะไร

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

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

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

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

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

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

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

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

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

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

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

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

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

file_downloadดาวน์โหลดซอร์ส

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

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

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

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

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

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

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

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

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

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

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

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

นอกจากนี้ คุณยังต้องลงทะเบียนอุปกรณ์ Google Cast เพื่อให้อุปกรณ์เข้าถึงแอปพลิเคชันตัวรับได้ก่อนที่จะเผยแพร่ เมื่อเผยแพร่แอปพลิเคชันตัวรับแล้ว แอปพลิเคชันจะพร้อมใช้งานในอุปกรณ์ Google 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

โปรดทราบว่าขณะที่คุณทํางานใน 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 Developer ได้อย่างไร

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

เพิ่มรายการต่อไปนี้ใต้ READY event listener เพื่อบันทึกเมื่อมีการเรียกเหตุการณ์ 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 เพื่อล้างข้อความบันทึกในการแสดงซ้อนทับ

เพิ่มข้อมูลต่อไปนี้ลงใน READY event listener เพื่อดูตัวอย่างการวางซ้อนการแก้ไขข้อบกพร่องบนตัวรับ

// 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)

ภาพรวม

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

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

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

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

วิธีเข้าร่วมเซสชัน Cast ที่มีอยู่

1. รับรหัสเซสชันการแคสต์ที่ทำงานอยู่โดยใช้ 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 ลงในแอปตัวรับเว็บที่เปิดใช้ Cast โดยใช้ Cast Receiver SDK เวอร์ชันล่าสุดแล้ว

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