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

Android 版 Chrome 用 Google Cast

Sam Dutton 氏

Twitter GitHub Glitch Mastodon ホームページ

スマートフォンのウェブアプリで、モバイルウェブアプリをコントローラとして使用して、スライド資料を会議のプロジェクターにプレゼンテーションしたり、画像を共有したり、ゲームをプレイしたり、テレビで動画を視聴したりできると想像してみてください。

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 からお知らせください。

Android 版 Chrome 用 Google Cast

補足説明