為自訂網路接收器新增核心功能

此網頁包含程式碼片段和其可用功能的說明 自訂 Web Receiver 應用程式

  1. 代表內建玩家 UI 的 cast-media-player 元素 這項功能。
  2. 針對 cast-media-player 元素設定類似 CSS 樣式的自訂樣式,設定各種樣式 UI 元素,例如 background-imagesplash-imagefont-family
  3. 用於載入網路接收端架構的指令碼元素。
  4. 攔截訊息及處理事件的 JavaScript 程式碼。
  5. 等待自動播放。
  6. 設定播放選項。
  7. 設定網路接收端內容的選項。
  8. 網路接收端應用程式支援的指令設定選項。
  9. 用於啟動 Web Receiver 應用程式的 JavaScript 呼叫

應用程式設定與選項

設定應用程式

CastReceiverContext敬上 是向開發人員公開的最外類別,負責管理容器的載入作業 基礎程式庫並處理 Web Receiver SDK 的初始化作業。SDK 提供的 API 可讓應用程式開發人員以下列方式設定 SDK CastReceiverOptions。 這些設定會在每次應用程式啟動時評估一次,並傳遞至 會在呼叫 start

以下範例說明如何覆寫預設行為,以便偵測是否 仍然與傳送者連線保持連線。Web Receiver 尚未 能夠與寄件者進行通訊 maxInactivity敬上 秒時,系統會分派 SENDER_DISCONNECTED 事件。以下設定 就會覆寫這項逾時設定對問題進行偵錯時,這項功能非常實用,因為 Web Receiver 應用程式無法在偵測到時關閉 Chrome Remote Debugger 工作階段 處於 IDLE 狀態且未連線的寄件者為零。

const context = cast.framework.CastReceiverContext.getInstance();
const options = new cast.framework.CastReceiverOptions();
options.maxInactivity = 3600; // Development only
context.start(options);

設定播放器

載入內容時,Web Receiver SDK 可讓您設定播放方式 變數,例如 DRM 資訊 重試設定,以及使用 cast.framework.PlaybackConfig。 這項資訊會由 PlayerManager敬上 而且是在玩家建立時進行評估。已建立玩家 每次新的載入作業傳送到 Web Receiver SDK修改 建立玩家後,PlaybackConfig 會在下個階段評估 內容載入。SDK 提供下列方法,用來修改 PlaybackConfig

以下範例說明如何在初始化PlaybackConfig CastReceiverContext。這項設定會覆寫以下項目的傳出要求: 取得資訊清單。這個處理常式會指定 CORS Access-Control 要求 應該使用 Cookie 或授權標頭等憑證製作。

const playbackConfig = new cast.framework.PlaybackConfig();
playbackConfig.manifestRequestHandler = requestInfo => {
  requestInfo.withCredentials = true;
};
context.start({playbackConfig: playbackConfig});

以下範例說明如何使用 getter 覆寫 PlaybackConfig 和 setter,PlayerManager。這項設定會將播放器設為 載入 1 個片段後繼續播放內容。

const playerManager =
    cast.framework.CastReceiverContext.getInstance().getPlayerManager();
const playbackConfig = (Object.assign(
            new cast.framework.PlaybackConfig(), playerManager.getPlaybackConfig()));
playbackConfig.autoResumeNumberOfSegments = 1;
playerManager.setPlaybackConfig(playbackConfig);

以下範例說明如何覆寫特定載入的 PlaybackConfig 要求使用媒體播放資訊處理常式。處理常式呼叫應用程式 實作方法 getLicenseUrlForMedia,以便從licenseUrl 目前項目的 contentId

playerManager.setMediaPlaybackInfoHandler((loadRequestData, playbackConfig) => {
  const mediaInformation = loadRequestData.media;
  playbackConfig.licenseUrl = getLicenseUrlForMedia(mediaInformation.contentId);

  return playbackConfig;
});

事件監聽器

Web Receiver SDK 允許您的 Web Receiver 應用程式處理播放器事件。 事件監聽器接收 cast.framework.events.EventType敬上 參數或參數的陣列,用來指定 監聽器應會觸發事件監聽器。預先設定的陣列陣列 如需有助於偵錯的 cast.framework.events.EventType,請前往: cast.framework.events.category。 事件參數可提供與事件有關的額外資訊,

