為 Cast 接收器新增即時支援

1. 總覽

Google Cast 標誌

本程式碼研究室將說明如何建構使用 Cast Live Breaks API 的自訂網路接收器應用程式。

什麼是 Google Cast？

Google Cast 可讓使用者將行動裝置上的內容投放到電視。使用者將行動裝置當成遙控器使用，在電視上播放媒體。

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

我們提供了 Google Cast 設計檢查清單，大幅簡化所有支援平台的 Cast 使用者體驗，並讓使用者享有簡單預測。

我們要建構什麼？

完成本程式碼研究室後，您就建構了可善用 Live API 的 Cast 接收器。

課程內容

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

軟硬體需求

體驗

  • 您必須具有網站開發背景知識。
  • 以往建立 Cast 傳送端和接收器應用程式。

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

僅供閱讀 閱讀並完成練習

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

新手 中級 還算容易

2. 取得程式碼範例

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

然後將下載的 ZIP 檔案解壓縮。

3. 在本機部署接收器

如要搭配投放裝置使用網路接收器，請將裝置代管在投放裝置的位置。如果您已擁有支援 https 的伺服器，請略過下列指示並記下網址，因為在下一節中會用到。

如果你沒有可用伺服器，可改用 Firebase 代管或 ngrok。

執行伺服器

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

請記下代管接收器的網址。您將在下一節中用到它。

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

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

Google Cast SDK 開發人員控制台顯示「新增應用程式」的圖片醒目顯示按鈕

按一下「新增應用程式」

「新接收端應用程式」的圖片顯示「Custom Receiver」已醒目顯示選項

選取 [自訂接收器]，也就是我們要建構的接收器。

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

輸入新接收端的詳細資料，請務必使用您最終提供的網址

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

此外，你必須註冊 Google Cast 裝置，以便在發布前存取接收器應用程式。接收器應用程式發布後，所有的 Google Cast 裝置皆可使用該應用程式。就本程式碼研究室而言，建議您使用尚未發布的接收器應用程式。

Google Cast SDK 開發人員控制台和「新增裝置」的圖片醒目顯示按鈕

按一下「新增裝置」

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

輸入印在投放裝置背面的序號，並輸入描述性名稱。在 Chrome 中存取 Google Cast SDK 開發人員控制台時，您也可以投放畫面來找出序號

接收方和裝置需要 5 到 15 分鐘的時間才能進行測試。等待 5 到 15 分鐘後，你必須重新啟動投放裝置。

5. 投放簡單的直播內容

圖片：Android 手機正在播放影片；「正在投放到客廳」位於底部的影片播放器控制項上方播放相同影片的原尺寸螢幕圖片

開始本程式碼研究室之前，建議您詳閱 線上開發人員指南，其中提供使用中的 API 總覽。

針對我們的傳送者，我們將使用 Cactool 啟動投放工作階段。接收器會自動開始播放直播。

接收端由三個檔案組成。名為 receiver.html 的基本 HTML 檔案，內含主要應用程式結構。您不需要修改這個檔案。還有一個名為 receiver.js 的檔案，其中包含接收器的所有邏輯。最後，還有一個 metadata_service.js，稍後會在程式碼研究室中用來模擬取得節目指南資料。

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

網路接收器投放應用程式架構 (CAF) 必須指示內容是直播。如要這麼做，請使用下列這行程式碼修改應用程式。將其新增至 receiver.js 中載入攔截器的主要主體：

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

將串流類型設為 LIVE 即可啟用 CAF 的直播 UI。Web Receiver SDK 會自動跳到串流的即時邊緣。尚未新增直播節目指南資料，因此進度列會完整呈現直播的可搜尋範圍。

將變更儲存至 receiver.js，然後按一下投放按鈕並選取目標投放裝置，在 Cactool 上啟動投放工作階段。直播影片應該會立即開始播放。

6. 新增節目指南資料

CAF 對直播內容提供支援，現已支援在接收端和傳送端應用程式中顯示節目指南資料。強烈建議內容供應者將節目中繼資料納入其接收端應用程式，提供更好的使用者體驗，尤其是對電視頻道等長時間放送的直播而言。

CAF 支援在單一串流中為多個節目設定中繼資料。透過在 MediaMetadata 物件上設定開始時間戳記和持續時間，接收端會根據播放器在串流中的目前位置，自動更新傳送者所顯示的中繼資料和重疊影像。以下是 API 的範例及其一般用途。

// 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;

在這個程式碼研究室中，我們會使用範例中繼資料服務來提供直播的中繼資料。如要建立程式中繼資料清單，請建立container。ContainerMetadata 會保留單一媒體串流的 MediaMetadata 物件清單。每個 MediaMetadata 物件都代表容器中的一個區段。如果播放頭位於指定區段的邊界內，系統就會自動將播放頭的中繼資料複製到媒體狀態。將下列程式碼加入 receiver.js 檔案，即可從我們的服務下載範例中繼資料，並將容器提供給 CAF。

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

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

此外，請新增對函式的呼叫，以便在載入攔截器中載入指南資料：

loadGuideData();

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

當播放頭轉移至容器中的新區段時，接收端會傳送新的媒體狀態訊息給所有傳送者，這樣傳送端應用程式才能更新使用者介面。建議接收端應用程式使用媒體狀態攔截器更新容器中繼資料，以便繼續將節目資訊提供給傳送端應用程式。在我們的範例服務中，我們會傳回目前的節目中繼資料，以及接下來兩個節目的中繼資料。如要更新串流的中繼資料，請建立新容器，並按照上述範例呼叫 setContainerMetadata。

7. 停用跳轉功能

大多數影片串流都是由包含特定影格範圍的片段組成。除非另有指定，否則 CAF 會允許使用者在這些區隔中進行搜尋。網路接收端可以透過呼叫幾個可用的 API 來指定此項目。

在載入攔截器中，移除 SEEK 支援的媒體指令。這項設定會停用所有行動裝置傳送者和觸控介面的跳轉功能。在 receiver.js 中 SDK 執行個體變數的定義後方加上以下程式碼。

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

如要停用 Google 助理技術 (例如「Ok Google，倒轉 60 秒)」的語音搜尋指令，應使用跳轉攔截器。每次發出跳轉要求時，系統都會呼叫這個攔截器。如果 SEEK 支援的媒體指令已停用，攔截器將拒絕跳轉要求。在 receiver.js 檔案中新增以下程式碼片段：

/**
 * 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.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // 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 seekRequestData;
    });

儲存 receiver.js 檔案並啟動投放工作階段。你應該無法再於直播中跳轉。

8. 恭喜

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

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