Subscribed unsubscribe Subscribe Subscribe

@kyanny's blog

Write down what I learnt. Opinions are my own.

Chromecast SDK で画像を一枚表示する最小限のサンプル

Chromecast を買ったので SDK で遊んでみた。

Happy casting! https://dl.dropboxusercontent.com/u/4289117/cast/sender.html

ソースコードはこちら https://github.com/kyanny/chromecast-demo/tree/master

Google Cast 拡張をインストール済みの Chrome ブラウザで上記のページを開くと、キャストするデバイスを選ぶウィンドウがポップアップする。デバイスを選ぶと我が家の猫の写真が表示されます :)

f:id:a666666:20140531204240p:plain

デモ動画その1: Sender アプリケーション側。右側にあるのは Chrome DevTools のコンソールで、デバッグ用に仕込んだ console.log が流れている(なんか映像がボケてて見づらいけど...)

デモ動画その2: 上記の操作をしたときテレビに写真が表示される様子。 Receiver アプリケーションは Default Receiver を使っているので実装ゼロ。奥さんに協力してもらって撮影したが、テレビ画面の明るさにあわせたら MacBook のディスプレイが光りすぎてしまった。

参考にしたもの: 公式のドキュメントとサンプルアプリケーション。 https://developers.google.com/cast/docs/chrome_sender https://github.com/googlecast/CastHelloVideo-chrome

公式の Developer's Guide は順を追っているもののやや断片的で、全体像が見づらい。何も考えずにコピペしてたらいろいろ動かなくて悩んだ。

一方で GitHub 上にあるサンプルアプリケーションは包括的なぶん盛りだくさんすぎて、必須の実装がどこまでなのかわからず悩んだ。 HTML 側もそれなりに凝った作りになっているので、 JavaScript をコピペするだけですんなり動くものでもなく、苦労した。

あと、 Default Receiver にmedia として画像の URL を渡すときは MIME TYPE も正しく渡してあげないと画面に表示されないので注意。