舉例來說 mediaStatus敬上 正在進行廣播變更,您可以使用以下邏輯處理 事件:

const playerManager =
    cast.framework.CastReceiverContext.getInstance().getPlayerManager();
playerManager.addEventListener(
    cast.framework.events.EventType.MEDIA_STATUS, (event) => {
      // Write your own event handling code, for example
      // using the event.mediaStatus value
});

訊息攔截

Web Receiver SDK 能讓您的 Web Receiver 應用程式攔截訊息, 並在這些訊息中執行自訂程式碼訊息攔截器會使用 cast.framework.messages.MessageType敬上 參數,用來指定要攔截的訊息類型。

攔截器應傳回修改的要求,或是可解析的 Promise 並帶有修改過的要求值。傳回 null 後,系統就不會呼叫 預設訊息處理常式。詳情請參閱「載入媒體」。

例如,如果您想要變更載入要求資料,可以使用 以下邏輯即可攔截及修改:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      const error = new cast.framework.messages.ErrorData(
                      cast.framework.messages.ErrorType.LOAD_FAILED);
      if (!loadRequestData.media) {
        error.reason = cast.framework.messages.ErrorReason.INVALID_PARAM;
        return error;
      }

      if (!loadRequestData.media.entity) {
        return loadRequestData;
      }

      return thirdparty.fetchAssetAndAuth(loadRequestData.media.entity,
                                          loadRequestData.credentials)
        .then(asset => {
          if (!asset) {
            throw cast.framework.messages.ErrorReason.INVALID_REQUEST;
          }

          loadRequestData.media.contentUrl = asset.url;
          loadRequestData.media.metadata = asset.metadata;
          loadRequestData.media.tracks = asset.tracks;
          return loadRequestData;
        }).catch(reason => {
          error.reason = reason; // cast.framework.messages.ErrorReason
          return error;
        });
    });

context.start();

處理錯誤

如果訊息攔截器發生錯誤,您的 Web Receiver 應用程式應會傳回 適當的 cast.framework.messages.ErrorType敬上 和 cast.framework.messages.ErrorReason

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      const error = new cast.framework.messages.ErrorData(
                      cast.framework.messages.ErrorType.LOAD_CANCELLED);
      if (!loadRequestData.media) {
        error.reason = cast.framework.messages.ErrorReason.INVALID_PARAM;
        return error;
      }

      ...

      return fetchAssetAndAuth(loadRequestData.media.entity,
                               loadRequestData.credentials)
        .then(asset => {
          ...
          return loadRequestData;
        }).catch(reason => {
          error.reason = reason; // cast.framework.messages.ErrorReason
          return error;
        });
    });

訊息攔截與事件監聽器

訊息攔截和事件監聽器的部分主要差異如下: 如下:

  • 事件監聽器不允許您修改要求資料。
  • 事件監聽器最適合用來觸發數據分析或自訂函式。
playerManager.addEventListener(cast.framework.events.category.CORE,
    event => {
        console.log(event);
    });
  • 訊息攔截功能可讓您監聽、攔截訊息,以及 然後修改要求資料本身
  • 訊息攔截最適合用來處理與下列項目相關的自訂邏輯: 要求資料。

正在載入媒體

MediaInformation敬上 提供多種屬性 包含 entitycast.framework.messages.MessageType.LOAD 訊息, contentUrlcontentId

  • entity 是在導入過程中,向傳送者和 接收。這個屬性為深層連結網址,可以是播放清單 或媒體內容您應該應用程式剖析此網址,並 填寫至少一個其他欄位。
  • contentUrl 和可播放的網址對應,方便播放器載入內容。 舉例來說,這個網址可以指向 DASH 資訊清單。
  • contentId 可以是可播放的內容網址 (類似於 contentUrl 屬性),或是載入內容或播放清單的專屬 ID。 如果使用這個屬性做為 ID,應用程式應會在 contentUrl 中的可播放網址。

