Tạo Bộ thu web tùy chỉnh

1. Tổng quan

Biểu tượng của 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 Bộ thu web tùy chỉnh để phát nội dung trên thiết bị Hỗ trợ 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 sang TV. Sau đó, người dùng có thể sử dụng trình duyệt Chrome trên thiết bị di động hoặc máy tính để bàn 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 điều khiển các thiết bị hỗ trợ Google Cast (ví dụ: TV hoặc hệ thống âm thanh). SDK Truyền 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 để giúp trải nghiệm người dùng Truyề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 tại đây.

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

Sau khi kết thúc lớp học lập trình này, bạn sẽ có ứng dụng HTML5 đóng vai trò là bộ thu tuỳ chỉnh của riêng bạn và 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ề một 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 được 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

  • 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 định cấu hình với quyền truy cập 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 về phát triển web trước đây.
  • 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?

Chỉ đọc qua Đọc và hoàn thành các 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 sử dụng Trung cấp Thành thạo

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

Người mới sử dụng 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 trình nhận cục bộ

Để có thể sử dụng bộ thu web với 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ó thể truy cập. Nếu bạn đã có 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ó sẵn 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à bạn chọn, hãy chuyển đến app-start rồi khởi động máy chủ của bạn.

Ghi lại URL của người nhận được lưu trữ. Bạn sẽ 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 nhận tuỳ chỉnh, như được tích hợp 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ột ID ứng dụng mà ứng dụng người gửi của bạn 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.

Hình ảnh bảng điều khiển dành cho nhà phát triển SDK Google Cast, trong đó nút 'Thêm ứng dụng mới' được làm nổi bật

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

Hình ảnh màn hình "Ứng dụng nhận mới" trong đó tùy chọn "Người nhận tùy chỉnh" được làm nổi bật

Chọn "Custom receiver" (Bộ thu tuỳ chỉnh), đây là công trình chúng tôi đang phát triển.

Hình ảnh màn hình "New Custom receiver" (Trình thu thập tuỳ chỉnh mới) cho thấy một URL mà người dùng đang nhập vào trường "Application Application URL" (URL ứng dụng nhận)

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 đã nhận

trong phần cuối cùng. Ghi lại ID ứng dụng được chỉ định cho người 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ị đó có thể truy cập vào ứng dụng nhận của bạn trước khi xuất bản. Sau khi bạn xuất bản ứng dụng nhận, ứng dụng đó sẽ có sẵn cho 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.

Hình ảnh bảng điều khiển dành cho nhà phát triển SDK của Google Cast, trong đó nút "Thêm thiết bị mới" được làm nổi bật

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

Hình ảnh hộp thoại "Thêm thiết bị nhận nội dung truyền"

Nhập số sê-ri in ở mặt sau 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 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

Bạn sẽ mất 5 đến 15 phút trước khi thiết bị nhận và thiết bị sẵn sàng để thử nghiệm. Sau khi đợi 5-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

Biểu tượng Google Chrome

