Cast SDK をウェブ センダー アプリに統合する

このデベロッパー ガイドでは、ウェブに Google Cast サポートを追加する方法について説明します。 Cast SDK を使用する送信アプリ。

用語

モバイル デバイスまたはブラウザは、再生を制御する送信者になります。 Google Cast デバイスがレシーバーとなり、コンテンツが視聴可能になります。 画面をタップして再生します。

Web Sender SDK は 2 つの部分で構成されています。 (cast.framework) Base API を使用すると、 (chrome.cast) 通常は、よりシンプルで高レベルのフレームワーク API で呼び出しを行います。 これらは下位レベルの Base API で処理されます

送信フレームワークとは、フレームワーク API、モジュール、関連する 下位レベルの機能のラッパーを提供するリソースです。「 送信アプリまたは Google Cast Chrome アプリはウェブ(HTML/JavaScript)アプリを指します。 送信側のデバイスの Chrome ブラウザ内で実行されます。ウェブ レシーバー アプリとは、 Chromecast または Google Cast デバイスで実行されている HTML/JavaScript アプリにキャストできます。

送信者フレームワークは、非同期コールバック設計を使用して送信者に通知します。 イベントのアプリ、キャストアプリの動作状態の切り替え サイクルです。

ライブラリを読み込む

アプリに Google Cast の機能を実装するには、アプリに Google Cast Web Sender SDK がダウンロードされている場所を指定します。追加 Web Sender Framework API を読み込む loadCastFramework URL クエリ パラメータ できます。アプリのすべてのページで、次のようにライブラリを参照する必要があります。

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

フレームワーク

Web Sender SDK は cast.framework. を使用します*。 使用します。Namespace は以下を表します。

  • API に対するオペレーションを呼び出すメソッドまたは関数
  • API のリスナー関数のイベント リスナー

このフレームワークは、次の主要コンポーネントで構成されています。

  • CastContext 状態に関する情報を提供するシングルトン オブジェクトで、 現在のキャスト状態を確認し、キャスト状態とキャスト セッションのイベントをトリガーします 必要があります。
  • CastSession オブジェクトがセッションを管理します。つまり、 デバイスの音量の変更、イベントのトリガー、 ミュート状態、アプリのメタデータなどです。
  • キャストボタン要素は、HTML カスタム要素で、 HTML ボタンを拡張します。提供されたキャスト アイコンでは不十分な場合、 キャスト状態を使用してキャスト アイコンを実装できます。
  • RemotePlayerController リモート プレーヤーの実装を簡素化するデータ バインディングを提供します。

詳しくは、 Google Cast Web Sender API リファレンス Namespace の完全な説明です。

キャスト アイコン

アプリのキャスト アイコン コンポーネントは、すべてフレームワークによって処理されます。この 公開設定の管理とクリック イベントの処理が含まれます。

<google-cast-launcher></google-cast-launcher>

または、プログラムでボタンを作成することもできます。

document.createElement("google-cast-launcher");

サイズや配置などの追加のスタイル設定を 要素を追加します。--connected-color 属性を使用して以下を行います。 接続されている Web Receiver の状態の色を選択します。 切断状態の場合は --disconnected-color

初期化

フレームワーク API を読み込んだ後、アプリはハンドラを呼び出します。 window.__onGCastApiAvailable。アプリでこのハンドラが設定されていることを確認する必要があります。 window送信側ライブラリを読み込む前に呼び出す必要があります。

このハンドラ内で、 setOptions(options) メソッド CastContext

例:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

次に、次のように API を初期化します。

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

まず、アプリはそのインスタンスのシングルトン インスタンスを取得し、 CastContext オブジェクト フレームワークによって提供されます。その後、 setOptions(options) 使用 CastOptions オブジェクト applicationID を設定します。

登録が不要なデフォルトのメディア レシーバーを使用している場合は、 次に示すように、Web Sender SDK によって applicationID:

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

メディア コントロール

