1. Tổng quan
Lớp học lập trình này sẽ hướng dẫn bạn cách xây dựng ứng dụng Trình thu nhận web tuỳ chỉnh sử dụng API Cast Live Breaks.
Google Cast là gì?
Google Cast cho phép người dùng truyền nội dung từ thiết bị di động sang TV. Sau đó, người dùng có thể sử dụng thiết bị di động làm điều khiển từ xa để phát nội dung đa phương tiện trên TV.
Google Cast SDK cho phép bạn mở rộng ứng dụng của mình để điều khiển TV hoặc hệ thống âm thanh. Cast SDK cho phép bạn thêm 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ẽ xây dựng một Bộ thu truyền (Cast receiver) tận dụng được các Live API (API trực tiếp).
Kiến thức bạn sẽ học được
- Cách xử lý nội dung video trực tiếp trong tính năng Truyền.
- Cách định cấu hình các tình huống phát trực tiếp mà Cast hỗ trợ.
- Cách thêm dữ liệu chương trình vào sự kiện phát trực tiếp
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 hoặc Google Home Hub
Trải nghiệm
- Bạn cần có kiến thức về phát triển web trước đó.
- Kinh nghiệm trước đây khi xây dựng các ứng dụng của thiết bị gửi và nhận nội dung truyền.
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 của mình trong quá trình tạo ứng dụng web?
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...
rồi giải nén tệp zip đã tải xuống.
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 phải đăng ký ứng dụng của mình để có thể chạy trình thu nhận tuỳ chỉnh (được tích hợp sẵn 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 thông tin chi tiết về người nhận mới của bạn và nhớ sử dụng URL mà bạn đã kết thúc bằng
trong phần cuối. 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. Truyền một sự kiện phát trực tiếp đơn giản
Trước khi bắt đầu lớp học lập trình này, bạn nên xem lại hướng dẫn trực tiếp dành cho nhà phát triển, trong đó cung cấp thông tin tổng quan về các API đang hoạt động.
Đối với người gửi, chúng ta sẽ sử dụng Cactooll để bắt đầu phiên Truyền. Đầu thu này được thiết kế để tự động bắt đầu phát sự kiện phát trực tiếp.
Trình nhận bao gồm ba tệp. Tệp html cơ bản có tên là receiver.html chứa cấu trúc ứng dụng chính. Bạn không cần sửa đổi tệp này. Ngoài ra còn có một tệp tên là receiver.js, chứa tất cả logic cho receiver (trình thu nhận). Cuối cùng, còn có một metadata_service.js sẽ được dùng sau trong lớp học lập trình này để mô phỏng quá trình lấy dữ liệu hướng dẫn chương trình.
Để bắt đầu, hãy mở Cactool trong Chrome. Nhập Mã ứng dụng của người nhận mà bạn được cấp trên Bảng điều khiển dành cho nhà phát triển Cast SDK rồi nhấp vào Đặt.
Khung ứng dụng truyền bộ thu trên web (CAF) cần được hướng dẫn rằng nội dung sẽ phát là nội dung phát trực tiếp. Để thực hiện việc này, hãy sửa đổi ứng dụng bằng dòng mã sau. Thêm thành phần này vào phần nội dung chính của trình chặn tải trong receiver.js:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Việc đặt loại luồng thành LIVE sẽ bật giao diện người dùng trực tiếp của CAF. SDK Bộ thu trên web sẽ tự động chuyển đến cạnh phát trực tiếp của sự kiện phát trực tiếp. Bạn chưa thêm dữ liệu hướng dẫn chương trình phát trực tiếp, vì vậy thanh lọc sẽ biểu thị toàn bộ thời lượng của phạm vi có thể tìm kiếm của luồng.
Lưu các thay đổi vào receiver.js và bắt đầu phiên Truyền trên Cactool bằng cách nhấp vào nút truyền và chọn một thiết bị truyền đích. Sự kiện phát trực tiếp sẽ bắt đầu phát ngay lập tức.
6. Thêm dữ liệu hướng dẫn chương trình
CAF hiện đã hỗ trợ nội dung phát trực tiếp để hiển thị dữ liệu hướng dẫn chương trình trong các ứng dụng của người nhận và người gửi. Các nhà cung cấp nội dung nên đưa siêu dữ liệu lập trình vào các ứng dụng nhận để cải thiện trải nghiệm người dùng cuối, đặc biệt là đối với các sự kiện phát trực tiếp kéo dài như Kênh truyền hình.
CAF hỗ trợ cài đặt siêu dữ liệu cho nhiều chương trình trong một luồng. Bằng cách đặt dấu thời gian và thời lượng bắt đầu trên các đối tượng MediaMetadata, trình nhận sẽ tự động cập nhật siêu dữ liệu xuất hiện trong trình gửi và lớp phủ dựa trên vị trí hiện tại của trình phát trong luồng. Dưới đây là ví dụ về các API và cách sử dụng chung.
// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;
Đối với lớp học lập trình này, chúng ta sẽ sử dụng dịch vụ siêu dữ liệu mẫu để cung cấp siêu dữ liệu cho sự kiện phát trực tiếp. Để tạo một trang thông tin về siêu dữ liệu của chương trình, hãy tạo một vùng chứa. ContainerMetadata lưu giữ danh sách đối tượng MediaMetadata cho một luồng nội dung đa phương tiện. Mỗi đối tượng MediaMetadata đại diện cho một phần duy nhất trong vùng chứa. Khi con trỏ vị trí nằm trong ranh giới của một phần nhất định, siêu dữ liệu của phần đó sẽ tự động được sao chép sang trạng thái nội dung nghe nhìn. Thêm mã sau vào tệp receiver.js để tải siêu dữ liệu mẫu xuống từ dịch vụ của chúng tôi và cung cấp vùng chứa cho CAF.
/**
* Gets the current program guide data from the sample MetadataService. Once
* obtained, the guide information is added using QueueManager.
*/
async function loadGuideData() {
const data = await MetadataService.fetchLiveMetadata();
const containerMetadata = new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}
Ngoài ra, hãy thêm lệnh gọi vào hàm để tải dữ liệu hướng dẫn trong khối chặn tải:
loadGuideData();
Lưu tệp receiver.js và bắt đầu phiên truyền. Bạn sẽ thấy thời gian bắt đầu, thời gian kết thúc và tên chương trình đều xuất hiện trên màn hình.
Thông báo trạng thái nội dung đa phương tiện mới được gửi từ người nhận đến tất cả người gửi khi con trỏ vị trí chuyển đổi sang một phần mới trong vùng chứa để các ứng dụng của người gửi có thể cập nhật giao diện người dùng của chúng. Ứng dụng nhận nên cập nhật siêu dữ liệu vùng chứa trong trình chặn trạng thái phương tiện để tiếp tục cung cấp thông tin chương trình cho các ứng dụng của người gửi. Trong dịch vụ mẫu, chúng tôi trả về siêu dữ liệu của chương trình hiện tại cũng như siêu dữ liệu của hai chương trình tiếp theo. Để cập nhật siêu dữ liệu cho một sự kiện phát trực tiếp, hãy tạo vùng chứa mới rồi gọi setContainerMetadata như trong ví dụ trước.
7. Đang tắt tua
Hầu hết các luồng video bao gồm các phân đoạn có một loạt khung hình video. Trừ phi có quy định khác, CAF sẽ cho phép người dùng tìm kiếm trong những phân khúc này. Trình thu nhận web có thể chỉ định điều này bằng cách gọi một số API có sẵn.
Trong trình chặn tải, hãy xoá lệnh nội dung đa phương tiện được hỗ trợ seeK. Chế độ này sẽ tắt tính năng tìm kiếm trên tất cả giao diện người gửi và giao diện cảm ứng trên thiết bị di động. Hãy thêm mã dưới đây sau các định nghĩa cho biến thực thể SDK trong receiver.js.
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
Để tắt lệnh tìm kiếm bằng giọng nói do trợ lý hỗ trợ, chẳng hạn như Ok Google, tua lại 60 giây, bạn nên sử dụng bộ chặn tua. Trình chặn này được gọi mỗi khi có một yêu cầu tìm kiếm. Nếu lệnh nội dung đa phương tiện được hỗ trợ seeK bị tắt, thiết bị chặn sẽ từ chối yêu cầu tìm kiếm. Thêm đoạn mã sau đây vào tệp receiver.js:
/**
* A seek interceptor is called whenever CAF receives a request to seek to
* a different location in media. This interceptor can be used to modify that
* seek request or disable seeking completely.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
// if the SEEK supported media command is disabled, block seeking
if (!(playerManager.getSupportedMediaCommands() &
cast.framework.messages.Command.SEEK)) {
castDebugLogger.info(TAG, 'Seek blocked.');
return null;
}
return seekRequestData;
});
Lưu tệp receiver.js và bắt đầu phiên truyền. Bạn sẽ không thể tìm kiếm trong sự kiện phát trực tiếp nữa.
8. Xin chúc mừng
Giờ đây, bạn đã biết cách tạo ứng dụng bộ thu tuỳ chỉnh bằng SDK Cast receiver 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ề tính năng phát trực tiếp.