スマホの動画をテレビで再生！動画共有アプリがChromecastと歩む物語｜DevLOVE現場甲子園2014...

スマホの動画をテレビで再生！

動画共有アプリがChromecastと歩む物語

2014 / 08 / 23 ふかさわひかり DevLOVE現場甲子園2014 東日本大会

おはなしするまえに…

HICO00おはなし中の YO

たいへんよろこびます

わたし

株式会社スタジオ・アルカナ おんなのこプログラマ 深澤 ひかり !

平成４年うまれ !

ふだんは PHP とかかいています

毎月末に開催される PHP勉強会@東京 によくいます

きょうおはなしすること

Chromecast

既存アプリのChromecast対応開発について

Chromecast

Chromecast をざっくり

• テレビの HDMI 端子に差し込む小型のメディアストリーミング端末

• 発売１周年！（国内発売は 2014/5/28 でした） !

• 最近では、一部のAndroidでミラーリングができるようになりました

動画共有アプリ

今回対応させるアプリ

ちょっと宣伝くさくなります

• ストリーミング録画なのでアップロードの待ち時間がゼロ

• 録画した動画はサーバーに保存スマホの容量の心配もゼロ

• 発行されたURLから、ブラウザで動画が見れる

大体こういうふうにしたい…

1. REPREの動画履歴から、動画を選択

2. キャストボタンを表示して、Chromecast一覧が表示

3. デバイス選択すると、Chromecastに接続

4. テレビでREPREの動画再生！

よくわかんないけど、

やってみるっ！

大体こういうふうにしたい…

1. REPREの動画履歴から、動画を選択

2. キャストボタンを表示して、Chromecast一覧が表示

3. デバイス選択すると、Chromecastに接続

4. テレビでREPREの動画再生！

大体こういうふうにしたい…

1. REPREの動画履歴から、動画を選択

2. キャストボタンを表示して、Chromecast一覧が表示

3. デバイス選択すると、Chromecastに接続

4. テレビでREPREの動画再生！

Google Cast SDK

Google Cast SDK

https://developers.google.com/cast/

Google Cast SDK Developer Console 　登録に $5 かかります !

の場合

Adobe AIRによるハイブリッドアプリのため、このままではつかえません !

!

AdobeAIR Native Extension じゃないと…

ANE-chromecast

https://github.com/renaudbardet/ANE-chromecastすでに、Adobe AIR Native Extension を公開している方がいました

ありがとぉ( ＾ω＾ )

Receiver

Receiver Application

コンテンツを受け取るためのChromecast側のアプリケーション !

ちなみにREPREなどの、コンテンツを送信する側は、Sender Application とよびます

Receiver Application• Styled Media Receiver 最初からReceiver Applicationが 用意されている 管理画面から、CSSを変更できる

• Custom Receiver 自分で１からじゆうに作れる Receiver用SDKをつかう https通信が必須

Receiver Application• Styled Media Receiver 最初からReceiver Applicationが 用意されている 管理画面から、CSSを変更できる

• Custom Receiver 自分で１からじゆうに作れる Receiver用SDKをつかう https通信が必須

Receiver Application• Styled Media Receiver 最初からReceiver Applicationが 用意されている 管理画面から、CSSを変更できる

• Custom Receiver 自分で１からじゆうに作れる Receiver用SDKをつかう https通信が必須

大体こういうふうにしたい…

1. REPREの動画履歴から、動画を選択

2. キャストボタンを表示して、Chromecast一覧が表示

3. デバイス選択すると、Chromecastに接続

4. テレビでREPREの動画再生！

デバイス一覧取得

// デバイス一覧を取得できたとき AirCast.getInstance().addEventListener( AirCastDeviceListEvent.DEVICE_LIST_CHANGED, function(e:AirCastDeviceListEvent):void { // e.deviceList : デバイス一覧 for each ( var device:AirCastDevice in e.deviceList ) { trace( "deviceID : " + device.deviceID ); trace( "friendlyName : " + device.friendlyName ); trace( "ipAddress : " + device.ipAddress ); trace( "manufacturer : " + device.manufacturer ); trace( "modelName : " + device.modelName ); trace( "servicePort : " + device.servicePort ); } } );

大体こういうふうにしたい…

1. REPREの動画履歴から、動画を選択

2. キャストボタンを表示して、Chromecast一覧が表示

3. デバイス選択すると、Chromecastに接続

4. テレビでREPREの動画再生！

Chromecastのデバイスに接続

// デバイスに接続 AirCast.getInstance().connectToDevice( device.deviceID );

大体こういうふうにしたい…

1. REPREの動画履歴から、動画を選択

2. キャストボタンを表示して、Chromecast一覧が表示

3. デバイス選択すると、Chromecastに接続

4. テレビでREPREの動画再生！

テレビ（レシーバー）で再生

// デバイスに接続したとき AirCast.getInstance().addEventListener( AirCastDeviceEvent.DID_CONNECT_TO_DEVICE, function(e:AirCastDeviceEvent):void { AirCast.getInstance().loadMedia( "動画URL", "サムネイル画像パス", "動画タイトル", "動画詳細文", "video/mp4", 0, // 動画開始時間 true // 自動再生スタート ); } );

できたかな？？

再生終わったらデバイスから切断したぃ。

再生終了後、切断する

// ステータス変更時 AirCast.getInstance().addEventListener( AirCastMediaEvent.STATUS_CHANGED, function(e:AirCastMediaEvent):void { trace( "STATUS_CHANGED" ); if (e.status.playerState == AirCastMediaStatus.MEDIA_PLAYER_STATE_IDLE && e.status.idleReason == AirCastMediaStatus.MEDIA_PLAYER_IDLE_REASON_FINISHED) { // 再生が終わったら切断 AirCast.getInstance().disconnectFromDevice(); } } );

できました！ぱちぱち。

まとめます

Chromecast対応アプリはまだまだ少ないです。 （iOSのアプリだけでも、130コほど）（サンプルアプリみたいなものも含む） !ミラーリングもできるようになり、まだまだこれからがたのしみです。 !個人的にはHuluが対応してくれるとうれしい。 !お子さんがいるご家庭では、ようかい体操が無限リピートしてるそうな。

AppStoreで絶賛配信中です

おためしあれっ

「リプレ」で検索

動画共有アプリ

ご清聴、ありがとうございました！