Tích hợp Cast SDK vào ứng dụng Web Sender

Hướng dẫn dành cho nhà phát triển này mô tả cách thêm tính năng hỗ trợ Google Cast vào Web của bạn Ứng dụng gửi bằng SDK Truyền.

Thuật ngữ

Thiết bị di động hoặc trình duyệt là người gửi (người gửi) kiểm soát việc phát; thiết bị Google Cast là trình thu nhận, hiển thị nội dung trên màn hình để phát lại.

SDK Trình gửi web bao gồm hai phần: API khung (cast.framework) và Base API (chrome.cast) Nhìn chung, bạn thực hiện lệnh gọi trên API Khung cấp cao hơn và đơn giản hơn, mà sau đó được xử lý bởi Base API cấp thấp hơn.

Khung trình gửi đề cập đến API Khung, mô-đun và API liên kết các tài nguyên cung cấp trình bao bọc xung quanh chức năng cấp thấp hơn. Chiến lược phát hành đĩa đơn ứng dụng người gửi hoặc ứng dụng Google Cast Chrome đề cập đến một ứng dụng web (HTML/JavaScript) chạy trong trình duyệt Chrome trên thiết bị của người gửi. Ứng dụng Trình nhận web đề cập đến sang ứng dụng HTML/JavaScript chạy trên Chromecast hoặc thiết bị Google Cast.

Khung người gửi sử dụng thiết kế lệnh gọi lại không đồng bộ để thông báo cho người gửi ứng dụng của các sự kiện và để chuyển đổi giữa các trạng thái khác nhau của thời gian hoạt động của ứng dụng Truyền chu kỳ.

Tải thư viện

Để triển khai các tính năng của Google Cast, ứng dụng của bạn cần biết vị trí của SDK Trình gửi web của Google Cast, như minh hoạ dưới đây. Thêm Tham số truy vấn URL loadCastFramework để tải API Khung người gửi web của Google. Tất cả các trang trong ứng dụng của bạn đều phải tham chiếu đến thư viện như sau:

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

Khung

SDK Trình gửi web sử dụng cast.framework.* không gian tên. Không gian tên đại diện cho những thông tin sau:

  • Các phương thức hoặc hàm gọi các thao tác trên API
  • Trình nghe sự kiện cho các chức năng của trình nghe trong API

Khung này bao gồm các thành phần chính sau:

  • CastContext là một đối tượng singleton cung cấp thông tin về Trạng thái truyền hiện tại và kích hoạt các sự kiện cho trạng thái Truyền cũng như phiên Truyền các thay đổi về trạng thái.
  • CastSession đối tượng quản lý phiên -- đối tượng này cung cấp trạng thái thông tin và kích hoạt các sự kiện, chẳng hạn như thay đổi về âm lượng thiết bị, trạng thái tắt tiếng và siêu dữ liệu ứng dụng.
  • Phần tử nút Truyền là một phần tử tùy chỉnh HTML đơn giản giúp mở rộng nút HTML. Nếu nút Truyền được cung cấp không đủ, bạn có thể sử dụng trạng thái Truyền để triển khai nút Truyền.
  • RemotePlayerController cung cấp liên kết dữ liệu để đơn giản hoá việc triển khai trình phát từ xa.

Xem xét Tài liệu tham khảo API Google Cast Web Sender cho nội dung mô tả đầy đủ về không gian tên.

Nút truyền

Thành phần nút Truyền trong ứng dụng của bạn do khung xử lý toàn bộ. Chiến dịch này bao gồm quản lý chế độ hiển thị cũng như xử lý sự kiện nhấp chuột.

<google-cast-launcher></google-cast-launcher>

Ngoài ra, bạn có thể tạo nút theo phương thức lập trình:

document.createElement("google-cast-launcher");

Bạn có thể áp dụng bất kỳ kiểu bổ sung nào, chẳng hạn như kích thước hoặc vị trí, cho khi cần. Dùng thuộc tính --connected-color để chọn màu cho trạng thái Web receiver đã kết nối, và --disconnected-color cho trạng thái ngắt kết nối.

Khởi chạy

Sau khi tải API khung, ứng dụng sẽ gọi trình xử lý window.__onGCastApiAvailable. Bạn phải đảm bảo rằng ứng dụng thiết lập trình xử lý này trên window trước khi tải thư viện người gửi.

Trong trình xử lý này, bạn khởi chạy tương tác Truyền bằng cách gọi hàm setOptions(options) phương thức của CastContext.

Ví dụ:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

Sau đó, bạn sẽ khởi chạy API như sau:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

Trước tiên, ứng dụng truy xuất phiên bản singleton của Đối tượng CastContext do khung này cung cấp. Sau đó, Google Ads sẽ sử dụng setOptions(options) sử dụng CastOptions đối tượng để đặt applicationID.

Nếu bạn đang sử dụng Trình thu nhận nội dung nghe nhìn mặc định mà không cần phải đăng ký, bạn sử dụng hằng số được Web Sender SDK xác định trước, như minh hoạ dưới đây, thay vì applicationID:

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

Điều khiển phương tiện

Sau khi CastContext đã được khởi chạy, ứng dụng có thể truy xuất CastSession bất kỳ lúc nào thời gian sử dụng getCurrentSession().

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

