為 Cast 接收器新增即時支援

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

1. 總覽

Google Cast 標誌

本程式碼研究室會說明如何建構使用 Cast Live Breaks API 的自訂 Web Receiver 應用程式。

什麼是 Google Cast?

Google Cast 可讓使用者將內容從行動裝置投放到電視上。之後,使用者就能利用行動裝置做為電視媒體播放的遙控器。

Google Cast SDK 可讓你擴充應用程式,以控制電視或音響系統。Cast SDK 可讓您根據 Google Cast 設計檢查清單新增必要的 UI 元件。

我們提供了 Google Cast 設計檢查清單,讓您在所有支援平台上都能享有簡單且可預測的投放體驗。

我們要建構的是什麼?

完成本程式碼研究室後,您將使用全新「直播」功能來建立 Cast 接收器。

課程內容

  • 如何在 Cast 中處理即時影片內容。
  • 如何設定 Cast 支援的各種即時串流情境。
  • 如何在直播中加入節目資料

軟硬體需求

功能

  • 您必須先具備之前的網站開發相關知識。
  • 先前建構 Cast 傳送者和接收器應用程式的體驗。

您會如何使用這個教學課程?

唯讀 閱讀並完成練習

您對於建構網路應用程式的體驗如何?

新手 中級 專業知識

2. 取得程式碼範例

您可以將所有程式碼範例下載至電腦上...

將下載的 ZIP 檔案解壓縮

3. 在本機部署接收器

如要透過 Cast 裝置使用網路接收器,你必須將網路託管於投放裝置可連結的地方。如果您已經有支援 https 的伺服器,請略過下列操作說明並記下網址,因為下一節將需要用到。

如果您沒有可用的伺服器,可以使用 Firebase 託管ngrok

執行伺服器

選好服務之後,請前往 app-start 啟動您的伺服器。

記下代管接收器的網址。您將在下一節實作這項功能。

4. 在 Cast Developer Console 中註冊應用程式

您必須註冊應用程式,才能在 Chromecast 裝置上執行本程式碼研究室內建的自訂接收器。註冊應用程式之後,您會收到應用程式 ID,您的應用程式傳送端應用程式必須用來執行 API 呼叫,例如啟動接收器應用程式。

Google Cast SDK Developer Console 的圖片,以方框特別標出「新增應用程式」按鈕

按一下 [新增應用程式]。

「新增接收器應用程式」畫面的圖片,醒目顯示的是「自訂接收器」選項

選取 [自訂接收器],這是我們所建構的。

「新增自訂接收器」畫面的圖片,其中包含使用者在「接收器應用程式網址」欄位中輸入的網址

輸入新收件者的詳細資料,請務必使用您最後輸入的網址

記下新申請者獲派的申請 ID

此外,您必須註冊 Google Cast 裝置,才能讓裝置存取接收器應用程式,然後再進行發布。接收器應用程式發布後,可供所有 Google Cast 裝置使用。在這個程式碼研究室中,建議您與未發布的接收器應用程式搭配使用。

Google Cast SDK Developer Console 的圖片,以方框特別標出「新增裝置」按鈕

按一下 [新增裝置]

「新增投放接收器裝置」對話方塊的圖片

輸入顯示在 Cast 裝置背面的序號,並輸入描述性名稱。在存取 Google Cast SDK Developer Console 時,您也可以在 Chrome 中投放螢幕,藉此找出您的序號

接收器和裝置需要 5 到 15 分鐘才能完成測試。等候 5 至 15 分鐘後,您必須重新啟動 Cast 裝置。

5. 投放簡易的直播內容

圖片顯示 Android 手機在播放圖片。畫面下方顯示「投放至客廳」訊息,上方有一組影片播放器控制項上方。播放同一部影片的原尺寸螢幕圖片

開始進行本程式碼研究室之前,建議您先參閱即時開發人員指南,其中大致介紹了最新直播功能。

針對我們的傳送者,我們會使用 CAF 接收器偵錯偵錯 來啟動投放工作階段。接收端旨在自動開始直播。

接收端包含兩個檔案。一個基本的 HTML 檔案,名為 receiver.html,可初始化 Cast 內容,以及一個用於投放媒體播放器的預留位置。您不需要修改這個檔案。另外還有一個名為 receiver.js 的檔案,其中會包含接收器的所有邏輯。

