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 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 thiết bị hỗ trợ Google Cast. Bộ công cụ 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ế Google Cast.
Danh sách kiểm tra thiết kế Google Cast được cung cấp để mang lại trải nghiệm đơn giản và dễ dự đoán cho người dùng Cast trên tất cả các nền tảng được hỗ trợ.
Chúng ta sẽ xây dự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 thu web tuỳ chỉnh được tích hợp với Trình ghi gỡ lỗi truyền.
Hãy xem hướng dẫn về Trình ghi nhật ký gỡ lỗi truyền để 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 thu phát trê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 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 sử dụng tính năng Truyền và hiểu cách hoạt động của Bộ thu web Cast.
- 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 đây về việc xem TV :)
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 tạo ứng dụng web?
Bạn đánh giá trải nghiệm xem TV của mình ở mức nà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 receiver cục bộ
Để có thể sử dụng trình thu phát web với thiết bị Cast, bạn cần lưu trữ trình thu phát web ở nơi thiết bị Cast có thể truy cập. Nếu bạn đã có một máy chủ hỗ trợ https, hãy bỏ qua 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 tính nă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 và khởi động máy chủ.
Ghi lại URL của dịch vụ nhận được lưu trữ. Bạn sẽ dùng tính năng này trong phần tiếp theo.
4. Đăng ký ứng dụng trong Bảng điều khiển dành cho nhà phát triển Cast
Bạn phải đăng ký ứng dụng để có thể chạy Trình thu web tuỳ chỉ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 gửi phải sử dụng để thực hiện các lệnh gọi API, chẳng hạn như để khởi chạy ứng dụng nhận.
Nhấp vào "Thêm ứng dụng mới"
Chọn "Custom Receiver" (Trình thu tuỳ chỉnh). Đây là ứng dụng mà chúng ta đang xây dựng.
Nhập thông tin chi tiết về trình 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ộ thu hoàn toàn mới.
Bạn cũng phải đăng ký thiết bị Google Cast để thiết bị đó có thể truy cập vào ứng dụng receiver trước khi bạn phát hành ứng dụng. Sau khi bạn xuất bản ứng dụng nhận, ứng dụng đó sẽ khả dụng cho tất 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 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 mô tả cho số sê-ri đó. 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 vào Google Cast SDK Developer Console
Bạn sẽ mất từ 5 đến 15 phút để thiết bị và bộ thu của mình sẵn sàng cho việc 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
Trong khi chờ Trình thu web mới sẵn sàng để thử nghiệm, hãy xem ứng dụng Trình thu web hoàn chỉnh mẫu trông như thế nào. Bộ thu mà chúng tôi sắp xây dựng sẽ có khả năng phát nội dung nghe nhìn bằng cách sử dụng tính năng truyền trực tuyến tốc độ bit thích ứng.
- Trong trình duyệt, hãy mở Công cụ điều khiển và ra lệnh (CaC).
- Sử dụng mã nhận dạng bộ nhận
CC1AD845mặc định rồi nhấp vào nútSET APP ID. - 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.
- Chuyển đến thẻ
LOAD MEDIAở trên cùng.
- 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ị 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 ta 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. Dưới đây là một số thuật ngữ của Google Cast mà chúng ta 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
- ứng dụng receiver chạy trên thiết bị Google Cast hoặc Android TV.
Bây giờ, bạn đã sẵn sàng xây dựng dựa trên dự án khởi động bằng trình soạn thảo văn bản yêu thích:
- Chọn thư mục
app-starttrong tệp tải mã mẫu xuống. - Mở
js/receiver.jsvàindex.html
Lưu ý: khi bạn thực hiện lớp học lập trình này, http-server sẽ nhận được các thay đổi mà bạn thực hiện. Nếu không, hãy thử dừng và khởi động lại http-server.
Thiết kế ứng dụng
Ứng dụng nhận sẽ khởi chạy 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 nội dung nghe nhìn) từ ứng dụng gửi.
Ứng dụng này bao gồm một thành phần 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 để làm cho trình thu nhận của chúng ta 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 receiver của chúng ta.
receiver.js
Tập lệnh này quản lý tất cả logic cho ứng dụng receiver của chúng ta.
Câu hỏi thường gặp
7. Tích hợp với API CastDebugLogger
SDK Cast Receiver 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 receiver bằng cách sử dụng API CastDebugLogger.
Hãy xem hướng dẫn về Trình ghi nhật ký gỡ lỗi truyền để 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 receiver ngay sau tập lệnh SDK Web Receiver 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 trình ghi gỡ lỗi được bật, một lớp phủ của DEBUG MODE sẽ hiển thị trên bộ thu.
Ghi nhật ký sự kiện của người chơi
Khi sử dụng CastDebugLogger, bạn có thể dễ dàng ghi lại các sự kiện của người chơi do SDK Bộ thu web truyền và sử dụng các cấp độ trình ghi khác nhau để ghi lại dữ liệu sự kiện. Cấu hình loggerLevelByEvents sử dụng cast.framework.events.EventType và cast.framework.events.category để chỉ định các sự kiện cần ghi lại.
Thêm nội dung sau vào bên dưới trình nghe sự kiện READY để ghi nhật ký khi sự kiện CORE của trình phát được kích hoạt hoặc khi có thay đổi về mediaStatus được truyền tin:
...
// 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 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 nhật ký, thông số đầu tiên phải là thẻ tuỳ chỉnh và thông 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.
Để 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 điệp nào xuất hiện trên lớp phủ 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 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ý.
Cấu hình loggerLevelByTags là không bắt buộc. 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 điệp nhật ký sẽ hiển thị trên lớp phủ 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 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 báo nhật ký trên lớp phủ.
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 thu 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 bộ thu với Công cụ CaC:
Bắt đầu một kết nối truyền mới:
- Mở Công cụ CaC, đặt Mã ứng dụng của trình nhận rồi nhấp vào nút Truyền để truyền đến trình nhận.
- Truyền một ứng dụng trình gửi riêng biệt đến cùng một thiết bị có cùng Mã ứng dụng của trình nhận.
- Tải nội dung nghe nhìn từ ứng dụng gửi và thông điệp 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 Cast đang chạy bằng SDK trình nhận hoặc SDK trình gửi. Ở phía trình nhận, hãy nhập nội dung sau để lấy mã phiên trong bảng điều khiển 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 trình gửi web đã kết nối, sử dụng phương thức sau:
cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();
- Nhập mã phiên trên Công cụ CaC rồi nhấp vào nút
RESUME. - Nút Truyền sẽ được kết nối và bắt đầu hiển thị thông điệp nhật ký trên công cụ.
Những việc nên thử
Tiếp theo, chúng ta sẽ sử dụng Công cụ CaC để xem nhật ký trên trình thu nhận mẫu.
- Mở Công cụ CAC.
- Nhập mã ứng dụng receiver của ứ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ở trình nhận.
- Chuyển đến thẻ
LOAD MEDIAở trên cùng.
- 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 video mẫu.
- 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 đó bắt đầu hiển thị trong thẻ "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 để điều tra nhật ký và kiểm soát trình thu:
- Nhấp vào thẻ
MEDIA INFOhoặcMEDIA STATUSđể xem thông tin về nội dung nghe nhì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 Trình ghi nhật ký gỡ lỗi Cast vào ứng dụng Web Receiver hỗ trợ Cast bằng cách sử dụng SDK Receiver Cast 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 gỡ lỗi truyền và Công cụ điều khiển và kiểm soát (CaC).