Thêm hỗ trợ trực tiếp vào 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 tạo một ứng dụng Trình nhận web tuỳ chỉnh sử dụng Cast Live Breaks API.

Google Cast là gì?

Google Cast cho phép người dùng truyền nội dung từ thiết bị di động lên TV. Sau đó, người dùng có thể dùng thiết bị di động làm điều khiển từ xa để phát nội dung nghe nhìn trên TV.

Google Cast SDK giúp bạn mở rộng ứng dụng để đ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 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ẽ tạo được một Cast Receiver tận dụng Live API.

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

• Cách xử lý nội dung video trực tiếp trong Cast.
• Cách định cấu hình các trường hợp 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, 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, hoặc Google Home Hub

Trải nghiệm

• Bạn cần có kiến thức về phát triển web.
• Có kinh nghiệm xây dựng ứng dụng người gửi và ứng dụng nhận Cast.

2. Nhận mã mẫu

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

file_downloadTải mã nguồn xuống

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 trình nhận 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.

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

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

Nhập thông tin chi tiết về thiết bị nhận mới, nhớ sử dụng URL mà bạn đã nhận được

trong phần cuối. 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.

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 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. 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 hướng dẫn dành cho nhà phát triển sự kiện phát trực tiếp để nắm được thông tin tổng quan về các API sự kiện phát trực tiếp.

Đối với bên gửi, chúng ta sẽ dùng Cactool để bắt đầu một phiên truyền. Thiết bị nhận được thiết kế để tự động bắt đầu phát một sự kiện phát trực tiếp.

Trình nhận bao gồm 3 tệp. Một 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. Cuối cùng, cũng có một metadata_service.js sẽ được dùng sau này trong lớp học lập trình để mô phỏng việc 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 nhận mà bạn nhận được trên Play Console dành cho nhà phát triển Cast SDK rồi nhấp vào Đặt.

Bạn cần hướng dẫn Khung ứng dụng truyền Web Receiver (CAF) rằng nội dung cần phát là nội dung phát trực tiếp. Để làm như vậy, hãy sửa đổi ứng dụng bằng dòng mã sau. Thêm mã này vào 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. Web Receiver SDK sẽ tự động chuyển đến phần đầu của luồng phát trực tiếp. Chúng tôi chưa thêm dữ liệu hướng dẫn chương trình phát sóng trực tiếp, vì vậy, thanh tua sẽ biểu thị toàn bộ độ dài của phạm vi có thể tua của luồng phát.

Lưu các thay đổi vào receiver.js và bắt đầu một phiên truyền trên Cactool bằng cách nhấp vào nút truyền rồi chọn một thiết bị truyền mục tiêu. 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, bao gồm cả việc hỗ trợ hiển thị dữ liệu hướng dẫn chương trình trong các ứng dụng nhận và gửi. Các nhà cung cấp nội dung nên thêm siêu dữ liệu chương trình vào ứng dụng nhận để mang lại trải nghiệm tốt hơn cho người dùng cuối, đặc biệt là đối với các sự kiện phát trực tiếp dài hạn như Kênh truyền hình.

CAF hỗ trợ việc thiết lập siêu dữ liệu cho nhiều chương trình trong một luồng duy nhất. Bằng cách đặt dấu thời gian bắt đầu và thời lượng trên các đối tượng MediaMetadata, bộ nhận sẽ tự động cập nhật siêu dữ liệu xuất hiện trên các thiết bị truyền và lớp phủ dựa trên vị trí hiện tại của trình phát trong luồng phát. Dưới đây là một mẫu về các API và cách sử dụng chung của chúng.

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

Trong lớp học lập trình này, chúng ta sẽ sử dụng một 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 danh sách siêu dữ liệu chương trình, hãy tạo một vùng chứa. ContainerMetadata chứa danh sách các đối tượng MediaMetadata cho một luồng nội dung nghe nhìn duy nhất. Mỗi đối tượng MediaMetadata đại diện cho một phần trong vùng chứa. Khi con trỏ vị trí nằm trong phạm vi 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 vào 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 một lệnh gọi đến hàm để tải dữ liệu hướng dẫn trong trình chặn tải:

loadGuideData();

Lưu tệp receiver.js và bắt đầu một phiên truyền. Bạn sẽ thấy thời gian bắt đầu, thời gian kết thúc và tiêu đề của chương trình đều xuất hiện trên màn hình.

Một thông báo trạng thái nội dung nghe nhìn mới được gửi từ receiver đến tất cả sender khi playhead chuyển sang một phần mới trong vùng chứa để các ứng dụng sender có thể cập nhật giao diện người dùng của mình. Các ứng dụng nhận nên cập nhật siêu dữ liệu vùng chứa trong một trình chặn trạng thái nội dung nghe nhìn để tiếp tục cung cấp thông tin chương trình cho các ứng dụng gửi. Trong dịch vụ mẫu, chúng tôi trả về siêu dữ liệu chương trình hiện tại, cũng như siêu dữ liệu cho 2 chương trình tiếp theo. Để cập nhật siêu dữ liệu cho một luồng phát, hãy tạo một vùng chứa mới và gọi setContainerMetadata như trong ví dụ trước.

7. Tắt tính năng tua

Hầu hết các luồng video đều bao gồm các phân đoạn chứa một dải 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 các phân đoạn này. Web Receiver 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 đa phương tiện được hỗ trợ SEEK. Thao tác này sẽ tắt tính năng tua trên tất cả giao diện cảm ứng và thiết bị gửi di động. Thêm mã sau vào sau phần định nghĩa cho các biến thực thể SDK trong receiver.js.

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

Để tắt các lệnh tua bằng giọng nói do trợ lý cung cấp, chẳng hạn như Ok Google, tua lại 60 giây, bạn nên dùng trình chặn tua. Trình chặn này được gọi mỗi khi có yêu cầu tìm kiếm. Nếu lệnh đa phương tiện SEEK được hỗ trợ bị tắt, trình chặn sẽ từ chối yêu cầu tìm kiếm. Thêm đoạn mã sau 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 một phiên truyền. Bạn sẽ không thể tua 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 nhận tuỳ chỉnh bằng Cast Receiver SDK mới nhất.

Để biết thêm thông tin, 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.