建議您使用 entity 儲存實際 ID 或金鑰參數。 使用 contentUrl 做為媒體網址。相關範例顯示在 下列程式碼片段,其中 entity 出現在 LOAD 要求中, 已擷取可播放的 contentUrl

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      ...

      if (!loadRequestData.media.entity) {
        // Copy the value from contentId for legacy reasons if needed
        loadRequestData.media.entity = loadRequestData.media.contentId;
      }

      return thirdparty.fetchAssetAndAuth(loadRequestData.media.entity,
                                          loadRequestData.credentials)
        .then(asset => {
          loadRequestData.media.contentUrl = asset.url;
          ...
          return loadRequestData;
        });
    });

裝置功能

getDeviceCapabilities敬上 方法,可提供連線投放裝置與影片等裝置資訊, 音訊裝置getDeviceCapabilities 方法支援 Google 助理、藍牙和已連結螢幕和音訊的相關資訊 裝置。

這個方法會傳回一個物件,您可透過 才能取得該列舉的裝置功能。列舉為 cast.framework.system.DeviceCapabilities

這個範例會檢查網路接收器裝置是否能播放 HDR 功能, DolbyVision 搭配 IS_HDR_SUPPORTEDIS_DV_SUPPORTED 鍵。 。

const context = cast.framework.CastReceiverContext.getInstance();
context.addEventListener(cast.framework.system.EventType.READY, () => {
  const deviceCapabilities = context.getDeviceCapabilities();
  if (deviceCapabilities &&
      deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_HDR_SUPPORTED]) {
    // Write your own event handling code, for example
    // using the deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_HDR_SUPPORTED] value
  }
  if (deviceCapabilities &&
      deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_DV_SUPPORTED]) {
    // Write your own event handling code, for example
    // using the deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_DV_SUPPORTED] value
  }
});
context.start();

處理使用者互動

使用者可以透過寄件者與您的網路接收端應用程式互動 應用程式 (網頁、Android 和 iOS)、語音指令 (支援 Google 助理) 的語音指令 裝置、智慧螢幕上的觸控設定,以及 Android TV 的遙控器 裝置。Cast SDK 提供各種 API,可讓 Web Receiver 應用程式 處理這類互動、更新應用程式 UI 使用者動作狀態 並視需要傳送變更,以更新所有後端服務

支援的媒體指令

UI 控制項狀態是由 MediaStatus.supportedMediaCommands敬上 iOS 和 Android 傳送者展開控制器、接收器和遙控器 在觸控裝置上執行的應用程式,以及 Android TV 裝置上的接收器應用程式。如果 尤其是在屬性中啟用位元 Command 時,按鈕就會 相關的所有動作都會啟用如未設定該值,按鈕會 已停用。您可以在網路接收端變更這些值,方法如下:

  1. 使用 PlayerManager.setSupportedMediaCommands敬上 即可設定 Commands
  2. 使用 addSupportedMediaCommands敬上
  3. 使用 removeSupportedMediaCommands
playerManager.setSupportedMediaCommands(cast.framework.messages.Command.SEEK |
  cast.framework.messages.Command.PAUSE);

接收端準備更新過的 MediaStatus 時,其中會包含 supportedMediaCommands 屬性的變更。當狀態為 播送時,已連結的傳送者應用程式將更新使用者介面中的按鈕 。

如要進一步瞭解支援的媒體指令和觸控裝置,請參閱 Accessing UI controls敬上 指南。

管理使用者動作狀態

使用者與使用者介面互動或傳送語音指令時, 播放與播放項目相關的內容和屬性。要求數 控製播放作業是由 SDK 自動處理。要求 修改目前項目播放的屬性,例如 LIKE 指令。 需要接收端應用程式處理這些要求SDK 提供了一系列 處理這些要求類型的 API為支援這些要求,請注意下列事項 操作:

  • 設定 MediaInformation userActionStates 依據使用者的偏好設定載入媒體項目。
  • 攔截 USER_ACTION 訊息,並決定要執行的操作。
  • 更新 MediaInformation UserActionState 以更新使用者介面。

下列程式碼片段會攔截 LOAD 要求並填入 LoadRequestDataMediaInformation。在這個例子中,使用者喜歡 正在載入的內容。

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
      const userActionLike = new cast.framework.messages.UserActionState(
          cast.framework.messages.UserAction.LIKE);
      loadRequestData.media.userActionStates = [userActionLike];

      return loadRequestData;
    });

