Trang này được dịch bởi Cloud Translation API.

Xây dựng trình thu nhận web tuỳ chỉnh

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 tạo ứng dụng Trình thu phát web tuỳ chỉnh để phát nội dung trên các thiết bị hỗ trợ tính năng Truyền.

Google Cast là gì?

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

SDK Google Cast cho phép ứng dụng của bạn điều khiển các thiết bị hỗ trợ Google Cast (ví dụ: TV hoặc hệ thống âm thanh). SDK Cast 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ế của 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ễ dự đoán trên tất cả các nền tảng được hỗ trợ. Xem thêm ở đây.

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 ứng dụng HTML5 hoạt động như một bộ thu tuỳ chỉnh của riêng bạn có khả năng hiển thị nội dung video trên các thiết bị hỗ trợ Cast.

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

Cách thiết lập để phát triển bộ thu.
Thông tin cơ bản về bộ thu hỗ trợ tính năng Truyền dựa trên Khung ứng dụng truyền.
Cách nhận video truyền.
Cách tích hợp Trình ghi nhật ký gỡ lỗi.
Cách tối ưu hoá bộ thu cho màn hình thông minh.

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.
Một thiết bị Google Cast như Chromecast hoặc Android TV được định cấu hình có kết nối Internet.
TV hoặc màn hình có đầu vào HDMI.

Trải nghiệm

Bạn sẽ cần phải có kiến thức phát triển web trước đó.
Bạn cũng sẽ cần có kiến thức trước về cách xem TV :)

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

Chỉ có thể đọc

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

Bạn đánh giá trải nghiệm xây dựng ứng dụng web của mình như thế nào?

Người mới tập

Trung cấp

Thành thạo

Bạn đánh giá trải nghiệm xem TV của mình ở mức nào?

Người mới tập

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 receiver cục bộ

Để có thể sử dụng bộ thu web với Thiết bị truyền, thiết bị cần được lưu trữ ở nơi nào đó 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 hướng dẫn sau và ghi lại URL vì bạn sẽ cần đế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ụ mà mình muốn, hãy chuyển đến app-start rồi 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 Cast Developer Console

