カスタム ウェブレシーバー

ジャンプ スタート - 基本的なカスタム ウェブ レシーバーを作成するコードはシンプルです。Web Receiver アプリを登録してから、基本的な Web Receiver アプリを作成します。

Web Receiver SDK は、組み込みのメディア プレーヤーを使用して、シームレスで簡単な再生エクスペリエンスを提供します。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>

URL プロトコルに関するおすすめの方法: 上記の URL では &httpt" または "https:" プロトコルを指定していません。cast_receiver_framework.js リソースを調達する際にこれらのプロトコルを省略すると、このリソースは Web Receiver アプリをホストしているサーバーと同じプロトコルを使って取得できるようになります。つまり、開発用に HTTP と本番環境用に HTTPS の切り替えは透過的で、コードを変更する必要はありません。(公開されている Web Receiver アプリは、TLS 対応サーバーでホストする必要があります)。

SDK のプレビュー

Cast Web Receiver SDK のプレリリース版も、非本番環境アプリケーションのテストに使用できます。SDK プレビュー URL について詳しくは、Google Cast Web Receiver SDK Preview URL をご覧ください。

アプリケーションのライフサイクル

ウェブ レシーバー アプリのライフサイクルは、ウェブ レシーバーがキャスト デバイスに読み込まれた時点から開始し、アプリが破棄され、キャスト デバイスがデフォルトの状態に戻ります。

Web Receiver アプリのライフサイクル中に、メッセージは Web Receiver と接続された送信者アプリケーションの間で交換されます。送信側アプリは、Google Cast デバイスに最初のメッセージを送信し、特定のアプリ ID を使用してセッションを作成するよう要求します。Google Cast デバイスが Web Receiver アプリを読み込みしようとするので、Web Receiver のライフサイクルが開始されます。ネットワークの問題がなければ、Web Receiver アプリはアプリ ID に関連付けられた解決済み URL を使用してネットワークからダウンロードされます。読み込まれると、Web Receiver アプリがセットアップ オペレーションを実行し、接続された送信者アプリケーションからのメッセージを処理する準備ができていることを示します。

ウェブ レシーバは、次の状況で破棄(現在のライフサイクルを終了してアプリケーションを閉じる)することがあります。

  • Web Receiver アプリは、アプリケーション セッションを終了するために最後に接続された送信者から明示的なメッセージを取得します。
  • Web Receiver アプリが、送信者が接続されていないため定義された期間アイドル状態であり、アプリケーション セッションを終了することにしました。
  • 別のキャスト セッションが開始されました。
  • Web Receiver は、通常のライフサイクルに致命的なエラーが発生します。

Web Receiver SDK は、すべての一般的なケースを UX ガイドラインに従って処理します。

主要なクラス

Web Receiver SDK フレームワークには主に 2 つのクラスがあります。

  • cast.framework.CastReceiverContext - フレームワーク全体を管理し、必要なライブラリを読み込みます。このオブジェクトを使用すると、次のことができます。

    • アプリケーションの構成オプションを設定する
    • システム イベント(送信者が接続または切断されたなど)を処理する
    • カスタム チャネルを作成する
    • キャスト通信の開始
  • cast.framework.PlayerManager - メディア再生を管理します。送信者からのリクエストに応じて、基になるプレーヤーとメディア要素を処理します。このオブジェクトを使用すると、次のことができます。

    • 再生オペレーションを処理する
    • 送信者からの再生に関するリクエストを処理する
    • 再生関連のイベントを処理する

Web Receiver アプリを登録する

Web Receiver アプリを開発する前に、Web Receiver アプリを Google Cast SDK Developer Console に登録する必要があります。詳細については、登録をご覧ください。すべての Web Receiver アプリで、送信者 API を介して Web Receiver に送信するコマンド メッセージにアプリ ID を提供する必要があります。Web Receiver アプリケーションを登録すると、送信者の API 呼び出しに含めるアプリ ID を受け取ります。

基本的な Web Receiver アプリを作成する

以下に、カスタマイズのない基本的な Web Receiver アプリの主な構造を示します。

  1. メディア プレーヤーを表す cast-media-player HTML 要素。
  2. Web Receiver フレームワークを読み込むスクリプト HTML 要素。
  3. start() を呼び出して、Web Receiver アプリを起動します。このオプションは表示されません。

以下は、カスタマイズせずに Cast Application Framework を使用するウェブ レシーバ アプリの最小コードです。このスクリプトをそのままコピーしてアプリに貼り付けて、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>

この時点で、ユーザーは送信側のアプリを開き、キャスト デバイスに接続してメディアに移動し、[再生] を押すと、ウェブ レシーバにメディアをテレビにストリーミングして視聴してもらうことができます。

この基本的な Web Receiver とカスタマイズされたレシーバー アプリを比較します。

メディアとプレーヤー

キャスト フレームワークには、cast-media-player HTML 要素で表される組み込みのメディア プレーヤーが用意されています。このメディア プレーヤーは、MPEG-DASH、HLS、スムーズ ストリーミングなどのストリーミング プロトコルの再生をサポートしています。

サポートされているメディア コーデックとコンテナの一覧については、サポートされているメディアをご覧ください。デベロッパーは、キャスト メッセージングにより、読み込み、再生、一時停止、シークなど、送信者が開始した操作のリストをサポートできます。これらの操作では、Cast SDK がメディアの操作を処理します。サポートされているオペレーションのリストについては、アプリのプラットフォームの送信者 API リファレンスをご覧ください。Android 送信側 RemoteMediaClientiOS 送信側クライアントGCKMediaControlChannelウェブ送信側Mediaをご覧ください。

クロスオリジン リソース シェアリング

Google Cast では、クロスオリジン リソース シェアリング(CORS)が完全にサポートされています。ストリーミング プロトコルでは、ほとんどのファイルベースのプロトコルとは異なり、XMLHttpRequest を使用して非同期の方法でコンテンツにアクセスします。CORS の世界では、これらのリクエストは、リソースが発信されたサーバーからの CORS ヘッダーによって不適切なアクセスから保護されます。つまり、コンテンツ サーバーは、それが含まれる場所に関して判断しています。最新のブラウザのほとんどは CORS を完全にサポートしています。iOS デバイスと Android デバイスは下位レベルのコンテンツにアクセスし、これらのヘッダーは確認しません。これは、デベロッパーがストリーミング コンテンツを使用したいときに最初に発生する問題です。詳細については、クロスオリジン リソース シェアリングをご覧ください。