Trong khi chúng ta chờ ứng dụng nhận mới sẵn sàng để thử nghiệm, hãy cùng xem ứng dụng nhận hoàn thành mẫu sẽ trông như thế nào. Bộ thu mà chúng ta sẽ tạo 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 (chúng ta 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 thẻ "Cast Connect & Logger Controls" (Điều khiển trình kết nối và Trình ghi nhật ký) của Công cụ Command and Control (CaC)

  1. Bạn sẽ thấy Công cụ CaC của chúng tôi.
  2. Sử dụng mã nhận mẫu "CC1AD845" mặc định và nhấp vào nút "Đặt mã ứng dụng".
  3. 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 thẻ "Điều khiển trình kết nối và trình ghi nhật ký" của Công cụ điều khiển và lệnh (CaC) cho biết thiết bị đã kết nối với một ứng dụng Trình nhận

  1. Di chuyển đến thẻ "Tải nội dung nghe nhìn" ở trên cùng.

Hình ảnh thẻ "Media Media" (Tải nội dung nghe nhìn) của Công cụ Command and Control (CaC)

  1. Nhấp vào nút "Tải theo nội dung" để phát video mẫu.
  2. Video sẽ bắt đầu phát trên thiết bị Google Cast để cho thấy chức năng cơ bản của bộ thu 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 hỗ trợ cho Google Cast vào ứng dụng bắt đầ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:

  • ứng dụng 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 trình nhận chạy trên thiết bị Google Cast.

Giờ đây, bạn đã sẵn sàng xây dựng trên dự án khởi động bằng cách sử dụng trình chỉnh sửa văn bản yêu thích:

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

Lưu ý rằng trong quá trình bạn tham gia lớp học lập trình này, http-server sẽ nhận các thay đổi mà bạn thực hiện. Nếu bạn nhận thấy chế độ này không hoạt động, 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 sẽ khởi tạo phiên Truyền và sẽ chờ cho đến khi có yêu cầu LOAD (nói cách khác là phát lại một phần nội dung đa phương tiện) từ người gửi đến.

Ứ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 mọi logic để giúp bộ thu 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. Hiện tại, tệp này trống và chúng tôi sẽ thêm vào tệp 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, tệp này chỉ là một tệp trống, nhưng chúng ta sẽ chuyển tệp đó thành một bộ thu Truyền đầy đủ chức năng chỉ với vài dòng mã trong phần tiếp theo.

7. Bộ thu Cast cơ bản

Bộ thu Truyền cơ bản sẽ khởi động phiên Truyền khi khởi động. Điều này cần thiết để cho tất cả ứng dụng người gửi được kết nối biết rằng người nhận đã thành công. Ngoài ra, SDK mới này còn được định cấu hình sẵn để xử lý nội dung phương tiện truyền trực tuyến tốc độ bit thích ứng (sử dụng DASH, HLS và Smooth Streaming) và các tệp MP4 đơn giản. 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, để cung cấp cho SDK bộ thu có không gian để hiển thị giao diện người dùng của người nhận mặc định đang được phân phối với tập lệnh 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 vào toàn bộ SDK bộ thu
  • lưu trữ tham chiếu đến PlayerManager, đối tượng xử lý việc phát và cung cấp cho bạn tất cả các nội dung hấp dẫn mà bạn cần để cắm logic tùy chỉnh của riêng mình
  • khởi chạy SDK bằng cách gọi start() trên CastReceiverContext

Thêm nội dung sau vào js/receiver.js.

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

context.start();

8. Truyền nội dung video "cơ bản"

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.

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

Hình ảnh thẻ &quot;Cast Connect & Logger Controls&quot; (Điều khiển trình kết nối và Trình ghi nhật ký) của Công cụ Command and Control (CaC)

Hãy nhớ thay thế Mã ứng dụng của bạn như đã đăng ký trước đó trong trường và 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.

Truyền nội dung nghe nhìn

Ở cấp độ cao, để phát nội dung nghe nhìn trên thiết bị Truyền, bạn cần xảy ra:

  1. Người gửi tạo một đối tượng MediaInfo JSON qua SDK truyền để mô hình hoá một mục nội dung đa phương tiện.
  2. Người gửi kết nối với thiết bị Truyền để chạy ứng dụng nhận.
  3. Bộ thu tải đối tượng MediaInfo thông qua yêu cầu LOAD để phát nội dung.
  4. Bộ thu theo dõi và theo dõi trạng thái nội dung nghe nhìn.
  5. Người gửi gửi lệnh phát tới người nhận để kiểm soát việc phát dựa trên tương tác của người dùng với ứng dụng.

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

Người gửi trong thực tế sử dụng giá trị nhận dạng nội dung đa phương tiện dành riêng cho ứng dụng trong MediaInfo.contentId. Bộ thu 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 để phân giải URL thành phần thực tế và đặt thành MediaInfo.contentUrl.. Bộ thu cũng sẽ xử lý các thao tác như thu nạp giấy phép DRM hoặc chèn thông tin về điểm chèn quảng cáo.

Chúng ta sẽ mở rộng bộ thu của bạn để thực hiện thao tác tương tự 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.

Hình ảnh thẻ &quot;Điều khiển trình kết nối và trình ghi nhật ký&quot; của Công cụ điều khiển và lệnh (CaC) cho biết thiết bị đã kết nối với một ứng dụng Trình nhận

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

Hình ảnh thẻ &quot;Media Media&quot; (Tải nội dung nghe nhìn) của Công cụ Command and Control (CaC)

Vì vậy, SDK bộ thu nhận có thể xử lý ngay lập tức:

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

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

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

Phù hợp với cách hầu hết các nhà phát triển tương tác với Bộ thu truyền trong các ứng dụng thực tế, chúng tôi sẽ sửa đổi bộ thu để xử lý các yêu cầu LOAD tham chiếu đến nội dung nghe nhìn dự kiến bằng khoá API thay vì gửi qua URL thành phần có thể phát.

Các ứng dụng thường làm như vậ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ý xác thực, logic kinh doanh hoặc lệnh gọi API khác trực tiếp trên bộ thu.

Chức năng này chủ yếu được triển khai trong phương thức PlayerManager setMessageInterceptor(). Thao tác này cho phép bạn chặn các thông báo đến theo loại và sửa đổi các thông báo đó trước khi đế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ẽ thực hiện những việc sau:

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

API mẫu được cung cấp giới thiệu các nội dung hấp dẫn của SDK để tùy chỉnh các tác vụ của bộ thu phổ biến, trong khi vẫn dựa trên trải nghiệm chủ yếu ngay từ đầu.

API mẫu

Trỏ 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 cho 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 kết hợp được lưu trữ trong các vùng chứa mp4 phân mảnh.

{
  "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"
  },

  [...]

}

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