下列程式碼片段會攔截 USER_ACTION 訊息並處理呼叫 執行要求變更的後端接著,系統會呼叫 接收端上的 UserActionState

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.USER_ACTION,
  (userActionRequestData) => {
    // Obtain the media information of the current content to associate the action to.
    let mediaInfo = playerManager.getMediaInformation();

    // If there is no media info return an error and ignore the request.
    if (!mediaInfo) {
        console.error('Not playing media, user action is not supported');
        return new cast.framework.messages.ErrorData(messages.ErrorType.BAD_REQUEST);
    }

    // Reach out to backend services to store user action modifications. See sample below.
    return sendUserAction(userActionRequestData, mediaInfo)

    // Upon response from the backend, update the client's UserActionState.
    .then(backendResponse => updateUserActionStates(backendResponse))

    // If any errors occurred in the backend return them to the cast receiver.
    .catch((error) => {
      console.error(error);
      return error;
    });
});

下列程式碼片段會模擬對後端服務的呼叫。這個函式會檢查 UserActionRequestData,查看使用者要求的變更類型 而且只有在後端支援該動作時,才發出網路呼叫。

function sendUserAction(userActionRequestData, mediaInfo) {
  return new Promise((resolve, reject) => {
    switch (userActionRequestData.userAction) {
      // Handle user action changes supported by the backend.
      case cast.framework.messages.UserAction.LIKE:
      case cast.framework.messages.UserAction.DISLIKE:
      case cast.framework.messages.UserAction.FOLLOW:
      case cast.framework.messages.UserAction.UNFOLLOW:
      case cast.framework.messages.UserAction.FLAG:
      case cast.framework.messages.UserAction.SKIP_AD:
        let backendResponse = {userActionRequestData: userActionRequestData, mediaInfo: mediaInfo};
        setTimeout(() => {resolve(backendResponse)}, 1000);
        break;
      // Reject all other user action changes.
      default:
        reject(
          new cast.framework.messages.ErrorData(cast.framework.messages.ErrorType.INVALID_REQUEST));
    }
  });
}

下列程式碼片段使用 UserActionRequestData,且會新增或 從 MediaInformation 移除 UserActionState。更新 MediaInformationUserActionState 會變更按鈕的狀態 與要求的動作相關聯這項變更會反映在 顯示控制項 UI、遙控器應用程式,以及 Android TV UI。這個 是透過傳出的 MediaStatus 訊息來廣播訊息,藉此更新應用程式的使用者介面 適用於 iOS 和 Android 寄件者的擴充控制器。

function updateUserActionStates(backendResponse) {
  // Unwrap the backend response.
  let mediaInfo = backendResponse.mediaInfo;
  let userActionRequestData = backendResponse.userActionRequestData;

  // If the current item playing has changed, don't update the UserActionState for the current item.
  if (playerManager.getMediaInformation().entity !== mediaInfo.entity) {
    return;
  }

  // Check for existing userActionStates in the MediaInformation.
  // If none, initialize a new array to populate states with.
  let userActionStates = mediaInfo.userActionStates || [];

  // Locate the index of the UserActionState that will be updated in the userActionStates array.
  let index = userActionStates.findIndex((currUserActionState) => {
    return currUserActionState.userAction == userActionRequestData.userAction;
  });

  if (userActionRequestData.clear) {
    // Remove the user action state from the array if cleared.
    if (index >= 0) {
      userActionStates.splice(index, 1);
    }
    else {
      console.warn("Could not find UserActionState to remove in MediaInformation");
    }
  } else {
    // Add the UserActionState to the array if enabled.
    userActionStates.push(
      new cast.framework.messages.UserActionState(userActionRequestData.userAction));
  }

  // Update the UserActionState array and set the new MediaInformation
  mediaInfo.userActionStates = userActionStates;
  playerManager.setMediaInformation(mediaInfo, true);
  return;
}

語音指令

Web Receiver SDK 目前支援下列媒體指令: 支援 Google 助理的裝置。這些指令的預設實作方式為 來源: cast.framework.PlayerManager