Bạn có thể sử dụng CastSession để tải nội dung nghe nhìn vào Thiết bị truyền đã kết nối bằng cách sử dụng loadMedia(loadRequest). Trước tiên, hãy tạo một MediaInfo! bằng cách sử dụng contentId và contentType cũng như bất kỳ thông tin nào khác liên quan đến nội dung. Sau đó, hãy tạo một LoadRequest từ đó, thiết lập tất cả thông tin có liên quan cho yêu cầu. Cuối cùng, gọi loadMedia(loadRequest) trên CastSession của bạn.

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

Phương thức loadMedia sẽ trả về một Lời hứa có thể được sử dụng để thực hiện bất kỳ thao tác cần thiết nào nhằm có kết quả thành công. Nếu Lời hứa bị từ chối, đối số hàm sẽ là chrome.cast.ErrorCode.

Bạn có thể truy cập vào các biến trạng thái của người chơi trong RemotePlayer. Tất cả lượt tương tác với RemotePlayer, bao gồm cả lệnh gọi lại sự kiện đa phương tiện và được xử lý bằng các RemotePlayerController.

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

RemotePlayerController cung cấp cho ứng dụng toàn quyền kiểm soát nội dung nghe nhìn PHÁT, TẠM DỪNG, DỪNG và XEM đối với nội dung nghe nhìn đã tải.

  • PHÁT/TẠM DỪNG: playerController.playOrPause();
  • DỪNG: playerController.stop();
  • XEM: playerController.seek();

RemotePlayer và RemotePlayerController có thể là được dùng với các khung liên kết dữ liệu, chẳng hạn như Polymer hoặc Angular, để triển khai trình phát từ xa.

Dưới đây là một đoạn mã cho Angular:

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

Trạng thái nội dung nghe nhìn

Trong khi phát nội dung nghe nhìn, nhiều sự kiện khác nhau diễn ra và có thể được ghi lại bằng cài đặt cho nhiều người nghe cast.framework.RemotePlayerEventType sự kiện trên Đối tượng RemotePlayerController.

Để nhận thông tin về trạng thái nội dung nghe nhìn, hãy sử dụng cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED sự kiện này kích hoạt khi chế độ phát thay đổi và khi CastSession.getMediaSession().media thay đổi.

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

Khi các sự kiện như tạm dừng, phát, tiếp tục hoặc tua diễn ra, ứng dụng cần phải hành động trên các thiết bị đó và đồng bộ hoá giữa chính nó và ứng dụng Web nhận trên Cast thiết bị. Xem Thông tin cập nhật về trạng thái để biết thêm thông tin.

Cách hoạt động của tính năng quản lý phiên

SDK truyền giới thiệu khái niệm về phiên Truyền, việc thiết lập kết hợp các bước kết nối với một thiết bị, khởi chạy (hoặc tham gia) một Web ứng dụng receiver, kết nối với ứng dụng đó và khởi tạo một kênh điều khiển nội dung nghe nhìn. Xem Trình nhận web Hướng dẫn về vòng đời của ứng dụng để biết thêm thông tin về các phiên Truyền và vòng đời của Trình thu phát web.

Các phiên hoạt động do lớp học quản lý CastContext! mà ứng dụng của bạn có thể truy xuất qua cast.framework.CastContext.getInstance(). Các phiên riêng lẻ được biểu thị bằng các lớp con của lớp Session. Ví dụ: CastSession biểu thị các phiên có Thiết bị truyền. Ứng dụng của bạn có thể truy cập vào Phiên truyền qua CastContext.getCurrentSession().

Để theo dõi trạng thái phiên, hãy thêm một trình nghe vào CastContext cho thời gian Loại sự kiện CastContextEventType.SESSION_STATE_CHANGED.

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

Đối với trường hợp ngắt kết nối, chẳng hạn như khi người dùng nhấp vào "dừng truyền" nút từ hộp thoại Truyền, bạn có thể thêm trình nghe cho RemotePlayerEventType.IS_CONNECTED_CHANGED loại sự kiện trong trình nghe của bạn. Trong trình nghe, hãy kiểm tra xem RemotePlayer là đã ngắt kết nối. Nếu có, hãy cập nhật trạng thái của người chơi trên máy nếu cần. Ví dụ:

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

Mặc dù người dùng có thể trực tiếp kiểm soát việc chấm dứt tính năng Truyền thông qua tính năng Truyền khung nên bản thân người gửi có thể ngừng truyền bằng cách sử dụng CastSession .

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

Chuyển sự kiện phát trực tiếp

Việc bảo toàn trạng thái phiên là cơ sở của quá trình chuyển luồng, trong đó người dùng có thể di chuyển luồng âm thanh và video hiện có giữa các thiết bị bằng lệnh thoại, Google Home Ứng dụng hoặc màn hình thông minh. Phương tiện ngừng phát trên một thiết bị (nguồn) và tiếp tục phát trên một thiết bị khác (nguồn) đích). Bất kỳ thiết bị Truyền nào có chương trình cơ sở mới nhất đều có thể đóng vai trò là nguồn hoặc đích trong một truyền trực tuyến.

Để lấy thiết bị đích mới trong quá trình truyền, hãy gọi CastSession#getCastDevice() khi cast.framework.SessionState.SESSION_RESUMED sự kiện được gọi.

Xem Chuyển sự kiện phát trực tiếp trên Web receiver để biết thêm thông tin.

Trước
Thiết lập
Tiếp
Thêm các tính năng nâng cao