Google Cast dành cho Chrome trên Android

Hãy tưởng tượng bạn có thể dùng ứng dụng web trên điện thoại để trình bày một bản trình bày trên máy chiếu hội nghị — hoặc chia sẻ hình ảnh, chơi trò chơi hoặc xem video trên màn hình TV — bằng cách sử dụng ứng dụng web dành cho thiết bị di động làm tay điều khiển.

Bản phát hành Chrome mới nhất trên Android cho phép các trang web hiển thị cho các thiết bị Google Cast bằng cách sử dụng SDK Cast Web. Điều này có nghĩa là giờ đây, bạn có thể tạo ứng dụng trình phát Cast bằng SDK Web với Chrome trên Android hoặc iOS (hoặc trên máy tính bằng tiện ích) cũng như tạo ứng dụng sử dụng SDK Cast gốc cho Android và iOS. (Trước đây, ứng dụng trình phát Google Cast cần có tiện ích Google Cast Chrome, vì vậy, trên Android, bạn chỉ có thể tương tác với các thiết bị Cast từ các ứng dụng gốc.)

Dưới đây là phần giới thiệu ngắn gọn về cách tạo ứng dụng trình phát của tính năng Truyền bằng cách sử dụng SDK Web. Bạn có thể xem thêm thông tin toàn diện trong Hướng dẫn phát triển ứng dụng Chrome Sender.

Tất cả các trang sử dụng tính năng Truyền phải bao gồm thư viện Truyền:

<script
  type="text/javascript"
  src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>

Thêm lệnh gọi lại để xử lý tình trạng có sẵn API và khởi chạy phiên Truyền (hãy nhớ thêm trình xử lý trước khi tải API!):

window['__onGCastApiAvailable'] = function (isLoaded, error) {
  if (isLoaded) {
    initializeCastApi();
  } else {
    console.log(error);
  }
};

function initializeCastApi() {
  var sessionRequest = new chrome.cast.SessionRequest(applicationID);
  var apiConfig = new chrome.cast.ApiConfig(
    sessionRequest,
    sessionListener,
    receiverListener
  );
  chrome.cast.initialize(apiConfig, onInitSuccess, onError);
}

Nếu đang sử dụng ứng dụng Trình nhận nội dung đa phương tiện được tạo kiểu mặc định thay vì ứng dụng Trình nhận tuỳ chỉnh đã đăng ký tự tạo, bạn có thể tạo SessionRequest như sau:

var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
  DEFAULT_MEDIA_RECEIVER_APP_ID);

Lệnh gọi lại receiverListener ở trên được thực thi khi có một hoặc nhiều thiết bị:

function receiverListener(e) {
  if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
    // update UI
  }
}

Chạy một phiên Truyền khi người dùng nhấp vào biểu tượng Truyền, theo yêu cầu của Nguyên tắc về trải nghiệm người dùng:

chrome.cast.requestSession(onRequestSessionSuccess,
    onRequestSessionError);

function onRequestSessionSuccess(e) {
  session = e;
}

Người dùng sẽ thấy một bộ chọn thiết bị:

Hộp thoại chọn thiết bị truyền.

Hộp thoại chi tiết tuyến sẽ xuất hiện khi trang đã được kết nối và gọi requestSession():

Hộp thoại chi tiết về tuyến đường truyền.

Sau khi có phiên truyền, bạn có thể tải nội dung nghe nhìn cho thiết bị Truyền đã chọn và thêm trình nghe cho các sự kiện phát nội dung nghe nhìn:

var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(
  request,
  onMediaDiscovered.bind(this, 'loadMedia'),
  onMediaError
);

function onMediaDiscovered(how, media) {
  currentMedia = media;
  media.addUpdateListener(onMediaStatusUpdate);
}

Biến currentMedia ở đây là một đối tượng chrome.cast.media.Media, có thể dùng để điều khiển chế độ phát:

function playMedia() {
  currentMedia.play(null, success, error);
}


    // ...

Thông báo phát/tạm dừng sẽ xuất hiện khi nội dung nghe nhìn đang phát:

Thông báo phát/tạm dừng nội dung được truyền.

Nếu không có nội dung nghe nhìn nào đang phát, thông báo sẽ chỉ có nút dừng để dừng truyền:

Thông báo dừng truyền.

Lệnh gọi lại sessionListener cho chrome.cast.ApiConfig() (xem ở trên) cho phép ứng dụng của bạn tham gia hoặc quản lý một phiên truyền hiện có:

function sessionListener(e) {
  session = e;
  if (session.media.length !== 0) {
    onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
  }
}

Nếu Chrome trên Android cho phép truyền nội dung đa phương tiện từ trang web của bạn nhưng bạn muốn tắt tính năng này để giao diện người dùng truyền mặc định không can thiệp vào giao diện người dùng của riêng bạn, hãy sử dụng thuộc tính disableRemotePlayback có trong Chrome 49 trở lên:

<video disableRemotePlayback src="..."></video>

Thiết bị Alt Sender và receiver

Hướng dẫn về SDK Cast Web có các đường liên kết đến các ứng dụng mẫu và thông tin về các tính năng của Cast, chẳng hạn như quản lý phiên, bản lồng tiếng (dành cho phụ đề và chú thích) và thông tin cập nhật trạng thái.

Hiện tại, bạn chỉ có thể trình bày cho Ứng dụng nhận của Cast bằng cách sử dụng SDK Cast Web, nhưng chúng tôi đang nỗ lực để cho phép sử dụng API Trình bày mà không cần SDK Cast (trên máy tính và Android) để trình bày bất kỳ trang web nào cho thiết bị Cast mà không cần đăng ký với Google. Không giống như SDK Truyền chỉ dành cho Chrome, việc sử dụng API chuẩn sẽ cho phép trang hoạt động với các tác nhân người dùng và thiết bị khác hỗ trợ API.

Presentation API, cùng với Remote Playback API, là một phần trong nỗ lực của Nhóm làm việc về màn hình thứ hai nhằm cho phép các trang web sử dụng màn hình thứ hai để hiển thị nội dung web.

Các API này tận dụng phạm vi thiết bị đang trực tuyến — bao gồm cả màn hình được kết nối chạy một tác nhân người dùng — để hỗ trợ nhiều ứng dụng với thiết bị "điều khiển" và thiết bị "hiển thị".

Chúng tôi sẽ thông báo cho bạn về tiến trình triển khai.

Trong thời gian chờ đợi, vui lòng cho chúng tôi biết nếu bạn phát hiện lỗi hoặc có yêu cầu về tính năng: crbug.com/new.

Tìm hiểu thêm