Hình ảnh phụ

Nhà phát triển tính năng truyền có thể thêm hình ảnh cung cấp thông tin (giao diện người dùng) vào giao diện người dùng cho các ứng dụng âm thanh và video. Xem các định dạng hình ảnh được hỗ trợ để biết khả năng tương thích.

Hình ảnh phụ xuất hiện ở trên cùng bên phải của màn hình và có thể dùng để hiển thị đồ hoạ cùng với thông tin bổ sung về nội dung hiện đang phát, chẳng hạn như định dạng nội dung, tín hiệu cuộc gọi trên đài phát thanh hoặc mức phân loại chương trình truyền hình. Hình ảnh phụ vẫn xuất hiện trên màn hình miễn là tính năng này được bật cho nội dung hiện tại và trình phát không ở trạng thái rảnh.

Bảng 1 cho thấy trải nghiệm của người dùng khi tính năng này được bật trên các loại thiết bị và chức năng điều khiển áp dụng. Chi tiết triển khai và tích hợp có chút khác biệt giữa ứng dụng âm thanh và video. Hãy xem các phần dưới đây để tích hợp tính năng này trong ứng dụng Web receiver.

Bảng 1: Giao diện người dùng của hình ảnh phụ theo nội dung và loại thiết bị
Loại thiết bị Nội dung âm thanh Nội dung video
Chromecast Hình ảnh phụ trên thiết bị phần cứng Chromecast cho nội dung âm thanh. Hình ảnh phụ trên thiết bị phần cứng Chromecast cho nội dung video.
Chromecast có Google TV Hình ảnh phụ trên Chromecast bằng các thiết bị phần cứng Google TV cho nội dung âm thanh. Hình ảnh phụ trên Chromecast bằng các thiết bị phần cứng Google TV cho nội dung video.
Màn hình thông minh Hình ảnh phụ trên màn hình thông minh cho nội dung âm thanh. Hình ảnh phụ trên màn hình thông minh cho nội dung video.
Điều khiển từ xa cho màn hình thông minh Hình ảnh phụ trên điều khiển từ xa của màn hình thông minh cho nội dung âm thanh. Lưu ý: Hình ảnh phụ không được hỗ trợ trên điều khiển từ xa cho nội dung video.

Âm thanh

Tổng quan

Hình ảnh phụ cho nội dung âm thanh được điều khiển bởi siêu dữ liệu của nội dung được tải. Sau khi tải mục nội dung đa phương tiện, mọi thay đổi tiếp theo đối với thuộc tính secondaryImage của siêu dữ liệu sẽ được phản ánh trong giao diện người dùng.

Nếu một màn hình thông minh được dùng làm điều khiển từ xa cho âm thanh, thì hình ảnh phụ cũng sẽ xuất hiện trên giao diện người dùng của màn hình thông minh khi được đặt.

Triển khai

Để đặt, xoá hoặc cập nhật hình ảnh phụ, bạn cần sửa đổi thuộc tính secondaryImage của MusicTrackMediaMetadata. Thuộc tính này sẽ lấy đối tượng Image bằng cách điền URL mô tả vị trí lưu trữ hình ảnh phụ.

Trong mẫu dưới đây, hình ảnh phụ được đặt trong trình chặn load. Khi trình phát hoàn tất quá trình tải nội dung, hình ảnh phụ sẽ hiển thị.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      loadRequestData.media.metadata =
          new cast.framework.messages.MusicTrackMediaMetadata();

      // Set image on secondaryImage field of metadata object
      loadRequestData.media.metadata.secondaryImage =
          new cast.framework.messages.Image('https://www.image.png');

      return loadRequestData;
    });

Để cập nhật hình ảnh phụ trong khi phát, ứng dụng phải sử dụng PlayerManager để có được MediaInformation bằng cách gọi getMediaInformation. Sau đó, ứng dụng sẽ sửa đổi metadata bằng cách cập nhật thuộc tính secondaryImage thành giá trị mong muốn. Cuối cùng, việc gọisetMediaInformation bằng thông tin mới sẽ cập nhật giao diện người dùng. Bạn có thể sử dụng phương thức này để xử lý các thay đổi về siêu dữ liệu được cung cấp thông qua các bản cập nhật như các sự kiện EMSG hoặc ID3 trong khi phát.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
  let mediaInformation = playerManager.getMediaInformation();
  mediaInformation.metadata.secondaryImage =
      new cast.framework.messages.Image('http://anotherimage.png');
  playerManager.setMediaInformation(mediaInformation);
});

Để huỷ đặt hình ảnh phụ, hãy thiết lập thuộc tính secondaryImage thành rỗng trên đối tượng siêu dữ liệu.

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

Video

Tổng quan

Đối với nội dung video, hình ảnh phụ được đặt và xoá bằng UiManager. Hình ảnh phụ được hiển thị với lớp phủ điều khiển video.

Triển khai

Để đặt hình ảnh phụ, ứng dụng phải nhận được một thực thể của UiManager và gọi setSecondaryImage. Mã này có hai thông số: SecondaryImagePosition và URL của hình ảnh. Việc đặt hình ảnh phụ có thể được thực hiện bất cứ lúc nào nhưng sẽ chỉ hiển thị khi người dùng kích hoạt lớp phủ trên nền trước.

/**
 * Sets the image url for the secondary image overlay. Replaces any image that
 * was previously set.
 */
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
    'http://www.image.png');

Bạn có thể xoá hình ảnh phụ bằng cách đặt URL hình ảnh thành null hoặc một chuỗi trống.

// To  clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);

Các bước tiếp theo

Bài học này kết thúc những tính năng mà bạn có thể thêm vào Bộ thu web. Giờ đây, bạn có thể tạo ứng dụng người gửi trên iOS, Android hoặc Web.

Trước
Trực tiếp
Tiếp
Trình ghi nhật ký gỡ lỗi truyền