Bạn phải đăng ký ứng dụng của mình để có thể chạy trình thu tuỳ chỉnh (như được tích hợp 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ã ứ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.

Hình ảnh Bảng điều khiển dành cho nhà phát triển SDK Google Cast với dòng chữ "Add New Application" (Thêm ứng dụng mới) nút được làm nổi bật

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

Hình ảnh "Ứng dụng bộ thu mới" có màn hình "Custom receiver" (Bộ thu tuỳ chỉnh) đã làm nổi bật lựa chọn

Chọn "Custom receiver" (Bộ thu tuỳ chỉnh) đây là những gì chúng tôi đang tạo ra.

Hình ảnh "Bộ thu tuỳ chỉnh mới" màn hình hiển thị URL mà ai đó đang nhập vào 'URL ứng dụng nhận thư' trường

Nhập thông tin chi tiết về người nhận mới, hãy nhớ sử dụng URL mà bạn đã kết thúc

trong phần cuối. Ghi lại mã ứng dụng được gán cho bộ thu 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ị có thể truy cập vào ứng dụng nhận tín hiệu trước khi bạn xuất bản. 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ụ 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 ứng dụng receiver 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 Google Cast với dòng chữ "Add New Device" (Thêm thiết bị mới) nút được làm nổi bật

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

Hình ảnh "Thêm thiết bị bộ thu truyền" hộp thoạ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

Sẽ mất từ 5 đến 15 phút trước khi đầu thu và thiết bị của bạn sẵn sàng để kiểm tra. Sau khi đợi 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

Biểu trưng Google Chrome

Trong khi đợi ứng dụng receiver mới sẵn sàng để thử nghiệm, hãy xem giao diện của một ứng dụng mẫu đã hoàn tất. 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 tính năng truyền trực tuyến tốc độ bit thích ứng (chúng tôi sẽ sử dụng nội dung mẫu được mã hoá cho tính năng Truyền phát thích ứng động qua HTTP (DASH)).

Trong trình duyệt, hãy mở Công cụ Command và Control (CaC).

Hình ảnh của 'Cast Connect & Chế độ kiểm soát trình ghi nhật ký tab của Công cụ Command và Control (CaC)

Bạn sẽ thấy Công cụ CaC của chúng tôi.
Sử dụng giá trị mặc định "CC1AD845" mã nhận dạng mẫu và nhấp vào "Đặt mã ứng dụng" .
Nhấp vào nút Truyền ở trên cùng bên trái và chọn thiết bị Google Cast của bạn.

Hình ảnh của 'Cast Connect & Chế độ kiểm soát trình ghi nhật ký thẻ của Công cụ Command và Control (CaC) cho biết công cụ này được kết nối với Ứng dụng bộ thu

Chuyển đến mục "Tải nội dung nghe nhìn" ở trên cùng.

Hình ảnh "Tải nội dung nghe nhìn" tab của Công cụ Command và Control (CaC)

Nhấp vào liên kết "Tải theo nội dung" để phát một video mẫu.
Video sẽ bắt đầu phát trên thiết bị Google Cast của bạn để 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 bắt đầu

Chúng tôi cần thêm tính năng hỗ trợ cho 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
một ứng dụng receiver (trình thu nhận) chạy trên thiết bị Google Cast.

Bây giờ, 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 yêu thích của mình:

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

Lưu ý: Khi bạn thực hiện lớp học lập trình này, http-server sẽ chọn những thay đổi bạn thực hiện. Nếu bạn nhận thấy sự thay đổi này, hãy thử tắt 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 (nói cách khác là lệnh phát lại một nội dung nghe nhìn) từ mộ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 của chúng ta hoạt động.

index.html

Tệp html này sẽ chứa giao diện người dùng cho ứng dụng nhận của chúng ta. Hiện tại, mã này đang trống và chúng ta sẽ thêm mã này trong lớp học lập trình.

receiver.js

Tập lệnh này sẽ quản lý tất cả logic cho ứng dụng nhận. Hiện tại, đây chỉ là một tệp trống, nhưng chúng ta sẽ biến tệp đó thành một thiết bị nhận Cast hoạt động đầy đủ chỉ bằng một vài dòng mã trong phần tiếp theo.

7. Bộ thu Cast cơ bản

Bộ thu Cast cơ bản sẽ khởi chạy phiên Truyền khi khởi động. Điều này là cần thiết để thông báo cho tất cả các ứng dụng dành cho người gửi được kết nối đã báo cáo người nhận đã thành công. Ngoài ra, SDK mới này được định cấu hình sẵn để xử lý nội dung đa phương tiện truyền trực tuyến với tốc độ bit thích ứng (sử dụng DASH, HLS và moot Streaming) và các tệp MP4 đơn giản ngay từ đầu. Hãy thử xem.

Khởi chạy

Thêm mã sau vào index.html trong tiêu đề:

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

Thêm mã sau vào index.html <body> trước <footer> đang tải receiver.js, nhằm cung cấp cho SDK receiver có không gian để hiển thị giao diện người dùng của receiver mặc định đang được vận chuyển cùng với tập lệnh mà bạn vừa thêm.

<cast-media-player></cast-media-player>

Bây giờ, chúng ta cần khởi chạy SDK trong js/receiver.js, bao gồm:

lấy thông tin tham chiếu đến CastReceiverContext, điểm truy cập chính của bạn đến toàn bộ SDK Bộ thu
lưu trữ tham chiếu đến PlayerManager, đối tượng này xử lý quá trình phát và cung cấp cho bạn tất cả hook cần thiết để bổ sung logic tuỳ chỉnh của riêng bạn
khởi chạy SDK bằng cách gọi start() trên CastReceiverContext

Thêm đoạn mã sau vào js/receiver.js.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

context.start();

8. Truyền cụm từ "cơ bản" nội dung video

Với mục đích của lớp học lập trình này, hãy sử dụng Công cụ CaC để dùng thử bộ thu hoàn toàn mới của bạn.

Trỏ trình duyệt web của bạn vào Công cụ Command và Control (CaC).

Hình ảnh của 'Cast Connect & Chế độ kiểm soát trình ghi nhật ký tab của Công cụ Command và Control (CaC)

Hãy nhớ thay thế Mã ứng dụng của riêng bạn như đã đăng ký trước đó trong trường này rồi nhấp vào "Đặt mã ứng dụng". Thao tác này sẽ hướng dẫn công cụ sử dụng bộ thu của bạn khi bắt đầu phiên Truyền.

Đang truyền nội dung nghe nhìn

Nhìn chung, để phát nội dung nghe nhìn trên thiết bị truyền, những điều sau cần xảy ra:

Người gửi tạo một đối tượng MediaInfo JSON từ SDK Truyền để mô hình hoá một mục nội dung đa phương tiện.
Người gửi kết nối với Thiết bị truyền để khởi chạy ứng dụng nhận.
Trình nhận tải đối tượng MediaInfo thông qua yêu cầu LOAD để phát nội dung.
Bộ thu sẽ giám sát và theo dõi trạng thái của nội dung nghe nhìn.
Người gửi gửi lệnh phát đến người nhận để điều khiển chế độ phát dựa trên hoạt động tương tác của người dùng với ứng dụng của người gửi.

Trong lần thử cơ bản đầu tiên này, chúng ta sẽ điền vào MediaInfo một URL thành phần có thể phát (được lưu trữ trong MediaInfo.contentUrl).

Người gửi trong thế giới thực sử dụng giá trị nhận dạng nội dung nghe nhìn dành riêng cho ứng dụng trong MediaInfo.contentId. Bên nhận sử dụng contentId làm giá trị nhận dạng để thực hiện các lệnh gọi API phụ trợ thích hợp nhằm phân giải URL của thành phần thực tế và đặt thành MediaInfo.contentUrl.. Bên thu cũng sẽ xử lý các công việc như mua giấy phép DRM hoặc chèn thông tin về điểm chèn quảng cáo.

Chúng tôi sẽ mở rộng tính năng nhận tín hiệu để làm điều tương tự như vậy trong phần tiếp theo. Bây giờ, hãy nhấp vào biểu tượng Truyền và chọn thiết bị của bạn để mở bộ thu.

Chuyển đến mục "Tải nội dung nghe nhìn" và nhấp vào liên kết "Tải theo nội dung" . Bộ nhận của bạn sẽ bắt đầu phát nội dung mẫu.

Hình ảnh "Tải nội dung nghe nhìn" tab của Công cụ Command và Control (CaC)

Vì vậy, SDK Bộ thu có sẵn sẽ xử lý:

Đang khởi chạy phiên Truyền
Xử lý các yêu cầu LOAD được gửi đến từ người gửi có chứa tài sản có thể phát
Cung cấp giao diện người dùng cơ bản cho trình phát, sẵn sàng hiển thị trên màn hình lớn.

Bạn có thể khám phá Công cụ CaC và mã của công cụ này trước khi chuyển sang phần tiếp theo. Chúng ta sẽ mở rộng bộ thu nhận để trao đổi với một API mẫu đơn giản nhằm thực hiện các yêu cầu LOAD đến từ người gửi.

9. Tích hợp với API bên ngoài

Theo cách mà hầu hết các nhà phát triển tương tác với Bộ thu truyền của họ trong các ứng dụng thực tế, chúng ta sẽ sửa đổi receiver để xử lý các yêu cầu LOAD tham chiếu đến nội dung nghe nhìn mong muốn bằng khoá API thay vì gửi qua URL tài sản có thể phát.

Các ứng dụng thường làm điều này vì:

Người gửi có thể không biết URL nội dung.
Ứng dụng Truyền được thiết kế để xử lý việc xác thực, logic nghiệp vụ hoặc lệnh gọi API khác trực tiếp trên bộ nhận.

Chức năng này chủ yếu được triển khai trong phương thức PlayerManager setMessageInterceptor(). Điều này cho phép bạn chặn các tin nhắn đến theo loại và sửa đổi chúng trước khi chúng đến trình xử lý thông báo nội bộ của SDK. Trong phần này, chúng ta sẽ xử lý các yêu cầu LOAD, trong đó chúng ta sẽ làm những việc sau:

Đọc yêu cầu LOAD đến và contentId tuỳ chỉnh của yêu cầu đó.
Hãy gọi GET đến API của chúng tôi để tra cứu thành phần có thể phát trực tiếp theo contentId.
Sửa đổi yêu cầu LOAD bằng URL của luồng.
Sửa đổi đối tượng MediaInformation để đặt tham số loại luồng.
Chuyển yêu cầu này đến SDK để phát lại hoặc từ chối lệnh này nếu chúng tôi không thể tra cứu nội dung nghe nhìn được yêu cầu.

API mẫu được cung cấp giới thiệu các hook của SDK để tuỳ chỉnh các tác vụ phổ biến của receiver, trong khi vẫn dựa vào một trải nghiệm gần như ngay lập tức.

API mẫu

Hướng trình duyệt của bạn đến https://storage.googleapis.com/cpe-sample-media/content.json và xem danh mục video mẫu của chúng tôi. Nội dung này bao gồm URL của hình ảnh áp phích ở định dạng png cũng như cả luồng DASH và HLS. Các luồng DASH và HLS trỏ đến các nguồn video và âm thanh đã tách biệt, được lưu trữ trong các vùng chứa mp4 phân đoạn.

{
  "bbb": {
    "author": "The Blender Project",
    "description": "Grumpy Bunny is grumpy",
    "poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
    "stream": {
      "dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
      "hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
    "title": "Big Buck Bunny"
  },
  "fbb_ad": {
    "author": "Google Inc.",
    "description": "Introducing Chromecast. The easiest way to enjoy [...]",
    "poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
    "stream": {
      "dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
      "hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
    "title": "For Bigger Blazes"
  },

  [...]

}

Ở bước tiếp theo, chúng ta sẽ liên kết khoá của từng mục nhập (ví dụ: bbb, fbb_ad ) với URL của luồng sau khi trình thu được gọi bằng yêu cầu LOAD.

Chặn yêu cầu TẢI

Ở bước này, chúng ta sẽ tạo một trình chặn tải có một hàm gửi yêu cầu XHR đến tệp JSON được lưu trữ. Sau khi nhận được tệp JSON, chúng tôi sẽ phân tích cú pháp nội dung và đặt siêu dữ liệu. Trong các phần sau, chúng ta sẽ tuỳ chỉnh tham số MediaInformation để chỉ định loại nội dung.

Thêm mã sau vào tệp js/receiver.js, ngay trước khi gọi context.start().

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
        // Fetch content repository by requested contentId
        makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            reject();
          } else {
            // Add metadata
            let metadata = new
               cast.framework.messages.GenericMediaMetadata();
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
        });
      });
    });