首先,請在 Chrome 中開啟網路寄件者。輸入您在 Cast SDK Developer Console 上提供的接收端應用程式 ID,然後按一下 [設定]。

在接收器中,我們需要新增一些邏輯,讓 Cast Application Framework (CAF) 開始串流。這只需要一行程式碼,將以下這行程式碼新增至 receiver.js 中的載入攔截器:

request.media.streamType = cast.framework.messages.StreamType.LIVE;

將串流類型設為 LIVE 會啟用 CAF 的即時 UI。在這種情況下,只要直播加入,CAF 就會自動跳到串流的即時邊緣。我們尚未設定任何節目指南資料,因此拖曳列代表串流所搜尋範圍的全長。

將您的變更儲存至 receiver.js,然後在網頁的任何位置按一下滑鼠右鍵,然後選取 [投放] 即可在網路寄件者進行投放工作階段。系統會立即開始播放影片。

6. 新增計劃指南資料

CAF 現已支援即時內容,現在可支援在程式和傳送程式應用程式中顯示節目指南資料的功能。我們強烈建議內容供應者在節目應用程式中加入節目中繼資料,藉此提供更優質的使用者體驗,特別是長篇直播等電視頻道等直播節目。

您現在可以在單一串流中為 CAF 提供多個節目的中繼資料。只要在 MediaMetadata 物件設定開始時間戳記和時間長度,接收器就會根據播放器在串流中的目前位置,自動更新寄件者和收件者顯示的中繼資料。

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

在本程式碼研究室中,我們會使用範例中繼資料服務來提供直播活動的中繼資料。如要建立計劃中繼資料清單,我們必須先建立容器容器會保留單一媒體串流的 MediaMetadata 物件清單。每個 MediaMetadata 物件代表容器中的單一區段。如果播放頭位於指定版面的範圍內,中繼資料就會自動複製到媒體狀態。在 receiver.js 檔案中加入以下程式碼,即可從服務下載範例中繼資料,並將容器提供給 CAF:

/**
 * Gets the current program guide data from our Google Cloud Function
 * @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
 */
function loadGuideData() {
  return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
      .then((response) => response.json())
      .then(function(data) {
        const containerMetadata =
          new cast.framework.messages.ContainerMetadata();
        containerMetadata.sections = data;

        playerManager.getQueueManager().setContainerMetadata(containerMetadata);
      });
}

此外,也可對函式新增呼叫,以在載入攔截器中載入輔助資料:

loadGuideData();

儲存 receiver.js 檔案並啟動 Cast 工作階段。畫面上應該會顯示節目開始時間、結束時間和標題。

當播放頭轉換為容器中的新部分時,系統會向所有寄件者傳送新的媒體狀態訊息。因此,建議您更新媒體狀態攔截器中的容器中繼資料,以便隨時取得最新的程式資訊。在我們的範例服務中,我們會傳回目前的計劃中繼資料,以及接下來兩個程式的中繼資料。若要更新串流的中繼資料,只要建立新容器並呼叫 setContainerMetadata 如上例所示即可。

7. 停用跳轉

大部分影片串流都由多個片段組成,當中包含各種影格。除非另有指定,否則 CAF 會讓使用者在這些區隔中搜尋。如要停用搜尋功能,我們必須在接收端新增兩段程式碼片段。

在載入攔截器中移除 SEEK 支援的媒體指令。這樣就能停用所有行動寄件者和觸控介面的搜尋功能。

playerManager.removeSupportedMediaCommands(cast.framework.messages.Command.SEEK, true);

接著,我們必須停用語音指令,讓觀眾在直播影片中略過,例如「Ok Google,跳過 60 秒」。如要停用語音搜尋,我們會加入搜尋攔截器。每次要求搜尋要求時,系統就會攔截這個攔截器。如果 SEEK 支援的媒體指令被停用,攔截器會拒絕尋找要求。將以下程式碼片段新增至 receiver.js 檔案:

/**
 * Seek a seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 * @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK,
    (seekData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
      cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekData;
    }
);

儲存 receiver.js 檔案並啟動 Cast 工作階段。且不能繼續在直播中跳轉。

8. 恭喜

現在您已瞭解如何使用最新的 Cast Receiver SDK 建立自訂接收器應用程式。

詳情請參閱即時串流開發人員指南。