13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ファーストサーバAdvent Calendar 2015

Day 16

[Signagify 2] Chromecast の独自アプリ開発

Last updated at Posted at 2015-12-15

この記事はファーストサーバのAdvent Calendar 2015の16日目として書きました。
http://qiita.com/advent-calendar/2015/firstserver

内容は3日目の続きです。
http://qiita.com/vanx2/items/c2d085da324f81d41f63

独自Chromecastアプリの開発を通してmDNSやCastV2ってなんぞって話をしていきたいのですが、まずはChromecastの仕組みから説明したいと思います。前回の投稿でわかりづらいと大変好評だったので図を増やしました。

#Chromecast
前回サラッと触れましたが、ChromecastはスマホやPCで選んだ画像や動画などのコンテンツをTVに表示することができます。GoogleフォトやYouTubeなどのGoogle製だけでなくNetflixやhuluなどのアプリからTVにキャストすることができ、SDKが提供されているので独自のアプリを作ることも可能です。この独自アプリについて掘り下げていきたいと思います。

Chromecastは大きく、SenderアプリとReceiverアプリで構成されています。

s-r-1.png

SenderアプリはスマホやPC上で動作し、Chromecastに対してリクエストを投げるクライアント側のアプリです。ReceiverアプリはChromecast上で動作し、TVに出力する映像や音声を制御します。

###■Senderアプリ
Senderアプリの役割はアプリとしてユーザーにインターフェースを提供し、TV上にキャストしたい情報を選択されたChromecastに投げることです。

sr2-2.png

提供されているSDKは、Androidアプリ用、iOSアプリ用、Chromeアプリ用の3つです。

ネットワーク内からキャストできるChromecastを見つけ出したり、ChromecastやChromecast上で動くReceiverアプリと通信を行う際にSDK使います。
※ゲストモードをオンにしてAndroidからであれば同じネットワークにいなくてもWiFi位置情報と可聴域外の高周波音を使って接続できるようです。

###■Receiverアプリ
ReceiverアプリはHTML5でTVに出力する内容を表現します。つまり、Chromecastの中身はブラウザ(Chrome)が動いていて、WEBページがTVに表示されていると捉えることができます。

tb-2.png

Receiverアプリは用途によって3種類の中から選んで利用します。

  • Default Media Receiver
  • Custom Receiver
  • Styled Media Receiver

・Default Media Receiver

メディアの基本的な操作(再生、スキップ、一時停止など)だけで事足りる場合はこのアプリを使います。

・Styled Media Receiver

メディアの基本的な操作に加えて、タイトルのフォントやプログレスバーなどの装飾をカスタマイズしたい場合はこのアプリを使います。装飾するためのCSSや画像ファイルを制作する必要があります。

・Custom Receiver

独自の処理や独自の装飾を行ってReceiverアプリを自分で実装する場合はこのアプリを使います。Senderアプリとの通信やサポートされていないメディアの再生でSDKを利用します。

もちろんJSでアニメーションさせたり外部サーバと通信したりできますが、WebGLやChrome Extensionsなどは動かず、同時に再生できるvideoタグは1つまでなどの制限があります。

また、Chromecastは選択やスクロールをさせるための入力インターフェースを持たないので表示領域がTVの1画面に収まるようデザインする必要があります。メモリも小さくコンテンツのキャッシュはほぼ利いていないように思えました。


Styled Media ReceiverとCustom Receiverは利用するファイルをhttpsでアクセスできる場所でホスティングし、そのURLを「Google Cast SDK Developer Console」で登録する必要があります(有料:$5)。オレオレやクロスドメインはアホかって怒られます(実行しても何も表示されない)。

限られた端末でしか利用せずReceiverアプリを公に公開する必要がない場合は、「Google Cast SDK Developer Console」にChromecastのMacアドレスを登録すればhttpでホスティングすることもできます。

というわけで

SDKを利用して実装するならこれぐらいの情報で作れるような気がします。この基礎知識を踏まえてSenderアプリを独自で実装していきたいと思います。

今回こそmDNSとCastV2の内容について触れてみようと思ったけどAdvent calenderの公開時間過ぎちゃったので次回書いてみようと思います。

13
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?