Phần tiếp theo sẽ trình bày cách định cấu hình thuộc tính media của yêu cầu tải cho nội dung DASH.

Sử dụng nội dung API mẫu DASH

Bây giờ, chúng ta đã chuẩn bị trình chặn tải, chúng ta sẽ chỉ định loại nội dung cho trình nhận. Thông tin này sẽ cung cấp cho người nhận URL danh sách phát chính và loại MIME của luồng. Thêm mã sau vào tệp js/receiver.js trong Promise() của trình chặn LOAD:

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            ...
          }
        });
      });
    });

Sau khi hoàn tất bước này, bạn có thể tiếp tục chuyển đến phần Thử nghiệm để thử tải bằng nội dung DASH. Nếu bạn muốn thử nghiệm tải bằng nội dung HLS, hãy xem bước tiếp theo.

Sử dụng nội dung HLS của API mẫu

API mẫu bao gồm nội dung HLS cũng như DASH. Ngoài việc thiết lập contentType như chúng ta đã làm trong bước trước, yêu cầu tải sẽ cần thêm một số thuộc tính để sử dụng URL HLS của API mẫu. Khi bộ nhận được định cấu hình để phát luồng HLS, loại vùng chứa mặc định dự kiến là luồng truyền tải (TS). Do đó, trình thu nhận sẽ cố gắng mở luồng MP4 mẫu ở định dạng TS nếu chỉ có thuộc tính contentUrl được sửa đổi. Trong yêu cầu tải, đối tượng MediaInformation cần được sửa đổi với các thuộc tính bổ sung để receiver biết rằng nội dung thuộc loại MP4 chứ không phải TS. Thêm mã sau vào tệp js/receiver.js trong trình chặn tải để sửa đổi các thuộc tính contentUrl và contentType. Ngoài ra, hãy thêm các thuộc tính HlsSegmentFormat và HlsVideoSegmentFormat.

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.hls;
            request.media.contentType = 'application/x-mpegurl';
            request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
            request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
            ...
          }
        });
      });
    });

