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

Android 版 Chrome 用 Google Cast

Sam Dutton

スマートフォンのウェブアプリを使用して、会議用プロジェクタにスライドデッキをプレゼンテーションしたり、モバイルウェブアプリをコントローラとして使用して、テレビ画面で画像を共有したり、ゲームをプレイしたり、動画を視聴したりできるとしたらどうでしょう。

Android 版 Chrome の最新リリースでは、Cast Web SDK を使用してサイトを Google Cast デバイスに表示できます。これにより、Android または iOS の Chrome（またはデスクトップの拡張機能）で Web SDK を使用して Cast 送信元アプリを作成できるようになりました。また、Android と iOS のネイティブ Cast SDK を使用するアプリも作成できるようになりました。（以前は、Google Cast 送信元アプリに Google Cast Chrome 拡張機能が必要だったため、Android ではネイティブアプリからのみ Cast デバイスを操作できました）。

以下では、Web SDK を使用して Cast 送信元アプリを作成する方法について簡単に説明します。詳しくは、Chrome Sender アプリ開発ガイドをご覧ください。

Cast を使用するすべてのページには、Cast ライブラリを含める必要があります。

<script
  type="text/javascript"
  src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>

API の可用性を処理し、Cast セッションを初期化するためのコールバックを追加します（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 コールバック（上記を参照）を使用すると、アプリは既存の Cast セッションに参加または管理できます。

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 機能に関する情報が記載されています。

現在、Cast レシーバーアプリケーションに表示できるのは、Cast Web SDK を使用した場合のみです。現在、Cast SDK を使用せずに Presentation API を（パソコンと Android で）使用できるようにし、Google に登録せずに Cast デバイスにウェブページを表示できるようにする作業が進められています。Chrome 専用の Cast SDK とは異なり、標準 API を使用すると、API をサポートする他のユーザーエージェントやデバイスでページを操作できます。

Presentation API は、リモート再生 API とともに、ウェブページがセカンドスクリーンを使用してウェブコンテンツを表示できるようにするためのセカンドスクリーンワーキンググループの取り組みの一環です。

これらの API は、オンラインに接続するさまざまなデバイス（ユーザーエージェントを実行するコネクテッドディスプレイなど）を活用し、「コントロール」デバイスと「ディスプレイ」デバイスを備えた多種多様なアプリケーションを実現します。

実装の進捗状況については、随時お知らせいたします。

それまでの間、バグを見つけた場合は crbug.com/new からお知らせください。機能リクエストがある場合も同様です。

Android 版 Chrome 用 Google Cast

補足説明