Chromecastで動くHTML5ベースのメディアストリーミングアプリを作るための基礎知識：Chromecastアプリ開発入門（1）（3/3 ページ）

» 2014年09月03日 18時00分 公開
[大西克己，オープンストリーム]
前のページへ 1|2|3 　　　　　　

Receiver／Senderアプリをデプロイして接続確認

　GitHubにChromecastのサンプルアプリが公開されています。ここでは、サンプルアプリの中からシンプルなサンプルをデプロイして、Developer Consoleの登録状態とReceiver／Senderの確認を行います。

　それぞれどの環境のサンプルであるかは、Google Developersサイトにある下記表を参考にしてください。

（Google Cast Downloadsの「Sample apps」）より引用

Receiverアプリの開発

　「googlecast/Cast-Simple-Receiver」は、シンプルなReceiverアプリのサンプルです。それを参考に、下記のソースではReceiverアプリのロジック部分のみ抜き出してみました。

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    video {
      width: 100%;
      height: 100%;
      margin: auto auto;
      overflow: hidden !important;
    }
  </style>
  <!-- 【1】APIの設定 -->
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
  <title>Cast Simple Receiver</title>
</head>
<body>
  <video id='vid' />
  <script type="text/javascript">
    window.onload = function() {
      // 【2】デバッグレベルの設定
      cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG);
      // 【3】Videoタグを指定してメディアマネージャを作成
      window.mediaElement = document.getElementById('vid');
      window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);
      // 【4】レシーバーマネージャのスタート
      window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
      castReceiverManager.start();
    };
  </script>
</body>
</html>
receiver.html

【1】APIの参照を設定

　必ず、このURLを指定してください。バグフィックスや新機能のアップデートが行われた場合、セルフホストしていると内容が反映されません。

【2】デバッグレベルの設定

　「Cast receiver library」のデフォルトではデバッグが無効となっています。リモートデバッグを可能にするには、ログレベルをデバッグに設定する必要があります。

【3】MediaManagerの作成

　メディアストリームを流したいvideoタグを引数にMediaManagerの作成を行います。

【4】ReceiverManagerの開始

　メディアストリームを流したいvideoタグを引数にMediaManagerの作成を行います。

※アプリを拡張していく際には、このMediaManagerとReceiverManagerのコールバックに処理を追加してくことになります。

　このReceiverアプリ（html）を、先ほどDeveloper Consoleで「Application」の登録したURLにデプロイします。

Senderアプリのデプロイ

　Senderアプリは、Android、iOS、Chromeの環境別にサンプルが提供されています。今回は、Receiverとの接続を確認するだけですので、Chromeブラウザー向けアプリを使用します。

　まず、GitHubからプロジェクトをcloneしてください。

git clone https://github.com/googlecast/CastVideos-chrome.git

　次に、CastVideos.jsから以下の行を検索して、「Application」の登録時に設定された「Application ID」に更新します。

var applicationID = '4F8B3483';

　最後に、フォルダーをWebサーバーにデプロイします。

アプリの確認

　まず、PCのChromeブラウザーにChrome extensionのGoogle Castをインストールします。このExtensionはネットワーク上のChromecastを探索し接続するために必要となります。

　次に、Senderアプリを開きます。

　続いて、Castアイコンからネットワーク上にあるChromecastデバイスを選択します。Receiverアプリが正しく登録されていない場合は、この一覧にChromecastデバイスが表示されません。Developer Consoleに登録直後は表示されないこともあります。その場合は、少し時間を空けてから試してください。

　最後に、ReceiverアプリがChromecast上で起動し、動画の再生が始まります。

デバッグ

　デバッグをするためには、Receiverアプリでデバッグを有効に設定する必要があります。以下のコードを実行することでデバッグが有効になります。

cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG);

　デバッグにはChrome Remote Debuggerを使用します。手順は以下の通りです。

　まず、Chromeブラウザーで、ChromecastデバイスのIPアドレスとポート「9222」を開きます。

　次に、Receiverアプリのデバッガーへのリンクが表示されているので、クリックして入ります。デバッガーは、Chromeブラウザーのデバッグ機能と同様に、DOMの操作・JavaScript REPLがサポートされています。

　最後に、終了する場合はブラウザーのバックボタンで戻ります。

注意：Chrome Remote Debuggerにはメモリリークの問題があり、Chromecastデバイスの動作が不安定になります。長時間の実行はお勧めしません。

Chromecast機能アップデート情報

　最後に、6月に行われたグーグルの開発者向けイベント「Google I/O」では、Chromecastのアップデート予告がされました。この内容について触れたいと思います。

同一LANに接続しなくても、近くのChromecastにCast可能になる

　Chromecastデバイスとスマホ・PCが同一LAN上なくても接続できます。これにより、Wi-Fiの接続の切り替えが不要になります。友人宅で端末内の写真を大画面でキャスト表示するのに便利かもしれません。

Androidの画面のミラーリング対応

　画面の同期表示ができるようになります。また、アプリが対応していれば、セカンダリディスプレーとして使用することも可能です。

Backdropコンソール機能

　Chromecastのアイドル画面に、Google+の写真、ニュース、天気予報などを表示できるようになります。

次回は、高度なReceiverアプリの開発について

　今回使用したReceiverアプリは、コンテンツを再生するだけの簡単なものでした。次回は、コンテンツ操作や状態管理、Adaptive Bitrate StreamingやDRMを使用したより高度なReceiverアプリの開発について解説を予定しています。

「Chromecastアプリ開発入門」バックナンバー

著者プロフィール

大西克己

株式会社オープンストリームにおいて、アーキテクトとしてAndroidの技術調査・支援、開発案件に従事。社外ではいくつかのAndroid系コミュニティに所属し、勉強会やハッカソンへ積極的に参加、アプリケーションコンテストで入賞したことがある。

最近は、Androidを中心としたウェアラブルデバイスなどのエコシステムに興味がある。


前のページへ 1|2|3 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

＠IT

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。