Thử nghiệm

Một lần nữa, mở Công cụ Command và Control (CaC) rồi đặt Mã ứng dụng thành Mã ứng dụng của bộ nhận. Chọn thiết bị của bạn bằng nút Truyền.

Chuyển đến mục "Tải nội dung nghe nhìn" . Lần này, hãy xoá văn bản trong phần "URL nội dung" bên cạnh trường "Tải theo nội dung" . Nút này sẽ buộc ứng dụng gửi một yêu cầu LOAD chỉ chứa tham chiếu contentId đến nội dung nghe nhìn.

Hình ảnh "Tải nội dung nghe nhìn" tab của Công cụ Command và Control (CaC)

Giả sử mọi thứ đều hoạt động tốt khi bạn sửa đổi trình thu nhận, thì trình chặn sẽ đảm nhận việc định hình đối tượng MediaInfo thành nội dung mà SDK có thể phát trên màn hình.

Nhấp vào liên kết "Tải theo nội dung" để xem nội dung nghe nhìn của bạn có phát đúng cách không. Bạn có thể thay đổi Content ID thành một mã nhận dạng khác trong tệp content.json.

10. Tối ưu hoá cho màn hình thông minh

Màn hình thông minh là các thiết bị có chức năng cảm ứng, cho phép các ứng dụng nhận tín hiệu hỗ trợ điều khiển cảm ứng.