Chặn yêu cầu LOAD

Trong bước này, chúng ta sẽ tạo một trình chặn tải có 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à thiết lập siêu dữ liệu. Trong các phần sau, chúng ta sẽ tuỳ chỉnh các thông số MediaInformation để chỉ định loại nội dung.

Thêm mã sau vào tệp js/receiver.js, ngay trước lệnh gọi đến 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 thiết lập thuộc tính media của yêu cầu tải cho nội dung DASH.

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

Giờ đây, khi đã chuẩn bị trình chặn tải, chúng ta sẽ chỉ định loại nội dung cho broadcast receiver. Thông tin này sẽ cung cấp cho người nhận URL của danh sách phát chính và loại MIME 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ến hành Thử nghiệm việc đó để thử tải nội dung DASH. Nếu bạn muốn kiểm thử việc tải nội dung HLS, hãy xem bước tiếp theo.

Sử dụng nội dung HLS 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ư đã thực hiện ở 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ộ thu được định cấu hình để phát luồng HLS, loại vùng chứa mặc định dự kiến là truyền tải (TS). Do đó, broadcast receiver sẽ cố gắng mở các 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 phải được sửa đổi với các thuộc tính bổ sung để broadcast receiver biết 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 của bạn 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 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ở Command and Control (CaC) Tool và đặt ID ứng dụng của bạn thành ID ứng dụng của người nhận. Chọn thiết bị của bạn bằng nút Truyền.

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

Hình ảnh thẻ &quot;Media Media&quot; (Tải nội dung nghe nhìn) của Công cụ Command and Control (CaC)

Giả sử mọi thứ hoạt động tốt với nội dung sửa đổi đối với bộ thu, trình chặn nên xử lý 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 nút "Tải bằng nội dung" để xem phương tiện của bạn có phát đúng cách không. Vui lòng thay đổi Content ID thành mã 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à thiết bị có chức năng cảm ứng, cho phép các ứng dụng nhận 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 của bạn khi khởi chạy trên màn hình thông minh và cách tuỳ chỉnh điều khiển trình phát.

Truy cập vào các chế độ kiểm soát 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 cách sử dụng cast.framework.ui.Controls.GetInstance(). Thêm mã sau vào tệp js/receiver.js ở trên context.start():

...

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

context.start();

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

context.start({ touchScreenOptimizedApp: true });

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

Đ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ụ bên dưới.

Hình ảnh video đang phát có lớp điều khiển trên giao diện người dùng ở trên cùng

  1. --playback-logo-image
  2. MediaMetadata.subtitle
  3. MediaMetadata.title
  4. MediaStatus.currentTime
  5. MediaInformation.duration
  6. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.QUEUE_PREV
  7. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.SEEK_BACKWARD_30
  8. PLAY/PAUSE
  9. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.SEEK_FORWARD_30
  10. 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 trên giao diện người dùng cho Màn hình thông minh sẽ xuất hiện như bên dưới:

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

  1. --playback-logo-image
  2. MusicTrackMediaMetadata.albumName
  3. MusicTrackMediaMetadata.title
  4. MusicTrackMediaMetadata.albumArtist
  5. MusicTrackMediaMetadata.images[0]
  6. MediaStatus.currentTime
  7. MediaInformation.duration
  8. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.NO_BUTTON
  9. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.QUEUE_PREV
  10. PLAY/PAUSE
  11. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.QUEUE_NEXT
  12. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.NO_BUTTON

Cập nhật 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ó hiển thị 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ư bên dưới:

Hình ảnh các nút điều khiển trình phát nội dung đa phương tiện: thanh tiến trình, nút &quot;Phát&quot;, &quot;Bỏ qua tiến&quot; và nút &quot;Bỏ qua lùi&quot;

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ư bên dưới:

Hình ảnh các nút điều khiển trình phát nội dung đa phương tiện: thanh tiến trình, nút &quot;Phát&quot;, &quot;Bỏ qua tiến&quot; và nút &quot;Bỏ qua phía sau&quot;, nút &quot;Hàng đợi trước đó&quot; và &quot;Hàng đợi tiếp theo&quot; đang 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ư bên dưới:

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, nút &quot;Phát&quot; và nút &quot;Hàng đợi trước đó&quot; và &quot;Hàng đợi tiếp theo&quot; đang bật

Khi có bản phụ đề, nút phụ đề sẽ luôn xuất hiện tại SLOT_1.

Hình ảnh các nút điều khiển trình phát nội dung đa phương tiện: thanh tiến trình, nút &quot;Phát&quot;, &quot;Bỏ qua tiến&quot; và nút &quot;Bỏ qua phía sau&quot;, nút &quot;Hàng đợi trước đó&quot; và &quot;Hàng đợi tiếp theo&quot; và nút &quot;Phụ đề&quot; đang bật

Để linh động thay đổi giá trị của supportedMediaCommands sau khi bắt đầu ngữ cảnh trình nhận, 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á một lệnh hiện có bằng removeSupportedMediaCommands.

Tùy chỉnh nút điều khiển

Bạn có thể điều 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 khe đầu tiên của các tuỳ chọn đ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 duyệt 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á nội dung bổ sung trên các thiết bị cảm ứng. Để triển khai việc này, bạn cần sử dụng PlayerDataBinder để thiết lập giao diện người dùng BrowseContent. Sau đó, bạn có thể điền dữ liệu này bằng BrowseItems dựa trên nội dung bạn muốn hiển thị.

Duyệt qua nội dung

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

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

  1. BrowseContent.title
  2. 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 các thành phần hình ảnh của bạn. SDK bộ thu CAF hỗ trợ 3 tỷ lệ khung hình: SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9.

Duyệt xem mục

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 Duyệt Nội dung hiển thị hai hình thu nhỏ video và một phần của một phần ba

  1. BrowseItem.image
  2. BrowseItem.duration
  3. BrowseItem.title
  4. BrowseItem.subtitle

Đặt dữ liệu Duyệt xem nội dung nghe nhìn

Bạn có thể cung cấp danh sách nội dung phương tiện để duyệt 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 để đặt các mục duyệt qua có tiêu đề "Tiếp theo".

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

Nhấp vào một mục duyệt qua nội dung đa phương tiệ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 đến request.media.entity từ mục duyệt qua nội dung đa phương tiệ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 xem nội dung đa phương tiện.

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

SDK Bộ thu truyền cung cấp cho các nhà phát triển một tuỳ chọn khác để dễ dàng gỡ lỗi ứng dụng nhận bằng cách sử dụng API CastDebugLogger và một Công cụ điều khiển và lệnh (CaC) đồng hành để ghi 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ệp index.html của bạn. Nguồn phải được khai báo trong thẻ <head> sau khi khai báo SDK Bộ thu truyền.

<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ẽ xuất hiện trên thiết bị nhận.

Hình ảnh video đang phát thông báo &#39;DEBUG MODE&quot; (Gỡ lỗi chế độ) xuất hiện trên nền đỏ ở góc trên bên trái khung hình

Ghi lại sự kiện người chơi

Bằng cách 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 CAF kích hoạt 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 những sự kiện sẽ được ghi nhật ký.

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

// 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 đ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 người nhận với các màu khác nhau. Các phương thức ghi nhật ký sau đây đều 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 pháp ghi nhật ký, tham số đầu tiên là một thẻ tùy chỉnh. Đây có thể là chuỗi xác định bất kỳ mà bạn thấy có ý nghĩa. CastDebugLogger sử dụng thẻ để lọc nhật ký. Dưới đây là nội dung giải thích chi tiết về cách sử dụng thẻ. Thông 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 mỗi 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 vào lỗi, cảnh báo, thông tin và gỡ lỗi thông báo nhật ký. Việc bật thẻ tùy chỉnh có cấp WARNING sẽ chỉ hiển thị lỗi và cảnh báo cho thông 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ẻ tùy chỉnh cho cấp độ trình ghi nhật ký, 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 nhật ký 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 ghi gỡ lỗi truyền cung cấp lớp phủ gỡ lỗi trên trình nhận để hiển thị thông điệp nhật ký tuỳ chỉnh của bạn trên thiết bị truyền. Hãy dùng showDebugLogs để chuyển đổi lớp phủ gỡ lỗi và clearDebugLogs để xóa 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 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 minh hoạ lớp phủ gỡ lỗi, danh sách thông báo nhật ký gỡ lỗi trên nền mờ ở đầu khung video

13. Xin chúc mừng

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

Để 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ề Bộ thu trên web.