Gỡ lỗi ứng dụng bộ thu truyền

1. Tổng quan

Biểu trưng Google Cast

Lớp học lập trình này sẽ hướng dẫn bạn cách thêm Trình ghi nhật ký gỡ lỗi Cast vào ứng dụng Custom Web Receiver hiện có.

Google Cast là gì?

Google Cast SDK cho phép ứng dụng của bạn phát nội dung và điều khiển chế độ phát trên các thiết bị hỗ trợ Google Cast. Thư viện này cung cấp cho bạn các thành phần giao diện người dùng cần thiết dựa trên Danh sách kiểm tra thiết kế của Google Cast.

Danh sách kiểm tra thiết kế Google Cast được cung cấp để giúp trải nghiệm người dùng Cast trở nên đơn giản và dễ đoán trên tất cả các nền tảng được hỗ trợ.

Chúng ta sẽ xây dựng những gì?

Khi hoàn tất lớp học lập trình này, bạn sẽ có một Trình nhận web tuỳ chỉnh được tích hợp với Cast Debug Logger.

Hãy xem hướng dẫn về Trình ghi nhật ký gỡ lỗi Cast để biết thông tin chi tiết và thông tin khác.

Kiến thức bạn sẽ học được

Cách thiết lập môi trường để phát triển Trình nhận web.
Cách tích hợp Trình ghi nhật ký gỡ lỗi vào Cast Receiver.

Bạn cần có

Trình duyệt Google Chrome mới nhất.
Dịch vụ lưu trữ HTTPS, chẳng hạn như Lưu trữ Firebase hoặc ngrok.
Một thiết bị Google Cast, chẳng hạn như Chromecast hoặc Android TV được thiết lập để có quyền truy cập vào Internet.
TV hoặc màn hình có cổng đầu vào HDMI.

Trải nghiệm

Bạn nên có kinh nghiệm sử dụng tính năng Truyền và hiểu cách hoạt động của Trình nhận web Truyền.
Bạn cần có kiến thức về phát triển web.
Bạn cũng cần có kiến thức về cách xem TV :)

Bạn sẽ sử dụng hướng dẫn này như thế nào?

Chỉ đọc

Đọc và hoàn thành bài tập

Bạn đánh giá thế nào về trải nghiệm xây dựng ứng dụng web?

Người mới bắt đầu

Trung cấp

Thành thạo

Bạn đánh giá thế nào về trải nghiệm xem truyền hình?

Người mới bắt đầu

Trung cấp

Thành thạo

2. Nhận mã mẫu

Bạn có thể tải tất cả mã mẫu xuống máy tính...

và giải nén tệp zip đã tải xuống.

3. Triển khai bộ nhận tại địa phương

Để có thể sử dụng trình nhận web với một thiết bị truyền, bạn cần lưu trữ trình nhận web ở một nơi mà thiết bị truyền có thể truy cập. Nếu bạn đã có một máy chủ hỗ trợ https, hãy bỏ qua các hướng dẫn sau và ghi lại URL vì bạn sẽ cần URL đó trong phần tiếp theo.

Nếu không có máy chủ để sử dụng, bạn có thể dùng Lưu trữ Firebase hoặc ngrok.

Chạy máy chủ

Sau khi thiết lập dịch vụ bạn chọn, hãy chuyển đến app-start rồi khởi động máy chủ.

Ghi lại URL cho máy thu được lưu trữ. Bạn sẽ sử dụng đối tượng này trong phần tiếp theo.

4. Đăng ký một ứng dụng trong Cast Developer Console

Bạn phải đăng ký ứng dụng để có thể chạy một Web Receiver tuỳ chỉnh (như được tạo trong lớp học lập trình này) trên các thiết bị Chromecast. Sau khi đăng ký ứng dụng, bạn sẽ nhận được một mã ứng dụng mà ứng dụng người gửi phải dùng để thực hiện các lệnh gọi API, chẳng hạn như để chạy một ứng dụng nhận.

