本頁面由 Cloud Translation API 翻譯而成。

Chrome Android 版 Google Cast

Sam Dutton

想像一下，如果可以使用手機上的網頁應用程式，透過投影機向會議投影機展示簡報，或是使用行動網頁應用程式做為控制器，在電視螢幕上分享圖片、玩遊戲或觀看影片，那該有多好！

Android 版 Chrome 最新版本可讓網站使用 Cast Web SDK，將內容呈現至 Google Cast 裝置。也就是說，您現在可以使用 Web SDK 搭配 Chrome 在 Android 或 iOS 上 (或在電腦上搭配擴充功能) 建立投放端應用程式，也可以建立使用 Android 和 iOS 原生 Cast SDK 的應用程式。(先前，Google Cast 傳送端應用程式需要 Google Cast Chrome 擴充功能，因此在 Android 上，只能透過原生應用程式與 Cast 裝置互動)。

以下簡要介紹如何使用 Web SDK 建構 Cast 傳送端應用程式。如需更完整的資訊，請參閱 Chrome Sender 應用程式開發指南。

所有使用 Cast 的網頁都必須包含 Cast 程式庫：

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

新增回呼來處理 API 可用性，並初始化 Cast 工作階段 (請務必在載入 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);
}

如果您使用的是預設的 Styled Media Receiver 應用程式，而非自行註冊的自訂 Custom Receiver 應用程式，您可以建立如下所示的 SessionRequest：

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

當一或多部裝置可供使用時，系統會執行上述 receiverListener 回呼：

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

根據使用者體驗指南的規定，當使用者點選 Cast 圖示時，請啟動 Cast 工作階段：

chrome.cast.requestSession(onRequestSessionSuccess,
    onRequestSessionError);

function onRequestSessionSuccess(e) {
  session = e;
}

系統會向使用者顯示裝置挑選器：

當網頁已連線並呼叫 requestSession() 時，系統會顯示「路徑詳細資料」對話方塊：

建立投放工作階段後，您可以為所選投放裝置載入媒體，並為媒體播放事件新增事件監聽器：

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

此處的 currentMedia 變數為 chrome.cast.media.Media 物件，可用於控制播放作業：

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


    // ...

媒體播放時會顯示播放/暫停通知：

如果沒有媒體正在播放，通知中只會顯示「停止」按鈕，可停止投放：

chrome.cast.ApiConfig() 的 sessionListener 回呼 (請參閱上方說明) 可讓應用程式加入或管理現有的投放工作階段：

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

如果 Android 版 Chrome 允許從網站投放媒體，但您想停用這項功能，以免預設投放 UI 干擾您自己的 UI，請使用 disableRemotePlayback 屬性，這項屬性可在 Chrome 49 以上版本中使用：

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

替代傳送端和接收端裝置

Cast Web SDK 指南提供範例應用程式的連結，以及 Cast 功能的相關資訊，例如會話管理、文字軌 (字幕和輔助字幕) 和狀態更新。

目前，您只能使用 Cast Web SDK 將內容呈現給 Cast 接收器應用程式，但我們正在進行相關作業，讓您不必使用 Cast SDK (在電腦和 Android 上) 也能使用Presentation API，將任何網頁呈現給 Cast 裝置，而無須向 Google 註冊。與僅限 Chrome 的 Cast SDK 不同，使用標準 API 可讓網頁與支援 API 的其他使用者代理程式和裝置搭配運作。

Presentation API 與 Remote Playback API 是Second Screen Working Group 的一部分，可讓網頁使用第二螢幕來顯示網路內容。

這些 API 可利用各種連上網路的裝置 (包括執行使用者代理程式的連網螢幕)，透過「控制」裝置和「顯示」裝置，支援各種應用程式。

我們會隨時通知您實施進度。

在此期間，如果發現錯誤或有功能要求，請告訴我們：crbug.com/new。

Chrome Android 版 Google Cast

瞭解詳情