Phần này giải thích cách tối ưu hoá ứng dụng nhận tín hiệu khi khởi chạy trên màn hình thông minh, cũng như cách tuỳ chỉnh các nút điều khiển trình phát.

Truy cập vào các thành phần điều khiển giao diện người dùng

Bạn có thể truy cập vào đối tượng Điều khiển giao diện người dùng cho Màn hình thông minh bằng cast.framework.ui.Controls.GetInstance(). Thêm mã sau vào tệp js/receiver.js phía trên context.start():

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();

context.start();

Nếu bạn không sử dụng <cast-media-player> , bạn cần đặt touchScreenOptimizedApp trong CastReceiverOptions. Trong lớp học lập trình này, chúng ta sẽ sử dụng <cast-media-player> .

context.start({ touchScreenOptimizedApp: true });

Các nút điều khiển mặc định được gán cho từng vị trí dựa trên MetadataType và MediaStatus.supportedMediaCommands.

Các nút điều khiển video

Đối với MetadataType.MOVIE, MetadataType.TV_SHOW và MetadataType.GENERIC, đối tượng Điều khiển giao diện người dùng cho Màn hình thông minh sẽ xuất hiện như trong ví dụ dưới đây.

Hình ảnh video đang phát với các thành phần điều khiển trên giao diện người dùng phủ lên trên

--playback-logo-image
MediaMetadata.subtitle
MediaMetadata.title
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1: ControlsButton.QUEUE_PREV
ControlsSlot.SLOT_PRIMARY_1: ControlsButton.SEEK_BACKWARD_30
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2: ControlsButton.SEEK_FORWARD_30
ControlsSlot.SLOT_SECONDARY_2: ControlsButton.QUEUE_NEXT

Điều khiển âm thanh

Đối với MetadataType.MUSIC_TRACK, đối tượng Điều khiển giao diện người dùng cho Màn hình thông minh sẽ xuất hiện như sau:

Hình ảnh nhạc đang phát bằng các thành phần điều khiển trên giao diện người dùng phủ lên trên

--playback-logo-image
MusicTrackMediaMetadata.albumName
MusicTrackMediaMetadata.title
MusicTrackMediaMetadata.albumArtist
MusicTrackMediaMetadata.images[0]
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1: ControlsButton.NO_BUTTON
ControlsSlot.SLOT_PRIMARY_1: ControlsButton.QUEUE_PREV
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2: ControlsButton.QUEUE_NEXT
ControlsSlot.SLOT_SECONDARY_2: ControlsButton.NO_BUTTON

Cập nhật các lệnh nội dung nghe nhìn được hỗ trợ

Đối tượng Điều khiển giao diện người dùng cũng xác định liệu ControlsButton có xuất hiện hay không dựa trên MediaStatus.supportedMediaCommands.

Khi giá trị của supportedMediaCommands bằng ALL_BASIC_MEDIA, bố cục điều khiển mặc định sẽ hiển thị như dưới đây:

Hình ảnh các nút điều khiển trình phát nội dung nghe nhìn: thanh tiến trình, "Phát" nút "Tua đi" và "Tua lại" nút đã bật

Khi giá trị của supportedMediaCommands bằng ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, bố cục điều khiển mặc định sẽ hiển thị như dưới đây:

Hình ảnh các nút điều khiển trình phát nội dung nghe nhìn: thanh tiến trình, "Phát" nút "Tua đi" và "Tua lại" các nút và 'Xếp hàng đợi trước' và "Xếp hàng tiếp theo" nút đã bật

