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

1. Tổng quan

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 truyền vào ứng dụng Trình thu nhận web tuỳ chỉnh hiện có.

Google Cast là gì?

SDK Google Cast cho phép ứng dụng của bạn phát nội dung và điều khiển quá trình phát trên các thiết bị hỗ trợ Google Cast. Dịch vụ 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 của Google Cast Design.

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 đơn giản và có thể dự đoán được trên tất cả các nền tảng được hỗ trợ.

Chúng tôi sẽ xây dựng những gì?

Khi hoàn thành lớp học lập trình này, bạn sẽ có một Trình thu nhận web tuỳ chỉnh được tích hợp với Trình ghi gỡ lỗi truyền.

Xem hướng dẫn về Trình ghi nhật ký gỡ lỗi truyền để biết 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 cho việc phát triển Trình thu nhận web.
• Cách tích hợp Trình ghi nhật ký gỡ lỗi vào Trình nhận nội dung truyền.

Bạn cần có

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

Trải nghiệm

• Bạn phải có kinh nghiệm truyền trước đây và hiểu rõ cách hoạt động của Bộ thu web truyền.
• Bạn cần có kiến thức về phát triển web trước đó.
• Bạn cũng cần có kiến thức trước về cách xem TV :)

Bạn gặp sự cố kết nối mạng?

Nếu đang ở nơi mạng Wi-Fi không đáng tin cậy thì bạn có thể kết nối thiết bị Chromecast có dây bằng cách sử dụng bộ điều hợp Ethernet dành cho Chromecast hoặc Chromecast có Google TV.

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

Chỉ đọc qua Đọc và hoàn thành các bài tập

Bạn đánh giá thế nào về trải nghiệm của mình trong quá trình tạo ứ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 của mình khi xem TV?

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 của mình...

Tải nguồn xuống

rồi giải nén tệp zip đã tải xuống.

Kho lưu trữ của lớp học lập trình Cast Debug Logger có hai dự án mẫu:

• app-start – Mã khởi đầu mà bạn sẽ xây dựng trong lớp học lập trình này.
• app-Done – Mã hoàn chỉnh cho ứng dụng video mẫu hoàn thiện.

3. Triển khai bộ thu cục bộ

Để có thể sử dụng bộ thu web bằng Thiết bị truyền, thiết bị này cần được lưu trữ ở nơi mà Thiết bị truyền của bạn có thể tiếp cận. 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ể sử dụng Lưu trữ Firebase hoặc ngrok.

Chạy máy chủ

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

Ghi lại URL của thiết bị nhận được lưu trữ. Bạn sẽ dùng phương pháp này trong phần tiếp theo.

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

Bạn chưa có tài khoản nhà phát triển Cast?

Đăng ký tài khoản trên Bảng điều khiển dành cho nhà phát triển SDK Google Cast và thanh toán phí đăng ký.

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

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

Chọn "Trình thu tuỳ chỉnh", đây là những gì chúng ta đang xây dựng.

Nhập chi tiết về trình nhận mới của bạn, đảm bảo sử dụng URL từ phần trước. Ghi lại Mã ứng dụng được chỉ định cho trình nhận hoàn toàn mới của bạn.

Bạn cũng phải đăng ký thiết bị Google Cast để thiết bị này có thể truy cập vào ứng dụng của thiết bị thu trước khi bạn xuất bản. Sau khi bạn phát hành ứng dụng nhận, ứng dụng đó sẽ có trên tất cả thiết bị Google Cast. Để phục vụ 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 receiver chưa xuất bản.

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

Nhập số sê-ri in ở mặt sau của Thiết bị truyền và đặt tên mang tính mô tả. Bạn cũng có thể tìm thấy số sê-ri của mình bằng cách truyền màn hình trong Chrome khi truy cập Google Cast SDK Developer Console

Sẽ mất 5-15 phút để thiết bị nhận và thiết bị sẵn sàng thử nghiệm. Sau khi chờ 5-15 phút, bạn phải khởi động lại thiết bị Truyền của mình.

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

Trong khi chúng ta chờ Web receiver mới sẵn sàng thử nghiệm, hãy cùng xem một mẫu ứng dụng Web receiver hoàn thiện trông như thế nào. Bộ thu tín hiệu mà chúng ta sẽ tạo sẽ có khả năng phát lại nội dung nghe nhìn bằng cách sử dụng phương thức truyền trực tuyến tốc độ bit thích ứng.

1. Trong trình duyệt của bạn, hãy mở Command and Control (CaC) Tool (Công cụ Command và Control (CaC)).

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

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

5. Thay đổi nút chọn của loại yêu cầu thành LOAD.
6. Nhấp vào nút SEND REQUEST để phát video mẫu.
7. 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ộ thu khi sử dụng Bộ thu mặc định.

6. Chuẩn bị dự án khởi động

Chúng tôi cần thêm tính năng hỗ trợ cho Google Cast vào ứng dụng ban đầu mà bạn tải xuống. Dưới đây là một số thuật ngữ của Google Cast mà chúng tôi sẽ sử dụng trong lớp học lập trình này:

• một ứng dụng của người gửi chạy trên thiết bị di động hoặc máy tính xách tay,
• một ứng dụng broadcast receiver chạy trên thiết bị Google Cast hoặc 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 cách sử dụng trình chỉnh sửa văn bản yêu thích của mình:

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

Lưu ý rằng trong quá trình thực hiện lớp học lập trình này, http-server sẽ xử lý 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 chạy phiên Truyền và sẽ ở chế độ chờ cho đến khi có yêu cầu TẢI (chẳng hạn như lệnh phát một phần nội dung nghe nhìn) từ người gửi đến.

Ứ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 receiver hoạt động.

index.html

Tệp html này chứa tất cả giao diện người dùng cho ứng dụng nhận của chúng tôi.

receiver.js

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

Truyền tài liệu?

Chúng tôi có tài liệu đầy đủ dành cho người gửi, người gửi trên iOS, Android và Chrome.

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

• Google Cast là gì?
• Làm thế nào để trở thành Nhà phát triển Google Cast?

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

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

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

★ Lưu ý:

Để sử dụng API CastDebugLogger, bạn phải đăng ký thiết bị truyền của mình trên Bảng điều khiển dành cho nhà phát triển SDK của Google Cast và sử dụng phiên bản chương trình cơ sở của thiết bị 1.44 trở lên.

Khởi chạy

Đưa tập lệnh sau vào thẻ <head> của ứng dụng nhận ngay sau tập lệnh SDK Bộ nhận web, 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);
  }
});

Cảnh báo: Hãy nhớ thay đổi setEnabled thành false cho bộ nhận sản xuất.

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

Ghi nhật ký sự kiện của người chơi

Bằng cách sử dụng CastDebugLogger, bạn có thể dễ dàng ghi nhật ký các sự kiện của trình phát do SDK Bộ thu web truyền trên web kích hoạt và sử dụng các cấp độ trình ghi nhật ký khác nhau để ghi nhật ký dữ liệu sự kiện. Cấu hình loggerLevelByEvents 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 đoạn mã sau đây vào bên dưới trình nghe sự kiện READY để ghi lại khi sự kiện CORE của trình phát được kích hoạt hoặc sự thay đổi mediaStatus được phát đi:

...

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

API CastDebugLogger cho phép bạn tạo thông điệp nhật ký xuất hiện trên lớp phủ gỡ lỗi của trình thu nhận bằng nhiều màu. Sử dụng các phương thức ghi nhật ký đượ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 nên là thẻ tuỳ chỉnh và tham số thứ hai là thông điệp nhật ký. Thẻ có thể là một chuỗi bất kỳ mà bạn thấy hữu ích.

Để hiển thị nhật ký trong thực tế, 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 thông báo nào sẽ xuất hiện trên lớp phủ gỡ lỗi bằng cách thiết lập 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 kèm theo thông báo lỗi, cảnh báo, thông tin và thông điệp nhật ký gỡ lỗi. Một ví dụ khác là việc bật thẻ tuỳ chỉnh có cấp WARNING sẽ chỉ cho thấy lỗi và cảnh báo thông điệp nhật ký.

Không bắt buộc phải có cấu hình loggerLevelByTags. Nếu một thẻ tuỳ chỉnh không được định cấu hình ở cấp trình ghi nhật ký, thì tất cả thông điệp nhật ký sẽ hiển thị trên lớp phủ gỡ lỗi.

Thêm phần sau đây vào 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 truyền cung cấp một lớp phủ gỡ lỗi trên bộ nhận để hiển thị thông điệp 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 điệp nhật ký trên lớp phủ này.

Thêm đoạn mã sau vào trình nghe sự kiện READY để xem trước lớp phủ gỡ lỗi trên trình 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();
  }
});

9. Sử dụng công cụ Command và Control (CaC)

Tổng quan

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

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

Bắt đầu kết nối Truyền mới:

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

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

1. Nhận mã phiên truyền đang chạy bằng cách sử dụng SDK nhận hoặc SDK người gửi. Ở phía người nhận, hãy nhập thông tin sau để nhận mã phiên trong bảng điều khiển Chrome Remote Debugger (Trình gỡ lỗi từ xa của Chrome):

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, hãy sử dụng phương thức sau:

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

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

Hành động bạn có thể thử

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

1. Mở Công cụ CaC.

2. Nhập mã ứng dụng nhận của ứng dụng mẫu rồi nhấp vào nút SET APP ID.
3. 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.

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

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

7. Video mẫu hiện sẽ phát trên thiết bị của bạn. Bạn sẽ bắt đầu thấy nhật ký của các bước trước đó bắt đầu xuất hiện trong thẻ "Thông điệp nhật ký" ở cuối công cụ.

Hãy thử khám phá các tính năng sau để điều tra nhật ký và kiểm soát trình nhận:

• Nhấp vào thẻ MEDIA INFO hoặc MEDIA STATUS để xem thông tin về nội dung đa phương tiện 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 trình 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 Bộ ghi nhật ký gỡ lỗi truyền vào ứng dụng Bộ thu web hỗ trợ Cast bằng cách sử dụng SDK Bộ thu truyền mới nhất.

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

Bạn muốn có thêm phiên truyền?

Hãy xem các lớp học lập trình khác về tính năng Truyền và các ứng dụng mẫu trên GitHub của chúng tôi.