指令 說明
播放 從暫停狀態播放或繼續播放。
暫停 暫停目前播放的內容。
返回 跳到媒體待播清單中的上一個媒體項目。
繼續 跳到媒體待播清單中的下一個媒體項目。
停止 停止目前正在播放的媒體。
重複播放 佇列中的最後一個項目播放完畢後,停用佇列中的媒體項目重複功能。
重複播放單曲 無限期重複播放目前播放的媒體。
重複播放所有項目 播放佇列中的最後一個項目後,重複播放佇列中的所有項目。
重複播放所有歌曲和隨機播放 佇列中的最後一個項目播放完畢後,請隨機播放佇列中的所有項目。
隨機播放 隨機播放媒體佇列中的媒體項目。
開啟 / 關閉隱藏式輔助字幕 啟用 / 停用媒體的隱藏式輔助字幕。啟用或停用各種語言。
跳轉絕對時間 跳到指定的絕對時間。
跳轉相對於目前時間的時間 以目前播放時間為基準,向前或向後跳轉。
再玩一次 重新啟動目前正在播放的媒體,如果目前未播放任何媒體,則播放上次播放的媒體項目。
設定播放速率 各種媒體播放速率。此動作預設為處理。您可以使用 SET_PLAYBACK_RATE 訊息攔截器覆寫傳入頻率要求。

支援的語音指令媒體指令

如何防止語音指令在 Google 助理上觸發媒體指令: 您必須先將 支援的媒體指令 您要支持的要素接著,您必須啟用 這個 CastReceiverOptions.enforceSupportedCommands敬上 資源。Cast SDK 傳送者和支援觸控功能裝置上的使用者介面將變更為 反映這些設定如果標記未啟用此標記 指令會負責執行

舉例來說,如果您允許傳送者應用程式使用 PAUSE,且 如果是觸控式裝置,您還必須設定接收器 可以管理叢集設定,像是節點 資源調度、安全性和其他預先設定項目設定完成後,系統會捨棄你收到的任何語音指令 (如果沒有的話) 附加在支援的指令清單中

在以下範例中,我們會在啟動時提供 CastReceiverOptions CastReceiverContext。我們已開始支援 PAUSE 指令和 則強制玩家只支援該指令現在,透過語音指令 要求另一項作業 (例如 SEEK),系統會拒絕該作業。使用者 目前還不支援這個指令

const context = cast.framework.CastReceiverContext.getInstance();

context.start({
  enforceSupportedCommands: true,
  supportedCommands: cast.framework.messages.Command.PAUSE
});

您可以為每個要限制的指令套用不同的邏輯。將 enforceSupportedCommands 旗標,以及要變更的每個指令 才能攔截收到的訊息。這裡我們會攔截 提供的 SEEK 指令給支援 Google 助理的裝置 不會在您的 Web Receiver 應用程式中觸發跳轉。

針對應用程式不支援的媒體指令,請傳回適當的 錯誤原因,例如 NOT_SUPPORTED

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.SEEK,
  seekData => {
    // Block seeking if the SEEK supported media command is disabled
    if (!(playerManager.getSupportedMediaCommands() & cast.framework.messages.Command.SEEK)) {
      let e = new cast.framework.messages.ErrorData(cast.framework.messages.ErrorType
      .INVALID_REQUEST);
      e.reason = cast.framework.messages.ErrorReason.NOT_SUPPORTED;
      return e;
    }

    return seekData;
  });

透過語音活動執行背景作業

如果 Cast 平台因 Google 助理問題而無法背景播放應用程式音訊 聆聽使用者語音或說話等活動 FocusState敬上 NOT_IN_FOCUS 的訊息會在 活動開始。活動結束時,系統會傳送另一則含有 IN_FOCUS 的訊息。 根據應用程式和正在播放的媒體而定,您可能會想 在 FocusStateNOT_IN_FOCUS 時攔截訊息,藉此暫停媒體 輸入 FOCUS_STATE

舉例來說,在下列情況中,暫停播放有聲書是很好的使用者體驗 Google 助理回應使用者查詢。

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.FOCUS_STATE,
  focusStateRequestData => {
    // Pause content when the app is out of focus. Resume when focus is restored.
    if (focusStateRequestData.state == cast.framework.messages.FocusState.NOT_IN_FOCUS) {
      playerManager.pause();
    } else {
      playerManager.play();
    }

    return focusStateRequestData;
  });

語音指定的字幕語言

當使用者未明確表示字幕語言時, 字幕的語言與指令所用語言相同。 在這種情況下, isSuggestedLanguage敬上 的 參數,指出所傳入訊息的相關語言 建議或明確要求

