為 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 中處理即時影片內容。
  • 如何設定投放功能支援的各種直播活動。
  • 如何在直播中加入節目資料

軟硬體需求

  • 最新的 Google Chrome 瀏覽器。
  • NPM
  • Google Cast 裝置,例如已設定網路連線的 ChromecastAndroid TV
  • 具備 HDMI 輸入端的電視或螢幕,或 Google Home Hub

功能

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

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

唯讀閱讀 閱讀並完成練習

你對建構網頁應用程式體驗的體驗如何?

新手 中級 專業知識

2. 取得程式碼範例

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

將下載的 ZIP 檔案解壓縮。

3. 在本機部署接收器

如要透過投放裝置使用接收器,你必須將 Cast 託管在 Cast 裝置所在的位置。如果您已經有支援 https 的伺服器,只要略過下列操作說明即可,只要記住網址即可。在下一個部分中,您將需要這麼做。

如果您沒有可用的伺服器,請勿煩惱。您可以安裝 node.jshttp-serverngrok 節點模組。

npm install -g http-server
npm install -g ngrok

執行伺服器

如果你使用 http-server,請前往主控台並執行以下操作:

cd app-done
http-server

畫面應如下所示:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

請注意使用的本機通訊埠,然後在新的終端機中執行下列操作,以使用 ngrok 透過 HTTPS 公開本機接收器:

ngrok http 8080

這項操作會將 ngrok 通道設為本機 HTTP 伺服器,以指派給全球的 HTTPS 安全端點,供您在下一個步驟中使用 (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

在程式碼研究室期間,您應讓 ngrokhttp-server 保持執行。您所做的本機變更會立即生效。

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

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

Google Cast SDK Developer Console 的圖片,以方框特別標出「##9; New New Application'」按鈕

按一下「新增應用程式」

'新增接收端應用程式'畫面,以 '自訂接收器'選項醒目顯示

選取「自訂接收器」,也就是我們正在建構的內容。

'新增自訂接收器'畫面:使用者輸入「#39;Receiver 應用程式網址'」欄位的網址

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

一節。記下指派給新接收者的申請 ID

你必須先註冊 Google Cast 裝置,才能讓裝置存取接收器應用程式。發布應用程式後,該應用程式將適用於所有 Google Cast 裝置。在這個程式碼研究室中,建議您與未發布的接收端應用程式搭配使用。

Google Cast SDK Developer Console 的圖片,以方框特別標出「' Add Device」' 按鈕

按一下「新增裝置」。

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

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

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

5. 投放簡易的直播內容

圖片顯示 Android 手機在播放影片時,訊息會顯示在投放至客廳的畫面中 '「投放至客廳」'圖示位置,位置在一組影片播放器控制項上方播放相同影片的完整尺寸螢幕圖片

在開始本程式碼研究室之前,建議您參考即時開發人員指南,其中概略說明瞭新的直播功能。

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

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

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

在接收器中,我們需要新增一些邏輯,讓 Cast Application Framework 能夠顯示串流。其實只需要一行程式碼,將以下這行程式碼新增至 receiver.js 中的載入攔截器:

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

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

儲存您對「receiver.js」所做的變更,然後在網路傳送者上按一下滑鼠右鍵,然後選取「投放&#39」即可啟動投放工作階段。直播功能應該會立即開始播放。

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 建立自訂接收器應用程式。

詳情請參閱直播開發人員指南。