瀏覽器TVSDK適用的Google Cast應用程式

您可以從以TVSDK為基礎的傳送者應用程式轉換任何串流,並使用瀏覽器TVSDK在Chromecast上播放串流。

啟用Cast的應用程式有兩個元件:

  • 傳送者應用程式,可當成遙控器。

    傳送者應用程式包括智慧型手機、個人電腦等。 此應用程式可使用iOS、Android和Chrome適用的原生SDK來開發。

  • 接收器應用程式,可在Chromecast上執行並播放內容。

    重要

    此應用程式只能是HTML5應用程式。

傳送者和接收者使用Cast SDK來傳送訊息。

基本工作流

以下是此程式的概述:

  1. 傳送者應用程式會建立與接收者應用程式的連線。
  2. 傳送者應用程式會傳送訊息,將媒體載入接收者應用程式。
  3. 接收器應用程式會開始播放。
  4. 傳送者應用程式會將播放控制訊息(例如播放、暫停、搜尋、快進、快倒轉、倒轉、音量變更等)傳送至接收者應用程式。
  5. 接收器應用程式會對這些訊息做出反應。

消息格式

您必須定義訊息,讓傳送者和接收者瞭解。 以下是尋道訊息的範例:

{
"type": "seek",
"seekTo": 10000
}

當透過Cast SDK傳送自訂訊息(例如搜尋訊息)時,需要自訂訊息命名空間。 以下是JavaScript中的範例:

Custom Message Namespace
var MSG_NAMESPACE = "urn:x-cast:com.adobe.primetime";

建立連接

重要

建立連線時不涉及瀏覽器TVSDK API。

要建立連接,發送方和接收方必須完成以下任務:

  • 傳送者必須檢閱位於傳送者應用程式開發的平台檔案。

  • 接收器使用Cast接收器API來建立與傳送者應用程式的連線。 例如:

    window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
    
    window.castReceiverManager.onReady = function (event) { /*handle event*/ };
    window.castReceiverManager.onSenderConnected = function (event) { /*handle event*/ };
    window.castReceiverManager.onSenderDisconnected = function (event) { /*handle event*/ };
    
    var customMessageBus = window.castReceiverManager.getCastMessageBus(MSG_NAMESPACE);
    customMessageBus.onMessage = function (event) { /*handle messages*/ };
    
    window.castReceiverManager.start();
    

消息處理

要向接收方發送消息,請參閱發送方平台的文檔。

重要

您必須在所有消息中包含自定義消息namespace MSG_NAMESPACE

若是接收器應用程式,請依照轉播接收器API的檔案進行。

Chrome型傳送者訊息範例

window.session.sendMessage(MSG_NAMESPACE, message, successCallback, errorCallback); //https://developers.google.com/cast/docs/reference/chrome/chrome.cast.Session#sendMessage

以Chrome為基礎的傳送者事件處理

將事件處理常式系結至UI元素,當觸發對應事件時,這些元素會傳送訊息。 例如,對於以Chrome為基礎的傳送者應用程式,搜尋事件可能會傳送如下:

document.getElementById("#seekBar").addEventListener("click", seekEventHandler);

function seekEventHandler(event) {
    seekMessage = { type: "seek", seekTo: player.currentTime }; //player is an instance of AdobePSDK.MediaPlayer
    window.session.sendMessage(MSG_NAMESPACE, seekMessage, successCallback, errorCallback);
}

接收者訊息處理

從接收器應用程式中,以下是如何處理搜尋訊息的範例:

customMessageBus.onMessage = function (event) {
    var message = JSON.parse(event.data);
    switch (message.type) {
        case "seek":
            player.seek(parseInt(message.seekTo));
            break;
        //code for handling other events
        default:
            break;
    }
};

本頁內容