舉例來說,將「Ok Google,」指令的 isSuggestedLanguage 設為 true。 CANNOT TRANSLATE這是因為網站的語言是 指令是否已明確要求語言,例如「確定」 請開啟英文字幕」isSuggestedLanguage已設為 false

中繼資料和語音投放

雖然預設會由網路接收端處理語音指令,不過你應該 確保內容中繼資料完整且正確。這可以確保 Google 助理會妥善處理語音指令,而且相關中繼資料會 可正常顯示在新型介面,例如 Google Home 應用程式 例如 Google Home Hub

變更串流裝置

保留工作階段狀態是串流傳輸的基礎, 使用者可以使用 Google Home 語音指令,切換不同裝置中的現有音訊和影片串流 應用程式或智慧螢幕。在一部裝置 (來源) 上停止播放媒體,然後於另一部裝置 ( 目的地)。凡是裝有最新韌體的投放裝置,都可以做為來源或目的地 變更串流裝置。

串流轉移事件流程如下:

  1. 在來源裝置上:
    1. 停止播放媒體。
    2. Web Receiver 應用程式收到儲存目前媒體的指令 state.
    3. Web Receiver 應用程式已關閉。
  2. 在目標裝置上:
    1. Web Receiver 應用程式已載入。
    2. Web Receiver 應用程式收到還原已儲存媒體的指令 state.
    3. 系統就會繼續播放媒體。

媒體狀態元素包括:

  • 歌曲、影片或媒體項目的特定位置或時間戳記。
  • 系統會將這部影片放在更廣泛的待播清單中 (例如播放清單或藝人電台)。
  • 已通過驗證的使用者。
  • 播放狀態 (例如播放或暫停)。

啟用串流轉移功能

如何為網路接收器執行串流傳輸:

  1. 最新消息 supportedMediaCommands敬上 使用 STREAM_TRANSFER 指令:
    playerManager.addSupportedMediaCommands(
    cast.framework.messages.Command.STREAM_TRANSFER, true);
  2. 視需要覆寫 SESSION_STATERESUME_SESSION 訊息 攔截器,詳情請參閱「保留工作階段」 狀態。只在自訂資料需要時覆寫這些設定 以做為工作階段快照的一部分儲存否則為預設值 但須導入保留工作階段狀態的實作,才能支援串流傳輸。

保留工作階段狀態

Web Receiver SDK 可為 Web Receiver 應用程式提供預設實作方式 擷取目前媒體狀態的快照、 並在載入請求中恢復工作階段,並透過載入要求繼續工作階段。

Web 接收器產生的載入要求可在 視需要使用 SESSION_STATE 訊息攔截器。如欲新增自訂資料 放入載入要求中 loadRequestData.customData

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SESSION_STATE,
    function (sessionState) {
        // Override sessionState.loadRequestData if needed.
        const newCredentials = updateCredentials_(sessionState.loadRequestData.credentials);
        sessionState.loadRequestData.credentials = newCredentials;

        // Add custom data if needed.
        sessionState.loadRequestData.customData = {
            'membership': 'PREMIUM'
        };

        return sessionState;
    });

自訂資料可以擷取來源 loadRequestData.customData敬上 (位於 RESUME_SESSION 訊息攔截器中)。

let cred_ = null;
let membership_ = null;

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.RESUME_SESSION,
    function (resumeSessionRequest) {
        let sessionState = resumeSessionRequest.sessionState;

        // Modify sessionState.loadRequestData if needed.
        cred_ = sessionState.loadRequestData.credentials;

        // Retrieve custom data.
        membership_ = sessionState.loadRequestData.customData.membership;

        return resumeSessionRequest;
    });

內容預先載入

Web Receiver 可在目前的播放作業結束後,預先載入媒體項目 佇列中的項目。

預先載入作業會預先下載 即將登場的項目規格會在 preloadTime 傳回 QueueItem 物件 (如未提供,預設值為 20 秒)。時間會以秒數表示 相對於目前播放項目的結尾 。只有正值 有效。舉例來說,如果值為 10 秒,系統會預先載入這個項目 10 幾秒內完成。如果預先載入所需的時間較長 而不是目前項目所剩的時間,預先載入網頁將立即開始 因此,如果在 QueueItem 上指定非常大的預先載入值, 就能達成此效果 已預先載入下一個項目不過,我們會保留設定 這個值可能會影響頻寬和串流效能 目前播放中項目的說明。

