Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WebSocket / WebRTC 技術解説
第6回 CORETECH技術講習会 HTML5などの最新Web技術
2013/10/18

金城 雄
NTTアドバンステクノロジ
情報機器テクノロジセンタ所属
WebSocket / WebRTC 技術解説
第6回 CORETECH技術講習会 HTML5などの最新Web技術
2013/10/18

金城 雄
NTTアドバンステクノロジ
情報機器テクノロジセンタ所属
HTML5と
WebSocket / WebRTC /
Web Audio API / WebGL 技術解説
第6回 CORETECH技術講習会 HTML5などの最新Web技術
2013/10/18

金城 雄
NTTアドバンステクノロジ
情報...
今日はてんこ盛り
超特急で行きます
内容 合計35分
HTML5の概要 6分
HTML5のAPI 4つ x 6分 (デモ込み)
HTML5のAPIの組み合わせ 5分 (デモ込み)

バッファ 5分
質疑応答 5分
セキの時間込み : ノドの調子...
http://www.w3.org/html/logo/
狭義のHTML5
と
広義のHTML5
HTML5 = HTML5 + CSS + JS
狭義
HTML5 = HTML5 + CSS + JS

広義
狭義

マークアップ言語の仕様
従来のHTMLの改訂

HTML5 = HTML5 + CSS + JS

広義

新しいAPIも含まれる
バズワード(マーケティング用語)
Khronos

WebCL

SMIL

WebGL

other
WHATWG

Canvas

Multi
Media
HTML5
Forms

HTML5
Parser

HTML5

Offline
Support

Semantic
E...
本日のコンテキスト
HTML5 = HTML5 + CSS + JS