Hình ảnh về Cast Developer Console, trong đó nút "Add New Application" (Thêm ứng dụng mới) được đánh dấu

Nhấp vào "Thêm ứng dụng mới"

Hình ảnh màn hình "Ứng dụng nhận mới" có lựa chọn "Trình nhận tuỳ chỉnh" được làm nổi bật

Chọn "Custom Receiver" (Trình nhận tuỳ chỉnh), đây là thành phần mà chúng ta sẽ tạo.

Hình ảnh về trường "URL ứng dụng nhận" trong hộp thoại "Trình nhận tuỳ chỉnh mới" đang được điền thông tin

Nhập thông tin chi tiết về bộ nhận mới, nhớ sử dụng URL trong phần cuối cùng. Ghi lại Mã ứng dụng được chỉ định cho bộ nhận hoàn toàn mới của bạn.

Bạn cũng phải đăng ký thiết bị truyền Google Cast để thiết bị đó có thể truy cập vào ứng dụng nhận trước khi bạn xuất bản ứng dụng. Sau khi bạn phát hành ứng dụng nhận, ứng dụng đó sẽ có trên tất cả các thiết bị Google Cast. Để phục vụ cho mục đích của lớp học lập trình này, bạn nên làm việc với một ứng dụng nhận chưa được xuất bản.

Hình ảnh Bảng điều khiển dành cho nhà phát triển SDK của Google Cast, trong đó nút "Thêm thiết bị mới" được làm nổi bật

Nhấp vào "Thêm thiết bị mới"

Hình ảnh hộp thoại "Thêm thiết bị nhận nội dung truyền"

Nhập số sê-ri in ở mặt sau của thiết bị truyền và đặt tên mô tả cho thiết bị đó. Bạn cũng có thể tìm thấy số sê-ri bằng cách truyền màn hình trong Chrome khi truy cập vào Bảng điều khiển dành cho nhà phát triển SDK của Google Cast

Quá trình này sẽ mất từ 5 đến 15 phút để thiết bị và bộ nhận của bạn sẵn sàng kiểm thử. Sau khi đợi 5 đến 15 phút, bạn phải khởi động lại thiết bị truyền.

5. Chạy ứng dụng mẫu

Biểu trưng Google Chrome

Trong khi chờ Trình nhận web mới sẵn sàng để thử nghiệm, hãy xem ứng dụng Trình nhận web mẫu đã hoàn tất trông như thế nào. Trình nhận mà chúng ta sẽ tạo có khả năng phát nội dung nghe nhìn bằng tính năng phát trực tuyến với tốc độ bit thích ứng.

Trong trình duyệt, hãy mở Công cụ chỉ huy và kiểm soát (CaC).

Hình ảnh thẻ "Cast Connect & Logger Controls" (Cast Connect và các chế độ điều khiển trình ghi nhật ký) của Công cụ Command and Control (CaC)

Sử dụng mã nhận dạng CC1AD845 mặc định và nhấp vào nút SET APP ID.
Nhấp vào nút Truyền ở trên cùng bên trái rồi chọn thiết bị hỗ trợ Google Cast.

Hình ảnh thẻ "Cast Connect & Logger Controls" (Cast Connect và các chế độ điều khiển trình ghi nhật ký) của Công cụ Command and Control (CaC) cho biết thẻ này được kết nối với một Ứng dụng nhận

Chuyển đến thẻ LOAD MEDIA ở trên cùng.

Hình ảnh thẻ "Load Media" (Tải nội dung nghe nhìn) của Công cụ chỉ huy và kiểm soát (CaC)

Thay đổi nút chọn loại yêu cầu thành LOAD.
Nhấp vào nút SEND REQUEST để phát một video mẫu.
Video sẽ bắt đầu phát trên thiết bị có hỗ trợ Google Cast để cho thấy chức năng cơ bản của bộ nhận trông như thế nào khi dùng Bộ nhận mặc định.

