このデベロッパー ガイドでは、ウェブに 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 があります。Namespace は以下を表します。
- API に対するオペレーションを呼び出すメソッドまたは関数
- API のリスナー関数のイベント リスナー
このフレームワークは、次の主要コンポーネントで構成されています。
CastContext
リクエストに関する情報を提供するシングルトン オブジェクトで、 現在のキャスト状態を確認し、キャスト状態とキャスト セッションのイベントをトリガーします 必要があります。CastSession
オブジェクトがセッションを管理します。つまり、 デバイスの音量の変更、イベントのトリガー ミュート状態、アプリのメタデータなどです。- キャスト アイコン要素は 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
イベントが呼び出されます。
詳しくは、 ウェブレシーバーでのストリーミング転送 をご覧ください。