HTML5とか勉強会に参加してきました

HTML5

HTML5でサイネージは作れる

  1. お台場合衆国での事例
  2. IE対応を考えたくない程度のたっぷり技術仕様
  3. 要件
    1. クオリティの担保
    2. 8時間連続作動
  4. 縦長のコンテンツ
  5. 42インチの縦置きディスプレイ
    1. 大人の社会科見学みたいな番組
      1. クイズパートをインタラクティブ化
  6. 動画山盛り、WebGLが背景でブラウザ泣かせ
  7. 何か問題があった場合はタッチでしか解決できないので、隠しコマンドで管理画面
  8. 今まで技術的な理由であきらめていたことがどれだけあったか実感できた
  9. Inka3D(MayaをWebGLに書き出すプラグイン)
  10. 写真撮影
    1. 最初に許可を取ってストリームを保持
    2. https化では一度許可をとればOK
  11. 動画再生
    1. 動画側に円形のマスクを適用
    2. ロードが失敗したら強制的に再ロード
      1. 動画の再生に関わる部分が極めてまれにクラッシュする
  12. 耐久テストが大変
  13. 現場で起きた不具合をその場で修正可能
    1. リモートでも修正可能
  14. Webとサイネージの相性は実は高い

World Wide Maze

  1. どんなWebページでも3D迷路にする
  2. WebGL、WebWorkers(ammo.js　Phy.js)、DeviceOrientation
    1. Betaとgammaの値が逆
  3. ソケットIOでペアリング
    1. レイテンシーが問題
  4. WebRTCのP2P機能があればなんとか解決

マンガテレビの作り方

  1. リアルタイムにマンガっぽくするアプリ
  2. 顔画像認識で、自動的に縦書き
  3. 音声コマンド、吹き出しなど
    1. getUserMediaでビデオ
    2. 諧調化、エッジ処理
    3. 音声認識API
      1. Chromeにのみ実装
      2. ドラフトにもなっていない
  4. httpsにしないと処理のたびに確認ダイアログ出ちゃう
  5. Headtracker.js(JSの顔検出ライブラリ。個人用)
  6. パフォーマンスの向上
    1. 60fpsが目標
    2. Chromeのプロファイルツールが便利
    3. プロファイルアクセスは遅い
    4. 普通に配列を処理したほうが速い
    5. ループを丸ごとインライン展開してEvalしたほうが速くないか?
      1. 考えてなかった。起動が遅くなりそう
        1. Functionオブジェクトをつくって使いまわせばV8だとそのほうが早そう
    1. IE以外はparseIntが早い