6. Chuẩn bị dự án khởi đầu

Bạn cần thêm tính năng hỗ trợ Google Cast vào ứng dụng khởi động mà bạn đã tải xuống. Sau đây là một số thuật ngữ về Google Cast mà chúng ta sẽ sử dụng trong lớp học lập trình này:

ứng dụng người gửi chạy trên thiết bị di động hoặc máy tính xách tay,
ứng dụng receiver chạy trên thiết bị Google Cast hoặc thiết bị Android TV.

Giờ đây, bạn đã sẵn sàng xây dựng dựa trên dự án khởi đầu bằng trình chỉnh sửa văn bản mà bạn yêu thích:

Chọn thư mục app-start trong tệp tải mã mẫu xuống.
Mở js/receiver.js và index.html

Lưu ý rằng khi bạn thực hiện lớp học lập trình này, http-server sẽ nhận biết được những thay đổi mà bạn thực hiện. Nếu không, hãy thử dừng rồi khởi động lại http-server.

Thiết kế ứng dụng

Ứng dụng nhận khởi tạo phiên truyền và sẽ ở chế độ chờ cho đến khi nhận được yêu cầu LOAD (chẳng hạn như lệnh phát một đoạn nội dung nghe nhìn) từ người gửi.

Ứng dụng này bao gồm một khung hiển thị chính (được xác định trong index.html) và một tệp JavaScript có tên là js/receiver.js chứa tất cả logic để giúp bộ nhận hoạt động.

index.html

Tệp html này chứa toàn bộ giao diện người dùng cho ứng dụng nhận.

receiver.js

Tập lệnh này quản lý tất cả logic cho ứng dụng nhận.

Câu hỏi thường gặp

7. Tích hợp với CastDebugLogger API

Cast Receiver SDK cung cấp một lựa chọn khác để nhà phát triển dễ dàng gỡ lỗi ứng dụng nhận bằng cách sử dụng CastDebugLogger API.

Hãy xem hướng dẫn về Trình ghi nhật ký gỡ lỗi Cast để biết thông tin chi tiết và thông tin khác.

Khởi chạy

Thêm tập lệnh sau vào thẻ <head> của ứng dụng nhận ngay sau tập lệnh Web Receiver SDK, trong 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>

Trong js/receiver.js ở đầu tệp và bên dưới playerManager, hãy lấy thực thể CastDebugLogger và bật trình ghi nhật ký trong trình nghe sự kiện 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);
  }
});

Khi bạn bật trình ghi nhật ký gỡ lỗi, một lớp phủ DEBUG MODE sẽ xuất hiện trên bộ nhận.

Hình ảnh một video đang phát với thông báo "CHẾ ĐỘ GỠ LỖI" xuất hiện trên nền đỏ ở góc trên bên trái của khung hình

Ghi nhật ký sự kiện của trình phát

Khi sử dụng CastDebugLogger, bạn có thể dễ dàng ghi lại các sự kiện của trình phát do Cast Web Receiver SDK kích hoạt và sử dụng các cấp trình ghi nhật ký khác nhau để ghi lại dữ liệu sự kiện. Cấu hình loggerLevelByEvents sẽ lấy cast.framework.events.EventType và cast.framework.events.category để chỉ định các sự kiện cần ghi nhật ký.

Thêm nội dung sau đây bên dưới trình nghe sự kiện READY để ghi nhật ký khi các sự kiện CORE của trình phát được kích hoạt hoặc khi có thay đổi mediaStatus được phát:

...

// 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
};

Thông điệp nhật ký và thẻ tuỳ chỉnh

CastDebugLogger API cho phép bạn tạo các thông báo nhật ký xuất hiện trên lớp gỡ lỗi của bộ nhận bằng nhiều màu sắc. Sử dụng các phương thức ghi nhật ký sau, được liệt kê theo thứ tự ưu tiên từ cao nhất đến thấp nhất:

castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);

Đối với mỗi phương thức ghi nhật ký, tham số đầu tiên phải là một thẻ tuỳ chỉnh và tham số thứ hai là thông điệp nhật ký. Thẻ có thể là chuỗi bất kỳ mà bạn thấy hữu ích.

Để xem nhật ký hoạt động, hãy thêm nhật ký vào trình chặn 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;
  }
);

Bạn có thể kiểm soát những thông báo xuất hiện trên lớp gỡ lỗi bằng cách đặt cấp độ nhật ký trong loggerLevelByTags cho từng thẻ tuỳ chỉnh. Ví dụ: việc bật một thẻ tuỳ chỉnh có cấp nhật ký cast.framework.LoggerLevel.DEBUG sẽ hiển thị tất cả thông báo được thêm bằng thông báo nhật ký lỗi, cảnh báo, thông tin và gỡ lỗi. Một ví dụ khác là việc bật thẻ tuỳ chỉnh ở cấp WARNING sẽ chỉ hiển thị thông báo lỗi và cảnh báo nhật ký.

Bạn không bắt buộc phải dùng cấu hình loggerLevelByTags. Nếu bạn không định cấu hình thẻ tuỳ chỉnh cho cấp độ trình ghi nhật ký, thì tất cả thông báo nhật ký sẽ xuất hiện trên lớp gỡ lỗi.

Thêm nội dung sau bên dưới lệnh gọi loggerLevelByEvents:

...

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};

...

8. Sử dụng lớp phủ gỡ lỗi

Trình ghi nhật ký gỡ lỗi Cast cung cấp một lớp phủ gỡ lỗi trên receiver để hiện thông báo nhật ký tuỳ chỉnh của bạn. Sử dụng showDebugLogs để bật/tắt lớp phủ gỡ lỗi và clearDebugLogs để xoá thông báo nhật ký trên lớp phủ.

Thêm nội dung sau vào trình nghe sự kiện READY để xem trước lớp gỡ lỗi trên bộ nhận:

// 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();
  }
});

Hình ảnh cho thấy lớp phủ gỡ lỗi, danh sách thông báo nhật ký gỡ lỗi trên nền mờ ở trên cùng của một khung hình video

9. Sử dụng Công cụ chỉ huy và kiểm soát (CaC)

Tổng quan

Công cụ chỉ huy và kiểm soát (CaC) ghi lại nhật ký của bạn và kiểm soát lớp gỡ lỗi.

Có 2 cách để kết nối thiết bị nhận với Công cụ CaC:

Bắt đầu một phiên kết nối Cast mới:

Mở Công cụ CaC, đặt mã ứng dụng của bộ nhận và nhấp vào nút Truyền để truyền đến bộ nhận.
Truyền một ứng dụng người gửi riêng biệt đến cùng một thiết bị có cùng mã nhận dạng ứng dụng nhận.
Tải nội dung nghe nhìn từ ứng dụng người gửi và thông báo nhật ký sẽ xuất hiện trên công cụ.

Tham gia một phiên truyền hiện có:

Lấy mã phiên truyền đang chạy bằng receiver SDK hoặc sender SDK. Ở phía thiết bị nhận, hãy nhập nội dung sau để lấy mã phiên trong bảng điều khiển Chrome Remote Debugger:

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

Hoặc bạn có thể lấy mã phiên từ một người gửi web đã kết nối bằng cách sử dụng phương thức sau:

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

Hình ảnh về thẻ "Cast Connect & Logger Controls" (Cast Connect và các chế độ điều khiển trình ghi nhật ký) của Công cụ điều khiển và chỉ huy (CaC) để tiếp tục phiên

Nhập mã phiên vào Công cụ CaC rồi nhấp vào nút RESUME.
Nút Truyền phải được kết nối và bắt đầu hiển thị thông báo nhật ký trên công cụ.