CastContext 初期化されると、アプリは現在の CastSession(任意) 使用時間 getCurrentSession()

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

CastSession を使用すると、接続したキャスト デバイスにメディアを読み込むことができます。 loadMedia(loadRequest)。 まず、 MediaInfo contentIdcontentType、その他の情報を使用する 学習します。次に、 LoadRequest リクエストに関連するすべての情報を設定します。最後に、 CastSessionloadMedia(loadRequest) を呼び出してください。

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

loadMedia メソッドは Promise 成功に必要なオペレーションを実行できます。 Promise が拒否された場合、関数の引数は chrome.cast.ErrorCode

プレーヤーの状態変数には、 RemotePlayerRemotePlayer に対するすべての操作(メディア イベントのコールバックや コマンドは RemotePlayerController

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

RemotePlayerController により、アプリは以下のメディア コントロールを完全に制御できます。 読み込まれたメディアの再生、一時停止、停止、シーク。

  • 再生/一時停止: playerController.playOrPause();
  • 停止: playerController.stop();
  • シーク: playerController.seek();

RemotePlayerRemotePlayerController には、 データ バインディング フレームワーク(Polymer や Angular など)で使用し、 使用します。

Angular のコード スニペットは次のとおりです。

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

メディア ステータス

メディアの再生中には、各種イベントが発生します。これらのイベントは、 さまざまなイベントをリッスンする cast.framework.RemotePlayerEventType イベントを RemotePlayerController オブジェクト。

メディア ステータス情報を取得するには、次のコマンドを使用します。 cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED これは、再生が変更されたときや、 CastSession.getMediaSession().media できます。

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

一時停止、再生、再開、移動などのイベントが発生した場合、アプリは キャスト デバイス上のウェブ レシーバー アプリと同期するようにし、 できます。最新情報をご覧ください をご覧ください。

セッション管理の仕組み

Cast SDK には、キャスト セッションというコンセプト、 これは、デバイスへの接続、Web ブラウザの起動(またはウェブ レシーバアプリ、そのアプリへの接続、メディア コントロール チャネルの初期化。Web Receiver を確認する アプリケーション ライフサイクル ガイド をご覧ください。

セッションはクラスによって管理される CastContext このメソッドは、 cast.framework.CastContext.getInstance()。 個々のセッションは、クラスのサブクラスで表される Session。たとえば CastSession キャスト デバイスによるセッションを表します。アプリは、現在アクティブな セッションのキャスト方法 CastContext.getCurrentSession()

セッション状態をモニタリングするには、リスナーを CastContext: CastContextEventType.SESSION_STATE_CHANGED イベントタイプ。

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

接続が切断された場合(ユーザーが [キャストを停止] をクリックした場合など)ボタンを 追加することもできます。 RemotePlayerEventType.IS_CONNECTED_CHANGED イベントタイプを指定します。リスナーで、 RemotePlayer: 切断されました。その場合は、必要に応じてローカル プレーヤーの状態を更新します。例:

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

ユーザーは、フレームワーク Cast を介して Cast 終端を直接制御できますが、 ] ボタンを押すと、送信側が現在のルーターを使用してキャストを停止できます。 CastSession 渡されます。

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

ストリーミング転送

セッション状態の保持はストリーム転送の基礎であり、 音声コマンドや Google Home を使って、既存の音声ストリームや動画ストリームをデバイス間で移動できます。 アプリ、スマートディスプレイ。メディアの再生を別のデバイス(ソース)で停止し、別のデバイス(ソース)で続行する あります。最新のファームウェアを搭載したキャスト デバイスは、デバイスのソースまたは宛先として機能できます。 ストリーム転送

ストリーミング転送中に新しい宛先デバイスを取得するには、 CastSession#getCastDevice()cast.framework.SessionState.SESSION_RESUMED イベントが呼び出されます。

詳しくは、 ウェブレシーバーでのストリーミング転送 をご覧ください。