Khi giá trị của supportedMediaCommands bằng PAUSE | QUEUE_PREV | QUEUE_NEXT, bố cục điều khiển mặc định sẽ hiển thị như sau:

Hình ảnh các nút điều khiển trình phát nội dung nghe nhìn: thanh tiến trình, "Phát" và 'Xếp hàng đợi trước' và "Xếp hàng tiếp theo" nút đã bật

Khi có bản phụ đề, nút phụ đề sẽ luôn hiển thị tại SLOT_1.

Hình ảnh các nút điều khiển trình phát nội dung nghe nhìn: thanh tiến trình, "Phát" nút "Tua đi" và "Tua lại" các nút, 'Xếp hàng trước' và "Xếp hàng tiếp theo" và "Phụ đề" nút đã bật

Để thay đổi linh động giá trị của supportedMediaCommands sau khi bắt đầu ngữ cảnh của receiver, bạn có thể gọi PlayerManager.setSupportedMediaCommands để ghi đè giá trị này. Ngoài ra, bạn có thể thêm lệnh mới bằng cách dùng addSupportedMediaCommands hoặc xoá lệnh hiện có bằng removeSupportedMediaCommands.

Tuỳ chỉnh các nút điều khiển

Bạn có thể tuỳ chỉnh các chế độ điều khiển bằng cách sử dụng PlayerDataBinder. Thêm mã sau vào tệp js/receiver.js bên dưới TouchControls để đặt vị trí đầu tiên của các nút điều khiển:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    // Clear default buttons and re-assign
    touchControls.clearDefaultSlotAssignments();
    touchControls.assignButton(
      cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
      cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
    );
  });

context.start();

11. Triển khai tính năng duyệt qua nội dung nghe nhìn trên màn hình thông minh

Duyệt qua nội dung nghe nhìn là một tính năng của Bộ thu CAF cho phép người dùng khám phá thêm nội dung trên thiết bị cảm ứng. Để triển khai việc này, bạn sẽ sử dụng PlayerDataBinder để đặt giao diện người dùng BrowseContent. Sau đó, bạn có thể điền BrowseItems vào trường này dựa trên nội dung bạn muốn hiển thị.

BrowseContent

Dưới đây là ví dụ về giao diện người dùng BrowseContent và các thuộc tính tương ứng:

Hình ảnh giao diện người dùng BrowseContent hiển thị hai hình thu nhỏ video và một phần ba

BrowseContent.title
BrowseContent.items

Tỷ lệ khung hình

Sử dụng targetAspectRatio property để chọn tỷ lệ khung hình phù hợp nhất cho thành phần hình ảnh. SDK Bộ thu CAF hỗ trợ 3 tỷ lệ khung hình: SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9.

BrowseItem

Hãy sử dụng BrowseItem để hiện tiêu đề, phụ đề, thời lượng và hình ảnh cho từng mục:

Hình ảnh giao diện người dùng BrowseContent hiển thị hai hình thu nhỏ video và một phần ba

BrowseItem.image
BrowseItem.duration
BrowseItem.title
BrowseItem.subtitle

Thiết lập dữ liệu Duyệt qua nội dung nghe nhìn

Bạn có thể cung cấp danh sách nội dung nghe nhìn để duyệt web bằng cách gọi setBrowseContent. Thêm mã sau vào tệp js/receiver.js bên dưới playerDataBinder và trong trình nghe sự kiện MEDIA_CHANGED để thiết lập tiêu đề "Tiếp theo" cho các mục duyệt qua.

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

...

let browseItems = getBrowseItems();

function getBrowseItems() {
  let browseItems = [];
  makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
  .then(function (data) {
    for (let key in data) {
      let item = new cast.framework.ui.BrowseItem();
      item.entity = key;
      item.title = data[key].title;
      item.subtitle = data[key].description;
      item.image = new cast.framework.messages.Image(data[key].poster);
      item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
      browseItems.push(item);
    }
  });
  return browseItems;
}

let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    ....

    // Media browse
    touchControls.setBrowseContent(browseContent);
  });

Thao tác nhấp vào một mục duyệt qua nội dung nghe nhìn sẽ kích hoạt trình chặn LOAD. Thêm mã sau vào trình chặn LOAD để ánh xạ request.media.contentId với request.media.entity từ mục duyệt qua nội dung nghe nhìn:

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      ...

      // Map contentId to entity
      if (request.media && request.media.entity) {
        request.media.contentId = request.media.entity;
      }

      return new Promise((resolve, reject) => {
            ...
        });
    });

