スマホの動画をテレビで再生!動画共有アプリがchromecastと歩む物語|devlove現場甲子園2014...
Post on 14-Jun-2015
1.356 Views
Preview:
DESCRIPTION
TRANSCRIPT
スマホの動画をテレビで再生!
動画共有アプリがChromecastと歩む物語
2014 / 08 / 23 ふかさわひかり DevLOVE現場甲子園2014 東日本大会
おはなしするまえに…
HICO00おはなし中の YO
たいへんよろこびます
わたし
株式会社スタジオ・アルカナ おんなのこプログラマ 深澤 ひかり !
平成4年うまれ !
ふだんは PHP とかかいています
毎月末に開催される PHP勉強会@東京 によくいます
きょうおはなしすること
Chromecast
既存アプリのChromecast対応開発について
Chromecast
Chromecast をざっくり
• テレビの HDMI 端子に差し込む小型のメディアストリーミング端末
• 発売1周年!(国内発売は 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 自分で1からじゆうに作れる Receiver用SDKをつかう https通信が必須
Receiver Application• Styled Media Receiver 最初からReceiver Applicationが 用意されている 管理画面から、CSSを変更できる
• Custom Receiver 自分で1からじゆうに作れる Receiver用SDKをつかう https通信が必須
Receiver Application• Styled Media Receiver 最初からReceiver Applicationが 用意されている 管理画面から、CSSを変更できる
• Custom Receiver 自分で1からじゆうに作れる 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で絶賛配信中です
おためしあれっ
「リプレ」で検索
動画共有アプリ
ご清聴、ありがとうございました!
top related