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

ジャンプ スタート - 基本的なカスタム ウェブを作成するためのコード レシーバーはシンプルです。次にスキップする ウェブ レシーバーを 基本的な API キーを作成する ウェブ受信アプリ。

Web Receiver SDK は組み込みのメディア プレーヤーを使用して、 必要があります。Google アシスタントもすぐにサポートできます。 Cast 固有の機能として認識され、すべての送信側と受信側で自動的に タッチ対応デバイス向けに用意しています新機能がリリースされても、 追加の送信者の変更なしでサポートされます。

Custom Web Receiver はカスタム開発された 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 では 「http:」または「https:」構成されます。これらのプロトコルを省略して、 cast_receiver_framework.js リソースを使用すると、以下を使用してこのリソースを取得できます。 Web Receiver アプリをホストするサーバーと同じプロトコルを使用します。つまり 開発用の HTTP と本番環境用の HTTPS の切り替えが透過的 コードを変更する必要はありません(公開済みのウェブ レシーバー アプリは、 TLS 対応サーバー上でのみサポートされます)。

SDK のプレビュー

Cast Web Receiver SDK のプレリリース版は、 非本番環境アプリケーションのテストです。SDK のプレビュー URL の詳細 Google Cast Web Receiver SDK のプレビュー URL をご覧ください。

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

Web Receiver アプリのライフサイクルは、Web Receiver が キャスト デバイスに読み込まれ、 キャスト デバイスがデフォルトの状態に戻ります。

ウェブ受信アプリのライフサイクルを通じて、メッセージは Web Receiver および接続されているすべての送信者アプリケーション。送信側アプリケーションは Google Cast デバイスに最初のメッセージを送信してセッションの作成をリクエストします 特定のアプリ ID を使用して識別されます。これが Web Receiver のライフサイクル、つまり Google Cast デバイスがウェブレシーバー アプリを読み込もうとします。あると仮定すると 問題がなければ、Web Receiver アプリがネットワークからダウンロードされます。 アプリ ID に関連付けられている解決済み URL を使用します。読み込まれた後、 アプリがセットアップ操作を実行し、処理の準備が整ったことを通知します。 送信元のアプリケーションから受信できます。

Web Receiver アプリが破棄されることがあります(現在のライフサイクルが終了し、 アプリケーションなど)に、次の条件が適用されます。

  • ウェブ レシーバー アプリが、最後に接続したデバイスから明示的なメッセージを取得する アプリケーション セッションを終了します。
  • Web Receiver アプリが一定時間アイドル状態になり、 アプリケーション セッションを終了することを決定した場合。
  • 別のキャスト セッションが開始されました。
  • Web Receiver の通常のライフサイクル中に致命的なエラーが発生しました。

Web Receiver SDK は、一般的なすべてのケースを Google の UX ガイドライン

主要クラス

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

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

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

    • 再生操作を処理する
    • 送信者からの再生関連のリクエストを処理する
    • 再生関連のイベントを処理する

Web Receiver アプリを登録する

Web Receiver アプリを開発する前に、Web Receiver を Google Cast SDK Developer Console を使用したレシーバアプリ詳しくは、 登録をご覧ください。すべてのウェブレシーバー 送信側のアプリケーションでコマンド メッセージとともにアプリ ID を指定する必要があります。 送信できますウェブ 受信側のアプリケーションで、送信者の API 呼び出し。

基本的なウェブ レシーバー アプリを作成する

基本的なウェブ レシーバー アプリの主な構造を次に示します。 カスタマイズ:

  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>

この時点で、送信側アプリを開いてキャスト デバイスに接続し、 [メディア] に移動して [再生] を押すと、Web Receiver に テレビにキャストできます。

この基本的な Web Receiver と カスタマイズされたレシーバーアプリ

メディアとプレーヤー

キャスト フレームワークには、組み込みのメディア プレーヤーがあり、 cast-media-player HTML 要素このメディア プレーヤーは次のデバイスでの再生をサポートしています ストリーミングプロトコル(MPEG-DASH、HLS、スムーズストリーミングなど)に対応しています。

サポートされているメディア コーデックとコンテナのセットについては、 サポートされているメディア。デベロッパーは Cast メッセージングを使用して 読み込み、再生、一時停止、送信など、送信者が開始した操作のリストをサポート シークします。Cast SDK はメディアとのやり取りを処理します。リストには サポートされているオペレーションについては、アプリのプラットフォーム用の sender API リファレンスをご覧ください。 Android Sender の RemoteMediaClientGCKMediaControlChannel(iOS の送信者) および Media(ウェブ送信者)

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

Google Cast は、クロスオリジン リソース シェアリング(CORS)を完全にサポートしています。ストリーミング 多くのファイルベースのプロトコルとは異なり、非同期プロトコルでコンテンツにアクセスします。 XMLHttpRequest を使用します。CORS の世界では、これらのリクエストは アクセスが制御されているサーバーからの CORS ヘッダーによる 発生します。つまり、コンテンツのサーバーには保存場所の決定権がある 含まれます。最新のブラウザはほとんどが CORS に完全に対応しています。iOS および Android デバイス 下位レベルのコンテンツにアクセスでき これらのヘッダーを確認しないでくださいこれは、 デベロッパーがストリーミングを 利用しようとしたときに最初に発生する問題は 説明します。クロスオリジン リソース シェアリングをご覧ください。 表示されます。