スマートフォンのウェブアプリで、モバイルウェブ アプリをコントローラとして使用して、スライド資料を会議のプロジェクターにプレゼンテーションしたり、画像を共有したり、ゲームをプレイしたり、テレビで動画を視聴したりできると想像してみてください。
Android 版 Chrome の最新リリースでは、Cast Web SDK を使用してサイトを Google Cast デバイスに表示できます。つまり、Android や iOS の Chrome(または拡張機能があるパソコン)で Web SDK を使用して Cast センダー アプリを作成できるほか、Android と iOS 向けのネイティブ Cast SDK を使用するアプリも作成できるようになります。(これまで、Google Cast センダーアプリは Google Cast Chrome 拡張機能を必要としていたため、Android ではネイティブ アプリからのみキャスト デバイスを操作することができました)。
以下に、ウェブ SDK を使用した Cast センダー アプリの作成について簡単に説明します。より包括的な情報については、Chrome Sender App Development Guide をご覧ください。
キャストを使用するすべてのページに、キャスト ライブラリを含める必要があります。
<script
type="text/javascript"
src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>
API の可用性を処理し、キャスト セッションを初期化するコールバックを追加します(API が読み込まれる前に必ずハンドラを追加してください)。
window['__onGCastApiAvailable'] = function (isLoaded, error) {
if (isLoaded) {
initializeCastApi();
} else {
console.log(error);
}
};
function initializeCastApi() {
var sessionRequest = new chrome.cast.SessionRequest(applicationID);
var apiConfig = new chrome.cast.ApiConfig(
sessionRequest,
sessionListener,
receiverListener
);
chrome.cast.initialize(apiConfig, onInitSuccess, onError);
}
独自の登録済みカスタム レシーバー アプリケーションではなく、デフォルトのスタイル付きメディア レシーバー アプリケーションを使用する場合は、次のように SessionRequest
を作成できます。
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
DEFAULT_MEDIA_RECEIVER_APP_ID);
上記の receiverListener
コールバックは、1 つ以上のデバイスが使用可能になったときに実行されます。
function receiverListener(e) {
if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
// update UI
}
}
ユーザー エクスペリエンス ガイドラインで義務付けられており、ユーザーがキャスト アイコンをクリックしたときにキャスト セッションを開始します。
chrome.cast.requestSession(onRequestSessionSuccess,
onRequestSessionError);
function onRequestSessionSuccess(e) {
session = e;
}
デバイス選択ツールがユーザーに表示されます。
ページがすでに接続され、requestSession()
が呼び出されると、[ルートの詳細] ダイアログが表示されます。
キャスト セッションを作成したら、選択したキャスト デバイスのメディアを読み込み、メディア再生イベントのリスナーを追加できます。
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(
request,
onMediaDiscovered.bind(this, 'loadMedia'),
onMediaError
);
function onMediaDiscovered(how, media) {
currentMedia = media;
media.addUpdateListener(onMediaStatusUpdate);
}
ここで、currentMedia
変数は chrome.cast.media.Media
オブジェクトであり、再生の制御に使用できます。
function playMedia() {
currentMedia.play(null, success, error);
}
// ...
メディアの再生中は、再生/一時停止の通知が表示されます。
再生中のメディアがない場合、通知にはキャストを停止するための停止ボタンのみが表示されます。
chrome.cast.ApiConfig()
の sessionListener
コールバック(上記を参照)を使用すると、アプリは既存のキャスト セッションに参加したり、セッションを管理したりできます。
function sessionListener(e) {
session = e;
if (session.media.length !== 0) {
onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
}
}
Android 版の Chrome でウェブサイトからのメディアのキャストが許可されているものの、デフォルトのキャスト UI がユーザーの UI と干渉しないようにこの機能を無効にしたい場合は、disableRemotePlayback 属性を使用します(Chrome 49 以降で利用可能)。
<video disableRemotePlayback src="..."></video>
Cast Web SDK ガイドには、サンプルアプリへのリンクのほか、セッション管理、テキストトラック(字幕用)、ステータスの更新などのキャスト機能に関する情報が記載されています。
現時点では、Cast Web SDK を使用するキャスト レシーバー アプリにのみプレゼンテーションを表示できますが、現在、Presentation API を使用して Cast SDK なしで(パソコンと Android で)Google に登録することなくキャスト デバイスにウェブページを表示できるようにする取り組みが進行中です。Chrome のみの Cast SDK とは異なり、標準 API を使用すると、API をサポートする他のユーザー エージェントやデバイスでページを操作できます。
Presentation API と Remote Playback API は、ウェブページで 2 台目の画面を使用してウェブ コンテンツを表示できるようにする Second Screen Working Group の取り組みの一部です。
これらの API は、ユーザー エージェントを実行するコネクテッド ディスプレイなど、オンラインになるさまざまなデバイスを活用して、「制御」デバイスと「ディスプレイ」デバイスによる多種多様なアプリケーションを実現します。
実装の進捗状況がわかり次第、お知らせいたします。
それまでの間、バグを見つけた場合や機能リクエストがある場合は、crbug.com/new からお知らせください。