根據預設,預先載入功能適用於 HLS、DASH 和流暢串流內容。

一般的 MP4 影片和音訊檔案 (例如 MP3) 不會以投放功能預先載入 裝置僅支援一個媒體元素,無法用於預先載入 現有的內容項目仍在播放中

自訂訊息

訊息交換是 Web Receiver 應用程式的主要互動方法。

傳送者使用 執行傳送端的平台 (Android、iOS、網頁)。事件物件 是訊息的資訊清單),傳遞至事件監聽器的 資料元素 (event.data),其中資料採用 指定事件類型

Web Receiver 應用程式可選擇監聽指定 命名空間因此,Web Receiver 應用程式會聲稱 支援該命名空間通訊協定任何想要連線的寄件者皆可自行選擇 服務使用該命名空間,以使用適當的通訊協定。

所有命名空間都是由字串定義,且開頭必須為「urn:x-cast:」 後面加上任何字串。例如: 「urn:x-cast:com.example.cast.mynamespace」。

以下是讓 Web Receiver 監聽自訂訊息的程式碼片段 已連線的寄件者:

const context = cast.framework.CastReceiverContext.getInstance();

const CUSTOM_CHANNEL = 'urn:x-cast:com.example.cast.mynamespace';
context.addCustomMessageListener(CUSTOM_CHANNEL, function(customEvent) {
  // handle customEvent.
});

context.start();

同樣地,Web Receiver 應用程式可讓傳送者得知狀態 。網路接收器 應用程式可以透過多種方式 sendCustomMessage(namespace, senderId, message)敬上 為 CastReceiverContext。 網路接收端可以傳送訊息給個別寄件者,以回應 或因應用程式狀態變更而收到訊息。非點對點 訊息傳送 (上限為 64 KB) 的訊息,網路接收者也可以將訊息廣播至 所有已連結的寄件者。

Cast 音訊裝置

請參閱 Google Cast 音訊裝置專用指南,瞭解音訊的相關支援。 只能播放。

Android TV

本節會說明 Google Web Receiver 如何使用您的輸入內容做為播放媒體。 和 Android TV 的相容性

整合應用程式與遙控器

在 Android TV 裝置上執行的 Google Web Receiver 會翻譯輸入內容 裝置的控制輸入來源 (例如手持遙控器) 做為媒體播放 為 urn:x-cast:com.google.cast.media 命名空間定義的訊息,如 如「媒體播放訊息」中所述。您的 應用程式必須支援這些訊息,以控制應用程式媒體 ,透過 Android TV 控制項提供基本播放控制項 輸入內容

Android TV 相容性指南

以下提供一些建議,以及應避免的常見錯誤 您的應用程式與 Android TV 相容:

  • 請注意,使用者代理程式字串同時包含「Android」和「CrKey」; 有些網站可能會因為偵測到 「Android」標籤。請勿假設「Android」一律在使用者代理程式字串中 代表行動裝置使用者。
  • Android 的媒體堆疊可能會使用透明的 GZIP 擷取資料。請確認 你的媒體資料可對「Accept-Encoding: gzip」做出回應。
  • Android TV HTML5 媒體事件的觸發時機與 Chromecast,可能會顯示 Chromecast 隱藏的問題。
  • 更新媒體時,請使用 <audio>/<video> 觸發的媒體相關事件 元素,例如 timeupdatepausewaiting。避免使用網路 相關事件 (例如 progresssuspendstalled) 通常為 平台會因平台而異請參閱「媒體事件」 ,進一步瞭解如何在接收端處理媒體事件。
  • 設定接收端網站的 HTTPS 憑證時,請務必將 中繼 CA 憑證。詳情請參閱 Qualsys SSL 測試頁面 驗證:網站的信任認證路徑是否包含 CA 系統可能無法在 Android 裝置 平台。
  • Chromecast 以 720p 圖形平面顯示接收器頁面時 投放平台 (包括 Android TV) 最高可顯示 1080p 的頁面。確保 接收方頁面會以不同的解析度縮放。