Facebook Twitter Google Maps RSS
Home Webアプリ Chromecast メッセージを送受信しているコードを見てみよう
formats

Chromecast メッセージを送受信しているコードを見てみよう

こんにちは。陽気なシステム屋のうっちーです。

前回まででシンプルなサンプル「CastHelloText」をChromecastで動作させることができました。

 

今回はメッセージの送信と受信を行っているコードについて見てみます。

まずはSender側から

https://github.com/googlecast/CastHelloText-chrome/blob/master/chromehellotext.html


とりあえず、sendMessageという関数を呼べば、任意の文字列をChromecastへ送ることができそうですね。

 

次にReceiver側。

https://github.com/googlecast/CastHelloText-chrome/blob/master/receiver.html

 

window.messageBus.onMessage のイベントリスナーで event.data を参照すれば、送られてきた文字列を受け取ることができそうです。

これだけ理解しておけば、あとはJavascriptでゴリゴリすればアプリケーションを作成することができます。

 

でも、Receiverアプリについて、Chromecast上で実行されるコードをデバッグできないと開発しづらいですよね。

そのためにはデバッグ用のポートへ接続しましょう。

まず、Chromecastに割り当てられているIPアドレスを調べる必要があります。スマートフォン版のChromecast設定用アプリを使えば簡単に調べることができます。

そして、PCのChrome Webブラウザから、Chromecastの9222番ポートへアクセスします。

すると、以下のような画面が表示されます。

リンクをクリックしてみましょう。お馴染みの Chrome Developer Tool が表示されます。

 

これで通常のWebアプリケーションのフロントエンド同様にデバッグ作業を行うことができますが、Chromecastの通信内容をより詳細に把握したい場合は、コンソールで以下を実行します。

<strong>cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG); </strong>
<a href="http://www.system-i-enter.com/blog/blog/2014/06/10/chromecast-6/cast-receiver-loggerlevel-debug/" rel="attachment wp-att-4828"><img class="alignnone size-medium wp-image-4828" src="http://www.system-i-enter.com/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_-300x176.png" alt="" width="300" height="176" srcset="https://www.i-enter.co.jp/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_-300x176.png 300w, https://www.i-enter.co.jp/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_-1024x601.png 1024w" sizes="(max-width: 300px) 100vw, 300px" /></a><a href="http://www.system-i-enter.com/blog/blog/2014/06/10/chromecast-6/cast-receiver-loggerlevel-debug-2/" rel="attachment wp-att-4829"><img class="alignnone size-medium wp-image-4829" src="http://www.system-i-enter.com/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_.2-300x176.png" alt="" width="300" height="176" srcset="https://www.i-enter.co.jp/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_.2-300x176.png 300w, https://www.i-enter.co.jp/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_.2-1024x601.png 1024w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;font-size: 13px;line-height: 19px">ここまででChromecastアプリの概要についてご説明しました。</span>
<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;font-size: 13px;line-height: 19px">次回はChromecastを使ってどのようなアプリを作ることができるのか、少しアイデアを出して考えてみましょう。</span>

 

Tags:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*