これ
本日のコンテキスト
最近では
バズワードを
避けて、
HTML5 = HTML5 + CSS + JS
一部の人は
Open Web Platform
これと呼んでいる。
で、HTML5で
何ができるように
なるの?
できることは
これまでと
変わらない
これまで
ブラウザで
できなかったことが
できるようになる
だけ
元々はWeb Pageを
閲覧するためのものだった
ブラウザで、
Web Applicationを
実行できるように
するために、
必要なものを追加
( ・`ω・´)ドヤァ

Typed Arrays

ブラウザ上でバイナリデータを
操作できるようにしたよ

今まで出来なかったことがおかしい

('・ω・` ) ('・ω・` )
( ・`ω・´)ドヤァ

Web Audio API

ブラウザ上で音声データを
操作・再生できるようにしたよ

今まで出来なかったことがおかしい

('・ω・` ) ('・ω・` )
( ・`ω・´)ドヤァ

Web Workers

バッググランドで処理が
できるようになったよ

今まで出来なかったことがおかしい

('・ω・` ) ('・ω・` )
( ・`ω・´)ドヤァ

CSS3

画像を使わなくても、
角丸・グラデーション使えるよ

今まで出来なかったことがおかしい

('・ω・` ) ('・ω・` )
SVG

( ・`ω・´)ドヤァ

ベクターデータが
使えるようになったよ

今まで出来なかったことがおかしい

('・ω・` ) ('・ω・` )
( ・`ω・´)ドヤァ

(広義の)HTML5

色々できるようになったよ

でも、まだまだ全然機能足りてないじゃん!

('・ω・` ) ('・ω・` )
機能一覧だけ
見ていると
本質を見失う
iPhone

( ・`ω・´)ドヤァ

電話を再発明しました

技術的に新しくないよね
3thPartyのアプリ入れられないとは...
ガラケーのほうが高性能
('・ω・` ) ('・ω・` )
( ・`ω・´)ドヤァ

Open Source

OS/アプリを作って
SourceをOpenにしたよ
だれが品質保障するの?
おもちゃだろ、おもちゃ
これからも、プロプライエタリなの買うよ
('・ω・` ) ('・ω・` )
CD

( ・`ω・´)ドヤァ

音楽をデジタルで
保存できるようにしてみたよ
音質悪いよ...
メディアの耐久年数短すぎ
やっぱりアナログの方が良いよね
('・ω・` ) ('・ω・` )
Twitter

( ・`ω・´)ドヤァ

みんな! Tweetして!

つぶやくしかできないの?
SNSやblogの方が高機能だよね
そんなのやらないよ
('・ω・` ) ('・ω・` )
コンビニエンスストア

( ・`ω・´)ドヤァ

便利な小売店だよ!

商品高すぎ
定価販売なんてありえない...
すぐ潰れるんじゃない?
('・ω・` ) ('・ω・` )
本質を
理解しなくては!
機能一覧には
現れない
HTML5の特徴
HTML5
OSの機能がブラウザ上で使える
低レイヤーのAPIがWeb APIで共通化
特許に制限されない
誰もが利用可能
Webプラットフォーム上で統合
OSの機能がブラウザ上で
OSの機能が、ブラウザを介してサイト
に提供される
アドレス帳 ネットワーク情報 バッテリー状態 通知
ストリーム メディアデータ オーディオ ビデオ 字幕
Webカメラ マイク Audioの波形操作
2D(ラスター,...
Web APIで共通化
低レイヤーのAPIがWeb APIで共通化
される
OSに非依存
実行環境に基本的に非依存
環境による制限はありえる
センサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が
制限として考えられます。
特許に制限されない
Openであることが特徴
パテント・フリー
ロイヤリティ・フリー
いわゆる業界団体よりもオープン
仕様だけでなく策定過程も公開
特定の組織の利益よりも人類の利益を
市場原理に左右される側面もあり。理想と現実は違う...。
誰もが利用可能
世界中の誰もが利用可能な機能
限られた組織の限られた人しか使えな
い仕様はオープンではない
今も100年後も自由に使える
「古文書の一部が、DRMで保護され
ていて見られない」のない未来に(電
子書籍の仕様にも関連しているため)...
Web P/F上で統合
これら全てが、OpenWebプラット
フォーム上で統合
アイディア次第で新しい物が誰にでも
日曜プログラミングで音声合成
夏休みの宿題でビデオチャット作成
これらの知見はWeb上に蓄積
http://platform.html5.org/ より引用 (2013/04/04 版)
http://platform.html5.org/ より引用 (2013/04/04 版)
インパクトの強そうな
仕様の一部
WebSocket
WebRTC
Web Audio API
WebGL
WebSocket
WebSocket
高速・双方向通信
2つの仕様
WebSocket Protocol
WebSocket API
C10K問題を回避

<- 今回は詳細にはふれません

訂正 : Cometよりも低負荷
何故双方向通信が可能か
FireWall
NAT
Proxy
access

access
request

Client

response

Server

サーバ側から情報を送るには
request/responseでないと届きにくい
何故双方向通信が可能か
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
(略)

request
handshake

response

Client

HTTP/1.1 101 S...
何故双方向通信が可能か
Switching
Protocols
request
handshake

response

Client

Server

ハンドシェイク後、双方向通信が可能となる
何故双方向通信が可能か
request
handshake

response

Client

Server

切断しない限り、双方向通信が可能
何故双方向通信が可能か
HTTPを模しているため
通過しやすいが100%ではない
HTTP (port 80)
67%
HTTP (port 61985) 86%
HTTPS (port 443)
95%
http://www.ietf.org...
何故高速通信が可能か
あるHTTP requestのHeader
GET / HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*...
何故高速通信が可能か
WebSocketのHeader
FIN
RSV1
RSV2
RSV3
Opcode
Mask
Payload length
Masking-key

1
1
1
1
4
1
7
0

bit
bit
bit
bit
bi...
何故高速通信が可能か
送信データが「Hello, world」の場合
HTTP
12 bytes + 400 bytes

→ 412 Bytes

97.1%がHeader
WebSocket (Client => Server)
12 by...
何故高速通信が可能か
送信データが「Hello, world」の場合
HTTP

同じ文字列を → 412 Bytes
12 bytes + 400 bytes
97.1%がHeader
送信するために
WebSocket (Client =>...
C10K問題を回避
訂正 : Cometよりも低負荷

今回は詳細にはふれません

http://www.slideshare.net/You_Kinjoh/javascript-websocket
http://www.slideshare.net/You_Kinjoh/javascript-websocket
WebSocket まとめ
高速・双方向通信
HTTPからSwitching Protocols
HTTPSなら95%で接続可能
Headerが小さいことが高速通信の理
由のひとつ
C10K問題を回避できる
訂正 : Cometよりも低負荷
WebRTC
WebRTC
ボイス・ビデオチャット / P2P
2つの仕様
Media Capture and Streams
(getUserMedia)
WebRTC 1.0: Real-time
Communication Between
Browse...
Media Capture and Streams
(getUserMesia)
ブラウザからマイクやカメラにアクセス
利用範囲はWebRTC以外とも
音声処理(with Web Audio API)
ボイスチェンジャー etc.
画像処理(w...
WebRTC 1.0: Real-time
Communication Between
Browsers
ブラウザとブラウザを接続
シグナリング
SIP
XMPP
WebSocket
etc.

<- 今のところ一番使われている
WebRTC 1.0: Real-time
Communication Between
Browsers
NAT通過・ ネゴシエーション
ICE(STUN + TURN + α)
STUN
P2P・UDPホールパンチング
TURN
サーバ経由
WebRTC 1.0: Real-time
Communication Between
Browsers
データ通信
MediaStream
音声データ・映像データ
DataChannel
テキストデータ・バイナリデータ
Web Server
HTML+JS+CSS

HTML+JS+CSS

ICE Server
(STUN)
Global IP/Port

Global IP/Port

WebSocket
Server
signaling

NAT

Br...
WebRTC 1.0: Real-time
Communication Between
Browsers

APIが複雑でわかりにくい
抽象化した仕様の多い
HTML5のAPIの中では
非常に複雑
WebRTC まとめ
ボイス・ビデオチャットが可能
テキスト・バイナリの通信も可能
P2P
NAT通過の仕組み
APIが複雑
ライブラリを使うという選択肢も
定番と言われるようなライブラリはまだありません。
Web Audio API
Web Audio API
オーディオ波形操作
フィルタリング
ミキシング
加工
動的に波形を生成することも可能
SE等の短い音声に特に威力を発揮
音声処理の種類
双2次フィルタ
ローパスフィルタ
ハイパスフィルタ
バンドパスフィルタ

ウェーブシェイパー
コンボルバ(畳み込み)
リバーブ(残響)

ディレイ(遅延)

ローシェフフィルタ
ハイシェフフィルタ

ダイナミックコンプレッサー
...
in/out間をノードで接続
input

Echo
Delay
0.2s

Gain
20%

output
in側とout側の種類
input

output

マイク

スピーカー

MediaStream

MediaStream

バイナリデータ
オシレータ
Audio要素
Video要素
プログラマブル
ScriptProcessorNode
inputとoutputの両方で使える
input and/or output
input例
getUserMediaから取得した音声を加工
WebRTCで取得した遠隔地の音声を解析
ou...
解析

output
加工

input
生成
音源とリスナーを
3D空間上に
PannerNode・AudioListener
音源とリスナーを3D空間上に配置
音源の方向・移動速度も指定可能
左右の音量差・ドップラー効果等
WebGLと同時によく使われる
OpenALに近い
◎
◎

◎

音源とリスナーを
3D空間上に
音源とリスナーを
3D空間上に

◎

◎
◎

左右スピーカーの
音量の差
ドップラー効果
Web Audo API まとめ
ノードを接続し処理を行なう
多数のinput/output
音声データの編集ができる
JavaScriptで直接編集も可能
3D空間にも対応
WebGL
WebGL
3DグラフィックのAPI
OpenGLのサブセット的な位置付け
GPUを利用する
互換レイヤーを挟んでいる
DirectX(Windows)でも利用可能
GLSLの知識が必要で非常に高難度
three.js
デファクトスタンダードのライブラリ
WebGL界のjQuery
3DCDの知識があればハードルは低い
CSS3D等のレンダラーも選択可能
geometry
環境光の色
ハイライトの色
mesh

テクスチャ
透明度・屈折率 etc.

material
環境光の色
遠景の処理 etc.

mesh

camera

light
geometry(幾何学図形)
テキスト
円

円環体(トーラス)
リング等

平面

四面体

立方体

八面体

円柱

二十面体

チューブ

多面体

球体

パラメトリック曲線
etc.
material
物体の色
ハイライトの色
ハイライトの大きさ

map
テクスチャ画像
バンプ(表面の凹凸)

発光色

画像

金属か否か

スケール

環境光の色
屈折率
透明度

環境マッピング(擬似的
な背景)
etc.
scene & etc.
カメラ
ライト(照明)
環境光
メッシュ
フォグ
パーティクル
レンズフレア

レンダラー
選択可能
ピッキング
マウスによる選択等
軌道制御
マウスでカメラ移動
ポストプロセス
etc.
WebGL まとめ
OpenGLのサブセット
GPUを利用
Windowsでも使える
GLSLは難解
three.jsを使おう
Combination
APIを組み合わせて使う

色々
見てみよう!
HTML5の効能
Webプラットフォーム上
組み合わせて使いやすい
APIが適度に抽象化されている
一部例外あり

やりたい事が簡単にできる
参入障壁が非常に低い
今後はアイディアが重要に...?
完
質疑応答
もう一度聞きたいところはありますか?
もっと詳しく聞きたいところはありますか?
ご清聴
ありがとう
ございました
付録
WebSocket
WebRTC
getUserMedia
An AR Game
https://developer.mozilla.org/ja/demos/detail/an-ar-game/launch
Real-time Communi...
Upcoming SlideShare
Loading in …5
×

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

32,853 views

Published on

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

Published in: Technology
  • Be the first to comment

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/

×