自訂 Web 接收器

Jump start:輕鬆建立基本自訂網頁接收器的程式碼。請直接註冊 Web Receiver 應用程式,再建立基本的 Web Receiver 應用程式

Web Receiver SDK 使用內建媒體播放器來提供順暢的播放體驗。這個 API 內建立即可用的 Google 助理支援服務,以及所有傳送者和支援觸控式裝置的自動支援的 Cast 專屬功能。新功能推出後,您不必另外變更寄件者,系統仍會繼續支援這些功能。

「自訂網頁接收器」是自訂 HTML5 應用程式,必須加以代管,才能在支援 Cast 的裝置上顯示您的內容。視業務需求而定,您可能需要建立自訂 Web Receiver。如需如何決定要使用的接收器類型,請參閱選擇網站接收器指南

Google Web Receiver SDK

您的 Web Receiver 應用程式會透過下列參照存取 Web Receiver API:

<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>

網址通訊協定的最佳做法:請注意,上方網址不會指定「http:」或「https:」的通訊協定。取得 cast_receiver_framework.js 資源時省略這些通訊協定,即可運用與代管 Web Receiver 應用程式的伺服器相同的通訊協定擷取這項資源。也就是說,在開發正式版 HTTP 和 HTTPS 之間切換時,啟用透明化機制,也不需要變更程式碼。(已發布的網路接收器應用程式必須託管於傳輸層安全標準 (TLS) 的伺服器。)

SDK 預覽

Cast Web Receiver SDK 的預先發布版也可用於測試非正式版應用程式。如要進一步瞭解 SDK 預覽網址,請造訪 Google Cast Web Receiver SDK 預覽網址

應用程式生命週期

Web Receiver 應用程式生命週期開始時,Web Receiver 會載入至 Cast 裝置,直到進入應用程式遭到下架的時間點,Cast 裝置會還原至預設狀態。

在 Web Receiver 應用程式的生命週期內,Web Receiver 與任何已連線的寄件者應用程式之間會交換訊息。傳送者應用程式會向 Google Cast 裝置傳送初始訊息,要求使用特定應用程式 ID 建立工作階段。這項操作會啟動 Web Receiver 的生命週期,因為 Google Cast 裝置會嘗試載入 Web Receiver 應用程式。假設沒有任何網路問題,系統會使用與應用程式 ID 相關聯的已解析網址從網路下載 Web Receiver 應用程式。載入後,Web 接收器應用程式會執行其設定作業,並表示已準備好處理任何已連結傳送端應用程式的訊息。

在下列情況中,Web 接收器應用程式可能會拆解 (結束目前的生命週期並關閉應用程式):

  • Web Receiver 應用程式會收到最後連線的明確訊息,以結束應用程式工作階段。
  • Web Receiver 應用程式已閒置一段時間,且沒有任何連線的寄件者,並決定結束應用程式工作階段。
  • 系統啟動了另一個投放工作階段。
  • 網路接收器在一般生命週期中遇到嚴重錯誤。

Web Receiver SDK 會依據《使用者體驗指南》處理所有常見情況。

大型課程

Web Receiver SDK 架構分為 2 個主要類別:

  • cast.framework.CastReceiverContext:管理整體架構,並載入所有必要的程式庫。透過這個物件,您可以:

    • 調整應用程式設定選項
    • 處理系統事件 (例如已連線或已中斷連線)
    • 建立自訂管道
    • 開始投放
  • cast.framework.PlayerManager:管理媒體播放。這個容器會根據來自寄件者的要求,處理基本播放器和媒體元素。透過這個物件,您可以:

    • 處理播放作業
    • 處理來自寄件者的播放相關要求
    • 處理播放相關事件

註冊您的 Web Receiver 應用程式

開發 Web Receiver 應用程式之前,您需要使用 Google Cast SDK Developer Console 註冊 Web Receiver 應用程式。詳情請參閱註冊一文。所有 Web Receiver 應用程式都會要求傳送者應用程式,提供透過寄件者 API 傳送至 Web Receiver 的指令訊息。註冊 Web Receiver 應用程式時,您會收到應用程式 ID,並將其加入寄件者的 API 呼叫中。

建立基本的 Web Receiver 應用程式

以下是不自訂的自訂基本 Web Receiver 應用程式的主要結構:

  1. 用來代表媒體播放器的 cast-media-player HTML 元素。
  2. 用於載入 Web Receiver 架構的指令碼 HTML 元素。
  3. 呼叫 start() 即可啟動 Web Receiver 應用程式且沒有任何選項。

以下為使用投放應用程式架構的網頁接收器應用程式最低程式碼,沒有任何自訂項目。您可以依原樣複製這個指令碼並貼到應用程式中,以建立 Web Receiver 應用程式。

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    cast.framework.CastReceiverContext.getInstance().start();
  </script>
</body>
</html>

這時,使用者可以開啟寄件者應用程式、連線到投放裝置,然後瀏覽媒體並按下 Google Play,進而通知網路接收器將媒體串流到電視,讓使用者觀看。

將此基本網路接收器與自訂接收端應用程式進行比較。

媒體與播放器

Cast 架構提供內建媒體播放器,以 cast-media-player HTML 元素表示。這個媒體播放器支援播放 MPEG-DASH、HLS 和 Smooth Streaming 等串流通訊協定。

支援的媒體會列出一組支援的媒體轉碼器和容器。透過 Cast 訊息,開發人員可以支援由寄件者啟動的作業清單,例如載入、播放、暫停和跳轉,而 Cast SDK 會處理與媒體的互動。如需支援的作業清單,請參閱應用程式平台的寄件者 API 參考資料:Android 寄件者中的 RemoteMediaClientiOS 寄件者中的 GCKMediaControlChannelGCKMediaControlChannel 以及網路寄件者的 Media

跨源資源共享

Google Cast 可完整支援跨源資源共享 (CORS)。串流通訊協定與大多數檔案式通訊協定不同,可透過 XMLHttpRequest 以非同步方式存取內容。在 CORS 環境中,這些要求會防範來自來源資源的 CORS 標頭的不當存取。這表示您的內容可能出現在伺服器中的位置。大部分新式瀏覽器都完全支援 CORS。iOS 和 Android 裝置會以較低層級存取內容,而非查看這些標頭。這通常是開發人員想要使用串流內容時所出現的問題。詳情請參閱跨源資源共享