為 Cast 接收器新增即時支援

1. 總覽

Google Cast 標誌

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

什麼是 Google Cast？

Google Cast 可讓使用者將行動裝置中的內容投放到電視上。這樣一來，使用者就能將行動裝置當做遙控器，用來在電視上播放媒體內容。

Google Cast SDK 可讓您擴充應用程式，藉此控制電視或音效系統。Cast SDK 可讓您根據 Google Cast 設計檢查清單，新增必要的使用者介面元件。

我們提供 Google Cast 設計檢查清單，讓所有支援的平台的使用者更容易享有 Cast 使用者體驗。

我們要構建什麼內容？

完成本程式碼研究室後，您將建構投放接收器，以便利用新的直播功能。

課程內容

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

軟硬體需求

功能

  • 您必須具備網站開發相關知識。
  • 過去曾建構 Cast 發送端和接收端應用程式。

您要如何使用這個教學課程？

僅讀完整內容 閱讀並完成練習

針對網頁應用程式的建構體驗，您會給予什麼評價？

新手 中級 有效率

2. 取得範例程式碼

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

解壓縮下載的 ZIP 檔案。

3. 在本機部署接收器

如要將投放接收器與投放裝置搭配使用，你必須將位置放在投放裝置可以存取的位置。假設您已有支援 https 的伺服器，請略過下列操作說明並記下網址，因為在下一節將有用。

如果您沒有可用伺服器，可以使用 Firebase 託管或 ngrok。

執行伺服器

您選擇的服務設定完成後，請前往 app-start 並啟動伺服器。

記下代管接收器的網址。您將在下一節使用。

4. 在 Cast 開發人員控制台中註冊應用程式

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

Google Cast SDK 開發人員控制台的圖片，當中標出「新增應用程式」按鈕

按一下 [新增應用程式]

「新接收端應用程式」畫面的圖片，其中醒目顯示「自訂接收器」選項

選取「自訂接收器」，這就是我們建構的內容。

「新增自訂接收器」畫面的圖片，顯示使用者在「接收端應用程式網址」欄位中輸入的網址

請輸入新接收器的詳細資料，請務必使用結尾的網址

最後一個部分記下指派給新接收器的應用程式 ID。

你也可以註冊 Google Cast 裝置，讓裝置存取你的接收器應用程式，再進行發布。發布接收器應用程式後，所有 Google Cast 裝置都能使用該應用程式。在本程式碼研究室中，建議使用未發布的接收器應用程式。

Google Cast SDK 開發人員控制台的圖片，當中標出「新增裝置」按鈕

按一下「新增裝置」

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

輸入 Cast 裝置背面的序號，並為裝置命名。您也可以在存取 Google Cast SDK 開發人員控制台時，透過 Chrome 投放螢幕畫面，藉此查看序號。

收款人和裝置可能需要 5 到 15 分鐘的時間，才能進行測試。您必須在 5 到 15 分鐘後重新啟動投放裝置。

5. 投放簡易直播

圖片：位於 Android 手機上正在播放影片的圖片，訊息底部「投放至客廳」訊息，位在一系列影片播放器控制項上方播放相同影片的全尺寸螢幕圖片

開始之前，建議您先查看 即時開發人員指南，概略瞭解新版直播功能。

對我們的寄件者而言，我們會使用 CAF 接收器偵錯錯誤來啟動投放工作階段。接收器的設計會自動開始播放直播。

接收器由兩個檔案組成。名為 receiver.html 的基本 HTML 檔案，可初始化 Cast 背景資訊，以及 Cast 媒體播放器的預留位置。您不需要修改這個檔案。此外，還有一個名稱為 receiver.js 的檔案，其中會包含所有接收器的邏輯。

首先，請在 Chrome 中開啟網路寄件者。輸入您在 Cast SDK 開發人員控制台中提供的接收者應用程式 ID，然後按一下「設定」。

在接收器中，我們需要新增一些邏輯，向投放應用程式架構 (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 檔案並啟動投放工作階段。螢幕上會顯示節目的開始時間、結束時間和標題。

當播放頭轉換為容器中的新區段時，接收者將會傳送新的媒體狀態訊息。因此，建議您更新媒體狀態攔截器的容器中繼資料，這樣才能隨時取得最新的計畫資訊。在我們的範例服務中，我們會傳回目前的程式中繼資料，以及下一個程式的中繼資料。如要更新串流的中繼資料，只要建立新的容器並呼叫 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 檔案並啟動投放工作階段。移除後，你就無法再透過直播進行搜尋。

8. 恭喜

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

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