Những việc nên thử

Tiếp theo, chúng ta sẽ dùng Công cụ CaC để xem nhật ký trên trình nhận mẫu.

Mở Công cụ CaC.

Hình ảnh thẻ "Cast Connect & Logger Controls" (Cast Connect và các chế độ điều khiển trình ghi nhật ký) của Công cụ Command and Control (CaC)

Nhập mã ứng dụng của phần tử nhận trong ứng dụng mẫu rồi nhấp vào nút SET APP ID.
Nhấp vào nút Truyền ở trên cùng bên trái rồi chọn thiết bị hỗ trợ Google Cast để mở thiết bị nhận.

Chuyển đến thẻ LOAD MEDIA ở trên cùng.

Hình ảnh thẻ "Load Media" (Tải nội dung nghe nhìn) của Công cụ chỉ huy và kiểm soát (CaC)

Thay đổi nút chọn loại yêu cầu thành LOAD.
Nhấp vào nút SEND REQUEST để phát một video mẫu.

Hình ảnh thẻ "Cast Connect & Logger Controls" (Cast Connect và các chế độ kiểm soát trình ghi nhật ký) của Công cụ Command and Control (CaC) (Công cụ Lệnh và kiểm soát) với các thông báo nhật ký lấp đầy ngăn dưới cùng

Lúc này, một video mẫu sẽ phát trên thiết bị của bạn. Bạn sẽ bắt đầu thấy nhật ký từ các bước trước xuất hiện trong thẻ "Log Messages" (Thông báo nhật ký) ở cuối công cụ.

Hãy thử khám phá các tính năng sau để kiểm tra nhật ký và kiểm soát thiết bị nhận:

Nhấp vào thẻ MEDIA INFO hoặc MEDIA STATUS để xem thông tin và trạng thái của nội dung nghe nhìn.
Nhấp vào nút SHOW OVERLAY để xem lớp phủ gỡ lỗi trên bộ nhận.
Sử dụng nút CLEAR CACHE AND STOP để tải lại ứng dụng nhận và truyền lại.

10. Xin chúc mừng

Giờ đây, bạn đã biết cách thêm Trình ghi nhật ký gỡ lỗi Cast vào ứng dụng Web Receiver có hỗ trợ Cast bằng Cast Receiver SDK mới nhất.

Để biết thêm thông tin chi tiết, hãy xem hướng dẫn dành cho nhà phát triển về Trình ghi nhật ký gỡ lỗi Cast và Công cụ điều khiển và kiểm soát (CaC).

Gỡ lỗi ứng dụng bộ thu truyền Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

1. Tổng quan

Google Cast là gì?

Chúng ta sẽ xây dựng những gì?

Kiến thức bạn sẽ học được

Bạn cần có

Trải nghiệm

Bạn sẽ sử dụng hướng dẫn này như thế nào?

Bạn đánh giá thế nào về trải nghiệm xây dựng ứng dụng web?

Bạn đánh giá thế nào về trải nghiệm xem truyền hình?

2. Nhận mã mẫu

3. Triển khai bộ nhận tại địa phương

Chạy máy chủ

4. Đăng ký một ứng dụng trong Cast Developer Console

5. Chạy ứng dụng mẫu

6. Chuẩn bị dự án khởi đầu

Thiết kế ứng dụng

index.html

receiver.js

Câu hỏi thường gặp

7. Tích hợp với CastDebugLogger API

Khởi chạy

Ghi nhật ký sự kiện của trình phát

Thông điệp nhật ký và thẻ tuỳ chỉnh

8. Sử dụng lớp phủ gỡ lỗi

9. Sử dụng Công cụ chỉ huy và kiểm soát (CaC)

Tổng quan

Những việc nên thử

10. Xin chúc mừng

Gỡ lỗi ứng dụng bộ thu truyền