このページは Cloud Translation API によって翻訳されました。

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 contentId、contentType、その他の情報を使用する学習します。次に、 LoadRequest リクエストに関連するすべての情報を設定します。最後に、 CastSession で loadMedia(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。

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

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

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

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

RemotePlayer と RemotePlayerController には、データバインディングフレームワーク（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 イベントが呼び出されます。

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

設定

高度な機能の追加

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

用語