スマホの動画をテレビで再生！動画共有アプリが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の動画再生！

よくわかんないけど、

やってみるっ！

Google Cast SDK

Google Cast SDK

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

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

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

の場合

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

!

AdobeAIR Native Extension じゃないと…

ANE-chromecast

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

https://github.com/renaudbardet/ANE-chromecast

ありがとぉ( ＾ω＾ )

Receiver

Receiver Application

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

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

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

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

デバイス一覧取得

// デバイス一覧を取得できたとき 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 ); } } );

Chromecastのデバイスに接続

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

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

// デバイスに接続したとき 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で絶賛配信中です

おためしあれっ

「リプレ」で検索

動画共有アプリ

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

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

Technology

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