スマホとWebSocketで連携するテレビ用SPA（Single-Page Application）の作り方：Chromecastアプリ開発入門（2）（1/5 ページ）

メディアストリーミングデバイス「Chromecast」用アプリの開発方法を一から解説する連載。今回は、Senderのコマンドを受信してHTML5のvideo要素を使ってメディアを再生したり画面を写したりするReceiverアプリの概要と作り方などを解説します。

[大西克己，オープンストリーム]

HTML5のvideo要素を使うReceiverアプリ開発

今回の主な内容

• Receiverと複数Senderの関係について
• Receiverアプリは3種類
  • グーグルがホスティングし提供している「Default Media Receiver」
  • テンプレートを基にカスタマイズする「Styled Media Receiver」
  • HTML5やCSS、JavaScriptを用いて独自に開発する「Custom Receiver」
• Custom Receiver型のメディアストリーミングアプリの開発
  • メディアストリーミングアプリの基本
  • HTML5のVideo APIを使ってメディアを操作する
  • コラム「HTML5のvideo要素について詳細に知りたい方は」
  • Senderアプリからコマンドメッセージを受け取ってメディアを操作する
  • コラム「MediaManagerとMediaElementのハンドラーの使い分けについて」
  • メディアプレーヤーのUI更新時にページ遷移させないように実装する
• Adaptive Bitrate Streaming／DRMのメディアの再生
  • Video on HTML5のAdaptive Bitrate Streaming／DRMメディア拡張
  • Adaptive Bitrate Streaming／DRMメディア再生
• Receiverアプリを配置するサーバーの環境設定
• 次回はAndroid／iOS版のSenderアプリの実装

連載目次

　Web＆モバイル技術のSIを手掛けるオープンストリームでは、Chromecastデバイス国内発売前から、スマートフォンアプリ（iOS版およびAndroid版）の対応について技術検証を行い、詳細な技術ノウハウを獲得してきました。本連載では、その時に得た技術を基にChromecastアプリについて、システム構成、開発環境、開発準備、メディアストリーミングアプリ開発方法について注意点を含めて解説していきます。

　前回の「Chromecastで動くHTML5ベースのメディアストリーミングアプリを作るための基礎知識」では、メディアストリーミングデバイスChromecastの概要とシステム構成、開発環境、専用アプリを作るための準備と手順などを解説しました。

　今回は、コンテンツ操作や状態管理、Adaptive Bitrate StreamingやDRMを使用した、より高度なReceiverアプリの開発について解説します。

Receiverと複数Senderの関係について

　Chromecast上で実行されているReceiverアプリに対して、同じApplication IDのSenderアプリであれば複数のデバイスから接続できます（図1）。

図1　Receiverと複数のSender

　例えば、先にiPhone（端末A）のSenderアプリからコンテンツを再生している状態で、後からAndroid（端末B）のSenderアプリでReceiverアプリに接続した場合、Androidアプリは、現在再生しているコンテンツの情報を取得できます。

　また、このAndroidアプリが別のコンテンツ再生をChromecastに対して指示した場合、現在のコンテンツの再生は中断し、新しいコンテンツの再生がスタートし、先行していたiPhone（端末A）のSenderアプリにはこの新しいコンテンツの情報が届きます。

　Application IDの異なるアプリBからは、アプリAが再生しているコンテンツの情報を取得できません。

　なお上記の説明で、端末Aと端末BのOSの種類には関係ありません。基本的にReceiverアプリは接続中の全てのSenderアプリにブロードキャストで情報を送信しています。

Receiverアプリは3種類

　前回記事では、Receiverアプリについて「Styled Media Receiver」「Custom Receiver」の二つを解説しましたが、今回はもう一つの「Default Media Receiver」を含めた三つについて解説したいと思います。

1. Default Media Receiver
2. Styled Media Receiver
3. Custom Receiver

グーグルがホスティングし提供している「Default Media Receiver」

　グーグルがホスティングし提供しているReceiverアプリで、メディアストリーミングが可能です。「Google Cast SDK Developer Console」へ登録しなくても使えますが、UIのカスタマイズは一切できません。UIカスタマイズが必要なく単純にコンテンツを再生したいだけの場合に使用するにはよいでしょう。

　Senderで使用するApplication IDは、各SDKで以下の定数が定義されています。

表1　Default Media ReceiverのためのApplication ID定義

Androidアプリ	CastMediaControlIntent.DEFAULT_MEDIA_RECEIVER_APPLICATION_ID
Chromeアプリ	chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
iOSアプリ	kGCKMediaDefaultReceiverApplicationID

テンプレートを基にカスタマイズする「Styled Media Receiver」

　あらかじめ用意されているメディア再生用のプレーヤー（JavaScriptアプリ）を使用し、CSSを設定することでスキンを変更できるアプリです。変更ができるスキンの要素は以下の通りです。

• .background：背景
• .logo：起動時のロゴ
• .progressBar：メディアのプログレスバー
• .splash：メディア再生をしていないときに表示されるコンテンツ
• .watermark：メディア再生中に表示する透かしロゴ

　スキン変更についての詳細は「Styled Media Receiver - Google Cast - Google Developers」を参照してください。CSSの設定例や設定により、どこが変更できるのか詳細に記述されています。

　スキンを定義したCSSは自前のWebサーバーでホスティングします。

HTML5やCSS、JavaScriptを用いて独自に開発する「Custom Receiver」

　HTML5やCSS、JavaScriptを用いて独自に開発するReceiverアプリです。HTML5のアプリは自前のWebサーバーでホスティングします。メディアストリーミング、ゲーム、イメージギャラリーなどのさまざまなアプリを開発できます。

　メディアストリーミングでは、「Supported Media for Google Cast - Google Cast - Google Developers」に定義されているメディア、Adaptive Bitrate Streamingプロトコル、DRMを使えます。

　今回の記事では、このCustom Receiverの開発方法について解説します。

図2　Chromecastと周辺サーバーの関係図