HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説

30,839 views

Published on

詳解版はこちら => http://www.slideshare.net/You_Kinjoh/html5-open-web-platform

Published in: Technology
0 Comments
107 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
30,839
On SlideShare
0
From Embeds
0
Number of Embeds
949
Actions
Shares
0
Downloads
231
Comments
0
Likes
107
Embeds 0
No embeds

No notes for slide

HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説

  1. 1. WebSocket / WebRTC 技術解説 第6回 CORETECH技術講習会 HTML5などの最新Web技術 2013/10/18 金城 雄 NTTアドバンステクノロジ 情報機器テクノロジセンタ所属
  2. 2. WebSocket / WebRTC 技術解説 第6回 CORETECH技術講習会 HTML5などの最新Web技術 2013/10/18 金城 雄 NTTアドバンステクノロジ 情報機器テクノロジセンタ所属
  3. 3. HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説 第6回 CORETECH技術講習会 HTML5などの最新Web技術 2013/10/18 金城 雄 NTTアドバンステクノロジ 情報機器テクノロジセンタ所属
  4. 4. 今日はてんこ盛り 超特急で行きます 内容 合計35分 HTML5の概要 6分 HTML5のAPI 4つ x 6分 (デモ込み) HTML5のAPIの組み合わせ 5分 (デモ込み) バッファ 5分 質疑応答 5分 セキの時間込み : ノドの調子が戻らないのでご勘弁を...
  5. 5. http://www.w3.org/html/logo/
  6. 6. 狭義のHTML5 と 広義のHTML5
  7. 7. HTML5 = HTML5 + CSS + JS
  8. 8. 狭義 HTML5 = HTML5 + CSS + JS 広義
  9. 9. 狭義 マークアップ言語の仕様 従来のHTMLの改訂 HTML5 = HTML5 + CSS + JS 広義 新しいAPIも含まれる バズワード(マーケティング用語)
  10. 10. Khronos WebCL SMIL WebGL other WHATWG Canvas Multi Media HTML5 Forms HTML5 Parser HTML5 Offline Support Semantic Elements MicroData RDF Math ML Opus H.264 Web Audio Web RTC IETF Web Sockets ServerSent ev. Web Workers OGP RSS Orientation Web Sockets MP3 Webm SPDY XHR2 CSP ECMA Indexed DB Layout CSS3~ Trans form XPath Anim ation WOFF DOM4 Regions Net Info Flex Box Tel Radio NFC ECMA 6th Web SQL Media Queries Notification TCP Socket DNT FileAPI ECMA Script Web Storage WAIARIA HTML Schema .org Web Messaging Mouse, Key ev. W3C XHTML5 Geolocation SVG Vibration Device Storage File Sys USB Battery Status Proximity http://www.slideshare.net/dynamis/toward-firefox-os/26 より引用
  11. 11. 本日のコンテキスト HTML5 = HTML5 + CSS + JS これ
  12. 12. 本日のコンテキスト 最近では バズワードを 避けて、 HTML5 = HTML5 + CSS + JS 一部の人は Open Web Platform これと呼んでいる。
  13. 13. で、HTML5で 何ができるように なるの?
  14. 14. できることは これまでと 変わらない
  15. 15. これまで ブラウザで できなかったことが できるようになる だけ
  16. 16. 元々はWeb Pageを 閲覧するためのものだった ブラウザで、 Web Applicationを 実行できるように するために、 必要なものを追加
  17. 17. ( ・`ω・´)ドヤァ Typed Arrays ブラウザ上でバイナリデータを 操作できるようにしたよ 今まで出来なかったことがおかしい ('・ω・` ) ('・ω・` )
  18. 18. ( ・`ω・´)ドヤァ Web Audio API ブラウザ上で音声データを 操作・再生できるようにしたよ 今まで出来なかったことがおかしい ('・ω・` ) ('・ω・` )
  19. 19. ( ・`ω・´)ドヤァ Web Workers バッググランドで処理が できるようになったよ 今まで出来なかったことがおかしい ('・ω・` ) ('・ω・` )
  20. 20. ( ・`ω・´)ドヤァ CSS3 画像を使わなくても、 角丸・グラデーション使えるよ 今まで出来なかったことがおかしい ('・ω・` ) ('・ω・` )
  21. 21. SVG ( ・`ω・´)ドヤァ ベクターデータが 使えるようになったよ 今まで出来なかったことがおかしい ('・ω・` ) ('・ω・` )
  22. 22. ( ・`ω・´)ドヤァ (広義の)HTML5 色々できるようになったよ でも、まだまだ全然機能足りてないじゃん! ('・ω・` ) ('・ω・` )
  23. 23. 機能一覧だけ 見ていると 本質を見失う
  24. 24. iPhone ( ・`ω・´)ドヤァ 電話を再発明しました 技術的に新しくないよね 3thPartyのアプリ入れられないとは... ガラケーのほうが高性能 ('・ω・` ) ('・ω・` )
  25. 25. ( ・`ω・´)ドヤァ Open Source OS/アプリを作って SourceをOpenにしたよ だれが品質保障するの? おもちゃだろ、おもちゃ これからも、プロプライエタリなの買うよ ('・ω・` ) ('・ω・` )
  26. 26. CD ( ・`ω・´)ドヤァ 音楽をデジタルで 保存できるようにしてみたよ 音質悪いよ... メディアの耐久年数短すぎ やっぱりアナログの方が良いよね ('・ω・` ) ('・ω・` )
  27. 27. Twitter ( ・`ω・´)ドヤァ みんな! Tweetして! つぶやくしかできないの? SNSやblogの方が高機能だよね そんなのやらないよ ('・ω・` ) ('・ω・` )
  28. 28. コンビニエンスストア ( ・`ω・´)ドヤァ 便利な小売店だよ! 商品高すぎ 定価販売なんてありえない... すぐ潰れるんじゃない? ('・ω・` ) ('・ω・` )
  29. 29. 本質を 理解しなくては!
  30. 30. 機能一覧には 現れない HTML5の特徴
  31. 31. HTML5 OSの機能がブラウザ上で使える 低レイヤーのAPIがWeb APIで共通化 特許に制限されない 誰もが利用可能 Webプラットフォーム上で統合
  32. 32. OSの機能がブラウザ上で OSの機能が、ブラウザを介してサイト に提供される アドレス帳 ネットワーク情報 バッテリー状態 通知 ストリーム メディアデータ オーディオ ビデオ 字幕 Webカメラ マイク Audioの波形操作 2D(ラスター,ベクター) 3DCG 音声入力 音声合成 暗号化 ファイルシステム データベース スレッド 通信(WebSocket,TCP,UDP) Bluetooth 加速度センサ 傾きセンサ ジャイロ バイブレーション GPS 電子コンパス 温度センサ 湿度センサ 気圧センサ 環境光センサ 近接センサ 磁気センサ etc. ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。
  33. 33. Web APIで共通化 低レイヤーのAPIがWeb APIで共通化 される OSに非依存 実行環境に基本的に非依存 環境による制限はありえる センサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が 制限として考えられます。
  34. 34. 特許に制限されない Openであることが特徴 パテント・フリー ロイヤリティ・フリー いわゆる業界団体よりもオープン 仕様だけでなく策定過程も公開 特定の組織の利益よりも人類の利益を 市場原理に左右される側面もあり。理想と現実は違う...。
  35. 35. 誰もが利用可能 世界中の誰もが利用可能な機能 限られた組織の限られた人しか使えな い仕様はオープンではない 今も100年後も自由に使える 「古文書の一部が、DRMで保護され ていて見られない」のない未来に(電 子書籍の仕様にも関連しているため) DRMについての議論が始まったそうです。
  36. 36. Web P/F上で統合 これら全てが、OpenWebプラット フォーム上で統合 アイディア次第で新しい物が誰にでも 日曜プログラミングで音声合成 夏休みの宿題でビデオチャット作成 これらの知見はWeb上に蓄積
  37. 37. http://platform.html5.org/ より引用 (2013/04/04 版)
  38. 38. http://platform.html5.org/ より引用 (2013/04/04 版)
  39. 39. インパクトの強そうな 仕様の一部 WebSocket WebRTC Web Audio API WebGL
  40. 40. WebSocket
  41. 41. WebSocket 高速・双方向通信 2つの仕様 WebSocket Protocol WebSocket API C10K問題を回避 <- 今回は詳細にはふれません 訂正 : Cometよりも低負荷
  42. 42. 何故双方向通信が可能か FireWall NAT Proxy access access request Client response Server サーバ側から情報を送るには request/responseでないと届きにくい
  43. 43. 何故双方向通信が可能か GET / HTTP/1.1 Upgrade: websocket Connection: Upgrade (略) request handshake response Client HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade (略) Server HTTPでWebSocketのハンドシェイクを行なう 厳密にはHTTPと完全互換ではありません。
  44. 44. 何故双方向通信が可能か Switching Protocols request handshake response Client Server ハンドシェイク後、双方向通信が可能となる
  45. 45. 何故双方向通信が可能か request handshake response Client Server 切断しない限り、双方向通信が可能
  46. 46. 何故双方向通信が可能か HTTPを模しているため 通過しやすいが100%ではない HTTP (port 80) 67% HTTP (port 61985) 86% HTTPS (port 443) 95% http://www.ietf.org/mail-archive/web/tls/current/msg05593.html
  47. 47. 何故高速通信が可能か あるHTTP requestのHeader GET / HTTP/1.1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/ *;q=0.8 Accept-Encoding: gzip,deflate,sdch Accept-Language: ja,en-US;q=0.8,en;q=0.6 Cache-Control: max-age=0 Connection: keep-alive Host: localhost If-Modified-Since: Tue, 08 Oct 2013 17:46:38 GMT If-None-Match: "3e031b2-13a1-4e83e59bcbb80" User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 400 Bytes over!
  48. 48. 何故高速通信が可能か WebSocketのHeader FIN RSV1 RSV2 RSV3 Opcode Mask Payload length Masking-key 1 1 1 1 4 1 7 0 bit bit bit bit bits bit bits, 7+16 bits, or 7+64 bits bytes or 4 bytes 2 14 Bytes
  49. 49. 何故高速通信が可能か 送信データが「Hello, world」の場合 HTTP 12 bytes + 400 bytes → 412 Bytes 97.1%がHeader WebSocket (Client => Server) 12 bytes + 6 bytes → 18 Bytes 33.3%がHeader
  50. 50. 何故高速通信が可能か 送信データが「Hello, world」の場合 HTTP 同じ文字列を → 412 Bytes 12 bytes + 400 bytes 97.1%がHeader 送信するために WebSocket (Client => Server) 約23倍の 12 bytes + 6 bytes → 18 Bytes データ量 33.3%がHeader
  51. 51. C10K問題を回避 訂正 : Cometよりも低負荷 今回は詳細にはふれません http://www.slideshare.net/You_Kinjoh/javascript-websocket
  52. 52. http://www.slideshare.net/You_Kinjoh/javascript-websocket
  53. 53. WebSocket まとめ 高速・双方向通信 HTTPからSwitching Protocols HTTPSなら95%で接続可能 Headerが小さいことが高速通信の理 由のひとつ C10K問題を回避できる 訂正 : Cometよりも低負荷
  54. 54. WebRTC
  55. 55. WebRTC ボイス・ビデオチャット / P2P 2つの仕様 Media Capture and Streams (getUserMedia) WebRTC 1.0: Real-time Communication Between Browsers
  56. 56. Media Capture and Streams (getUserMesia) ブラウザからマイクやカメラにアクセス 利用範囲はWebRTC以外とも 音声処理(with Web Audio API) ボイスチェンジャー etc. 画像処理(with Canvas) 顔検出 etc. 顔認識ができるようになるのも時間の問題か?
  57. 57. WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザを接続 シグナリング SIP XMPP WebSocket etc. <- 今のところ一番使われている
  58. 58. WebRTC 1.0: Real-time Communication Between Browsers NAT通過・ ネゴシエーション ICE(STUN + TURN + α) STUN P2P・UDPホールパンチング TURN サーバ経由
  59. 59. WebRTC 1.0: Real-time Communication Between Browsers データ通信 MediaStream 音声データ・映像データ DataChannel テキストデータ・バイナリデータ
  60. 60. Web Server HTML+JS+CSS HTML+JS+CSS ICE Server (STUN) Global IP/Port Global IP/Port WebSocket Server signaling NAT Browser signaling data NAT Browser
  61. 61. WebRTC 1.0: Real-time Communication Between Browsers APIが複雑でわかりにくい 抽象化した仕様の多い HTML5のAPIの中では 非常に複雑
  62. 62. WebRTC まとめ ボイス・ビデオチャットが可能 テキスト・バイナリの通信も可能 P2P NAT通過の仕組み APIが複雑 ライブラリを使うという選択肢も 定番と言われるようなライブラリはまだありません。
  63. 63. Web Audio API
  64. 64. Web Audio API オーディオ波形操作 フィルタリング ミキシング 加工 動的に波形を生成することも可能 SE等の短い音声に特に威力を発揮
  65. 65. 音声処理の種類 双2次フィルタ ローパスフィルタ ハイパスフィルタ バンドパスフィルタ ウェーブシェイパー コンボルバ(畳み込み) リバーブ(残響) ディレイ(遅延) ローシェフフィルタ ハイシェフフィルタ ダイナミックコンプレッサー ピーキングフィルタ ゲイン ノッチフィルタ オールパスフィルタ
  66. 66. in/out間をノードで接続 input Echo Delay 0.2s Gain 20% output
  67. 67. in側とout側の種類 input output マイク スピーカー MediaStream MediaStream バイナリデータ オシレータ Audio要素 Video要素
  68. 68. プログラマブル ScriptProcessorNode inputとoutputの両方で使える input and/or output input例 getUserMediaから取得した音声を加工 WebRTCで取得した遠隔地の音声を解析 output例 ゼロから音声データの生成が可能
  69. 69. 解析 output 加工 input 生成
  70. 70. 音源とリスナーを 3D空間上に PannerNode・AudioListener 音源とリスナーを3D空間上に配置 音源の方向・移動速度も指定可能 左右の音量差・ドップラー効果等 WebGLと同時によく使われる OpenALに近い
  71. 71. ◎ ◎ ◎ 音源とリスナーを 3D空間上に
  72. 72. 音源とリスナーを 3D空間上に ◎ ◎ ◎ 左右スピーカーの 音量の差 ドップラー効果
  73. 73. Web Audo API まとめ ノードを接続し処理を行なう 多数のinput/output 音声データの編集ができる JavaScriptで直接編集も可能 3D空間にも対応
  74. 74. WebGL
  75. 75. WebGL 3DグラフィックのAPI OpenGLのサブセット的な位置付け GPUを利用する 互換レイヤーを挟んでいる DirectX(Windows)でも利用可能 GLSLの知識が必要で非常に高難度
  76. 76. three.js デファクトスタンダードのライブラリ WebGL界のjQuery 3DCDの知識があればハードルは低い CSS3D等のレンダラーも選択可能
  77. 77. geometry 環境光の色 ハイライトの色 mesh テクスチャ 透明度・屈折率 etc. material
  78. 78. 環境光の色 遠景の処理 etc. mesh camera light
  79. 79. geometry(幾何学図形) テキスト 円 円環体(トーラス) リング等 平面 四面体 立方体 八面体 円柱 二十面体 チューブ 多面体 球体 パラメトリック曲線 etc.
  80. 80. material 物体の色 ハイライトの色 ハイライトの大きさ map テクスチャ画像 バンプ(表面の凹凸) 発光色 画像 金属か否か スケール 環境光の色 屈折率 透明度 環境マッピング(擬似的 な背景) etc.
  81. 81. scene & etc. カメラ ライト(照明) 環境光 メッシュ フォグ パーティクル レンズフレア レンダラー 選択可能 ピッキング マウスによる選択等 軌道制御 マウスでカメラ移動 ポストプロセス etc.
  82. 82. WebGL まとめ OpenGLのサブセット GPUを利用 Windowsでも使える GLSLは難解 three.jsを使おう
  83. 83. Combination
  84. 84. APIを組み合わせて使う 色々 見てみよう!
  85. 85. HTML5の効能 Webプラットフォーム上 組み合わせて使いやすい APIが適度に抽象化されている 一部例外あり やりたい事が簡単にできる 参入障壁が非常に低い 今後はアイディアが重要に...?
  86. 86.
  87. 87. 質疑応答 もう一度聞きたいところはありますか? もっと詳しく聞きたいところはありますか?
  88. 88. ご清聴 ありがとう ございました
  89. 89. 付録
  90. 90. WebSocket WebRTC getUserMedia An AR Game https://developer.mozilla.org/ja/demos/detail/an-ar-game/launch Real-time Communication Between Browsers Video Chat with getUserMedia https://apprtc.appspot.com/ Web Audio API Pitch Detector with getUserMedia http://webaudiodemos.appspot.com/pitchdetect/index.html WebGL 3D Interactive Asteroid Space Visualization - Asterank http://www.asterank.com/3d/ +360º - Car Visualizer - Three.js http://carvisualizer.plus360degrees.com/threejs/ Aquarium http://webglsamples.googlecode.com/hg/aquarium/aquarium.html Water/Ocean http://oos.moxiecode.com/js_webgl/water_noise/ Epic Citadel http://www.unrealengine.com/html5/ Combination Chrome World Wide Maze for Machine http://chrome.com/maze/ for Android http://g.co/maze Cube Slam https://www.cubeslam.com/

×