Bạn cũng có thể đặt đối tượng BrowseContent thành null để xoá giao diện người dùng Duyệt qua nội dung nghe nhìn.

12. Gỡ lỗi ứng dụng bộ nhận

SDK Bộ thu truyền cung cấp một lựa chọn khác để nhà phát triển dễ dàng gỡ lỗi các ứng dụng nhận bằng cách sử dụng CastDebugLogger API và Công cụ Command và Control (CaC) đi kèm để thu thập nhật ký.

Khởi chạy

Để kết hợp API này, hãy thêm tập lệnh nguồn CastDebugLogger vào tệpindex.html của bạn. Nguồn phải được khai báo trong thẻ <head> sau khi khai báo SDK của Cast receiver.

<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 thêm mã sau để truy xuất phiên bản CastDebugLogger và bật trình ghi nhật ký:

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ật trình ghi nhật ký gỡ lỗi, một lớp phủ hiển thị DEBUG MODE sẽ hiển thị trên trình nhận.

Hình ảnh một video đang phát ở chế độ "DEBUG MODE" thông báo xuất hiện trên nền đỏ ở góc trên bên trái của khung

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 nhật ký các sự kiện của người chơi được kích hoạt bởi SDK Bộ thu CAF và sử dụng nhiều cấp độ trình ghi nhật ký để ghi nhật ký 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 những sự kiện sẽ được ghi lại.

Thêm mã sau vào bên dưới phần khai báo castDebugLogger để ghi lại khi sự kiện CORE của người chơi được kích hoạt hoặc thay đổi về mediaStatus được truyền đi:

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();

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

// 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 báo 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 với nhiều màu sắc. Các phương thức ghi nhật ký sau đây hiện có sẵn, đượ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ý, thông số đầu tiên là một thẻ tuỳ chỉnh. Đây có thể là chuỗi ký tự nhận dạng bất kỳ mà bạn thấy có ý nghĩa. CastDebugLogger sử dụng các thẻ để lọc nhật ký. Việc sử dụng thẻ được giải thích chi tiết hơn ở bên dưới. Tham số thứ hai là thông báo nhật ký.

Để 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,
  request => {
    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');

    // Map contentId to entity
    if (request.media && request.media.entity) {
      request.media.contentId = request.media.entity;
    }

    return new Promise((resolve, reject) => {
      // Fetch content repository by requested contentId
      makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
        .then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            castDebugLogger.error(LOG_TAG, 'Content not found');
            reject();
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);

            // Add metadata
            let metadata = new cast.framework.messages.MovieMediaMetadata();
            metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
      });
    });
  });

Bạn có thể kiểm soát những thông bá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 một thẻ tuỳ chỉnh có cấp độ nhật ký cast.framework.LoggerLevel.DEBUG sẽ hiển thị tất cả các thông báo được thêm cùng với thông điệp nhật ký lỗi, cảnh báo, thông tin và thông điệp gỡ lỗi. Việc bật một thẻ tuỳ chỉnh có cấp WARNING sẽ chỉ hiển thị lỗi và cảnh báo thông điệp nhật ký.

Cấu hình loggerLevelByTags là không bắt buộc. Nếu một thẻ tuỳ chỉnh không được định cấu hình cho cấp trình ghi nhật ký của thẻ đó, 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 mã sau bên dưới trình ghi sự kiện CORE:

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

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

Lớp phủ gỡ lỗi

Trình 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 trên thiết bị truyề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ủ.

Thêm mã sau để xem trước lớp phủ gỡ lỗi trên trình thu nhận.

context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      // Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
      castDebugLogger.setEnabled(true);

      // Show debug overlay
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay
      castDebugLogger.clearDebugLogs();
  }
});

Hình ảnh hiển thị lớp phủ gỡ lỗi, danh sách thông điệp nhật ký gỡ lỗi trên nền trong suốt ở đầu một khung hình video

13. Xin chúc mừng

Giờ đây, bạn đã biết cách tạo ứng dụng bộ thu web tuỳ chỉnh bằng cách sử dụng SDK Bộ thu web truyền.

Để biết thêm thông tin, hãy xem hướng dẫn cho nhà phát triển về Web receiver.