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

1. ภาพรวม

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

Google Cast คืออะไร

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

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

สิ่งที่เรากําลังจะสร้าง

หลังจากที่คุณสร้างโค้ดแล็บนี้เสร็จแล้ว คุณจะรวมตัวรับเว็บที่กําหนดเองเข้ากับตัวบันทึกการแก้ไขข้อบกพร่องของ Cast

โปรดดูรายละเอียดเพิ่มเติมในคําแนะนําเกี่ยวกับเครื่องมือแก้ไขข้อบกพร่องในการแก้ไขข้อบกพร่อง

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

• วิธีตั้งค่าสภาพแวดล้อมสําหรับการพัฒนาตัวรับสัญญาณเว็บ
• วิธีผสานรวมเครื่องมือบันทึกการแก้ปัญหาลงในเครื่องรับการแคสต์

สิ่งที่ต้องมี

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

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

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

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

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

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

อ่านอย่างเดียว อ่านแบบฝึกหัดจนจบ

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

มือใหม่ ขั้นกลาง เชี่ยวชาญ

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

ผู้ฝึกหัด ขั้นกลาง ผู้ชํานาญ

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

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

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

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

ที่เก็บตัวแก้ไขข้อบกพร่อง Codelab ของ Cast Debug จะมีโปรเจ็กต์ตัวอย่าง 2 โปรเจ็กต์:

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

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

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

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

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

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

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

4. ลงทะเบียนแอปพลิเคชันในคอนโซลนักพัฒนาซอฟต์แวร์ Cast

หากไม่มีบัญชีนักพัฒนาซอฟต์แวร์ Cast

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

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

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

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

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

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

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

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

ผู้รับและอุปกรณ์อาจใช้เวลา 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

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

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

แอปประกอบด้วยมุมมองหลัก 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

โปรดดูรายละเอียดเพิ่มเติมในคําแนะนําเกี่ยวกับเครื่องมือแก้ไขข้อบกพร่องในการแก้ไขข้อบกพร่อง

★ หมายเหตุ:

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

การเริ่มต้น

รวมสคริปต์ต่อไปนี้ไว้ในแท็ก <head> ของแอปผู้รับหลังจากสคริปต์ 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
};

บันทึกข้อความและแท็กที่กําหนดเอง

API ของ CastDebugLogger ช่วยให้คุณสร้างข้อความบันทึกที่จะปรากฏบนการวางซ้อนการแก้ไขข้อบกพร่องของผู้รับด้วยสีต่างๆ ได้ ใช้วิธีการบันทึกต่อไปนี้ โดยเรียงลําดับจากลําดับความสําคัญสูงสุดไปต่ําสุด

• 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. การใช้เครื่องมือคําสั่งและการควบคุม (CaC)

ภาพรวม

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

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

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

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

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

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

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

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

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

2. ป้อน ID ของเซสชันในเครื่องมือ 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 โดยใช้ SDK ตัวรับการแคสต์ล่าสุดแล้ว

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

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

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