Downloaded 32 times
More Related Content
HTML5でサイネージは作れる!!
- 1.
- 2. 自己紹介 • 面白法人カヤック HTML ファイ部 比留間和也 • 最近は JS ばっかりで、 あんまり HTML 書いてません w
- 3.
- 4.
- 5. 今回使った技術 • WebGL • Videoelement • Audio element • Canvas element • getUserMedia (Camera) • base64 encode/decoder • XMLHttpRequest upload • Fullscreen API • CSS Mask • CSS Animation • pointer-events
- 6. これで IE …対応が必要だったら(((( ；ﾟ Д ﾟ ))))
- 7.
- 8.
- 9.
- 10. • クオリティの担保 • 8時間連続起動 • スケジュール • そもそもブラウザで大丈夫なのか
- 11.
- 13.
- 14.
- 15. やってみた感想 • Web 技術だけでもサイネージは作れる •でかいは正義！ • Google Chrome すごい！ • 普段どれだけ「 にはできるのに技術的 断 しているか念 」を知ることができた
- 16. 案件のポイント • WebGL でリッチ感アップ！ •プラグインなしで動画再生 • カメラで撮影した画像を XHR でサーバに • UI をほぼ Full Canvas で実装 • タッチパネルによるタッチ操作
- 17.
- 18.
- 19. • デザインスタートがローンチ 2週間前からの、怒涛の追 い上げ！ • ローンチ数日前に体験をよりよくするために UI フルリ ニューアル！ • ローンチ前日にやっとの思いでサーバに画像がアップで きない問題を解決！ • ローンチ前日になんとか動画再生が止まる問題を解決！ • ローンチ 2 週間前に Inka3D が Maya2014 に対応！ （奇跡！）
- 20.
- 21.
- 22.
- 23.
- 24. • Inka3D でMaya の世界を完全再現！ • 世界観・演出を Maya で構築→ Inka3D のラッパーでコンテンツと同期 工夫した点
- 25. • WebGL のcontext lost が多発 • 開発時、 WebGL のクラッシュが OS 巻 き込んで落ちる • Three.js では実現できなかった 苦労した点
- 26. DEMO ttp://goo.gl/i0t7n Android 版 Chromeでもいちおう動きますよ！
- 27.
- 28.
- 29. • https でコンテンツを配信 httpの配信ではカメラの使用許可がリロードごとに聞かれる • 画像を別サーバに送信できない 送信先はローカルサーバに、実際の送信先はサーバ側でリダ イレクト 苦労した点
- 30.
- 31.
- 32. • 動画の再生が止まることがある 強制的に load/playを実行して再実行 • Video 、 Canvas 要素には CSS Shader が適用されない 適用を断念 苦労した点
- 33.
- 34. • メモリ管理を徹底 • 現場対応をイメージ •管理画面とコマンドを用意 工夫した点
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.