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

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

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

4.
今日はてんこ盛り
超特急で行きます
内容 合計35分
HTML5の概要 6分
HTML5のAPI 4つ x 6分 (デモ込み)
HTML5のAPIの組み合わせ 5分 (デモ込み)
バッファ 5分
質疑応答 5分
セキの時間込み : ノドの調子が戻らないのでご勘弁を...

5.
http://www.w3.org/html/logo/

6.
狭義のHTML5
と
広義のHTML5

7.
HTML5 = HTML5 + CSS + JS

8.
狭義
HTML5 = HTML5 + CSS + JS
広義

9.
狭義
マークアップ言語の仕様
従来のHTMLの改訂
HTML5 = HTML5 + CSS + JS
広義
新しいAPIも含まれる
バズワード(マーケティング用語)

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.
本日のコンテキスト
HTML5 = HTML5 + CSS + JS
これ

12.
本日のコンテキスト
最近では
バズワードを
避けて、
HTML5 = HTML5 + CSS + JS
一部の人は
Open Web Platform
これと呼んでいる。

13.
で、HTML5で
何ができるように
なるの?

14.
できることは
これまでと
変わらない

15.
これまで
ブラウザで
できなかったことが
できるようになる
だけ

16.
元々はWeb Pageを
閲覧するためのものだった
ブラウザで、
Web Applicationを
実行できるように
するために、
必要なものを追加

17.
( ･`ω･´)ドヤァ
Typed Arrays
ブラウザ上でバイナリデータを
操作できるようにしたよ
今まで出来なかったことがおかしい
('・ω・` ) ('・ω・` )

18.
( ･`ω･´)ドヤァ
Web Audio API
ブラウザ上で音声データを
操作・再生できるようにしたよ
今まで出来なかったことがおかしい
('・ω・` ) ('・ω・` )

19.
( ･`ω･´)ドヤァ
Web Workers
バッググランドで処理が
できるようになったよ
今まで出来なかったことがおかしい
('・ω・` ) ('・ω・` )

20.
( ･`ω･´)ドヤァ
CSS3
画像を使わなくても、
角丸・グラデーション使えるよ
今まで出来なかったことがおかしい
('・ω・` ) ('・ω・` )

21.
SVG
( ･`ω･´)ドヤァ
ベクターデータが
使えるようになったよ
今まで出来なかったことがおかしい
('・ω・` ) ('・ω・` )

22.
( ･`ω･´)ドヤァ
(広義の)HTML5
色々できるようになったよ
でも、まだまだ全然機能足りてないじゃん!
('・ω・` ) ('・ω・` )

23.
機能一覧だけ
見ていると
本質を見失う

24.
iPhone
( ･`ω･´)ドヤァ
電話を再発明しました
技術的に新しくないよね
3thPartyのアプリ入れられないとは...
ガラケーのほうが高性能
('・ω・` ) ('・ω・` )

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

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

27.
Twitter
( ･`ω･´)ドヤァ
みんな! Tweetして!
つぶやくしかできないの?
SNSやblogの方が高機能だよね
そんなのやらないよ
('・ω・` ) ('・ω・` )

28.
コンビニエンスストア
( ･`ω･´)ドヤァ
便利な小売店だよ!
商品高すぎ
定価販売なんてありえない...
すぐ潰れるんじゃない?
('・ω・` ) ('・ω・` )

29.
本質を
理解しなくては!

30.
機能一覧には
現れない
HTML5の特徴

31.
HTML5
OSの機能がブラウザ上で使える
低レイヤーのAPIがWeb APIで共通化
特許に制限されない
誰もが利用可能
Webプラットフォーム上で統合

32.
OSの機能がブラウザ上で
OSの機能が、ブラウザを介してサイト
に提供される
アドレス帳 ネットワーク情報 バッテリー状態 通知
ストリーム メディアデータ オーディオ ビデオ 字幕
Webカメラ マイク Audioの波形操作
2D(ラスター,ベクター) 3DCG 音声入力 音声合成
暗号化 ファイルシステム データベース スレッド
通信(WebSocket,TCP,UDP) Bluetooth
加速度センサ 傾きセンサ ジャイロ バイブレーション
GPS 電子コンパス 温度センサ 湿度センサ 気圧センサ
環境光センサ 近接センサ 磁気センサ etc.
ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。

33.
Web APIで共通化
低レイヤーのAPIがWeb APIで共通化
される
OSに非依存
実行環境に基本的に非依存
環境による制限はありえる
センサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が
制限として考えられます。

34.
特許に制限されない
Openであることが特徴
パテント・フリー
ロイヤリティ・フリー
いわゆる業界団体よりもオープン
仕様だけでなく策定過程も公開
特定の組織の利益よりも人類の利益を
市場原理に左右される側面もあり。理想と現実は違う...。

35.
誰もが利用可能
世界中の誰もが利用可能な機能
限られた組織の限られた人しか使えな
い仕様はオープンではない
今も100年後も自由に使える
「古文書の一部が、DRMで保護され
ていて見られない」のない未来に(電
子書籍の仕様にも関連しているため)
DRMについての議論が始まったそうです。

36.
Web P/F上で統合
これら全てが、OpenWebプラット
フォーム上で統合
アイディア次第で新しい物が誰にでも
日曜プログラミングで音声合成
夏休みの宿題でビデオチャット作成
これらの知見はWeb上に蓄積

37.
http://platform.html5.org/ より引用 (2013/04/04 版)

38.
http://platform.html5.org/ より引用 (2013/04/04 版)

39.
インパクトの強そうな
仕様の一部
WebSocket
WebRTC
Web Audio API
WebGL

40.
WebSocket

41.
WebSocket
高速・双方向通信
2つの仕様
WebSocket Protocol
WebSocket API
C10K問題を回避
<- 今回は詳細にはふれません
訂正 : Cometよりも低負荷

42.
何故双方向通信が可能か
FireWall
NAT
Proxy
access
access
request
Client
response
Server
サーバ側から情報を送るには
request/responseでないと届きにくい

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.
何故双方向通信が可能か
Switching
Protocols
request
handshake
response
Client
Server
ハンドシェイク後、双方向通信が可能となる

45.
何故双方向通信が可能か
request
handshake
response
Client
Server
切断しない限り、双方向通信が可能

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.
何故高速通信が可能か
ある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.
何故高速通信が可能か
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.
何故高速通信が可能か
送信データが「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.
何故高速通信が可能か
送信データが「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.
C10K問題を回避
訂正 : Cometよりも低負荷
今回は詳細にはふれません
http://www.slideshare.net/You_Kinjoh/javascript-websocket

52.
http://www.slideshare.net/You_Kinjoh/javascript-websocket

53.
WebSocket まとめ
高速・双方向通信
HTTPからSwitching Protocols
HTTPSなら95%で接続可能
Headerが小さいことが高速通信の理
由のひとつ
C10K問題を回避できる
訂正 : Cometよりも低負荷

54.
WebRTC

55.
WebRTC
ボイス・ビデオチャット / P2P
2つの仕様
Media Capture and Streams
(getUserMedia)
WebRTC 1.0: Real-time
Communication Between
Browsers

56.
Media Capture and Streams
(getUserMesia)
ブラウザからマイクやカメラにアクセス
利用範囲はWebRTC以外とも
音声処理(with Web Audio API)
ボイスチェンジャー etc.
画像処理(with Canvas)
顔検出 etc.
顔認識ができるようになるのも時間の問題か?

57.
WebRTC 1.0: Real-time
Communication Between
Browsers
ブラウザとブラウザを接続
シグナリング
SIP
XMPP
WebSocket
etc.
<- 今のところ一番使われている

58.
WebRTC 1.0: Real-time
Communication Between
Browsers
NAT通過・ ネゴシエーション
ICE(STUN + TURN + α)
STUN
P2P・UDPホールパンチング
TURN
サーバ経由

59.
WebRTC 1.0: Real-time
Communication Between
Browsers
データ通信
MediaStream
音声データ・映像データ
DataChannel
テキストデータ・バイナリデータ

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.
WebRTC 1.0: Real-time
Communication Between
Browsers
APIが複雑でわかりにくい
抽象化した仕様の多い
HTML5のAPIの中では
非常に複雑

62.
WebRTC まとめ
ボイス・ビデオチャットが可能
テキスト・バイナリの通信も可能
P2P
NAT通過の仕組み
APIが複雑
ライブラリを使うという選択肢も
定番と言われるようなライブラリはまだありません。

63.
Web Audio API

64.
Web Audio API
オーディオ波形操作
フィルタリング
ミキシング
加工
動的に波形を生成することも可能
SE等の短い音声に特に威力を発揮

65.
音声処理の種類
双2次フィルタ
ローパスフィルタ
ハイパスフィルタ
バンドパスフィルタ
ウェーブシェイパー
コンボルバ(畳み込み)
リバーブ(残響)
ディレイ(遅延)
ローシェフフィルタ
ハイシェフフィルタ
ダイナミックコンプレッサー
ピーキングフィルタ
ゲイン
ノッチフィルタ
オールパスフィルタ

66.
in/out間をノードで接続
input
Echo
Delay
0.2s
Gain
20%
output

67.
in側とout側の種類
input
output
マイク
スピーカー
MediaStream
MediaStream
バイナリデータ
オシレータ
Audio要素
Video要素

68.
プログラマブル
ScriptProcessorNode
inputとoutputの両方で使える
input and/or output
input例
getUserMediaから取得した音声を加工
WebRTCで取得した遠隔地の音声を解析
output例
ゼロから音声データの生成が可能

69.
解析
output
加工
input
生成

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

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

72.
音源とリスナーを
3D空間上に
◎
◎
◎
左右スピーカーの
音量の差
ドップラー効果

73.
Web Audo API まとめ
ノードを接続し処理を行なう
多数のinput/output
音声データの編集ができる
JavaScriptで直接編集も可能
3D空間にも対応

74.
WebGL

75.
WebGL
3DグラフィックのAPI
OpenGLのサブセット的な位置付け
GPUを利用する
互換レイヤーを挟んでいる
DirectX(Windows)でも利用可能
GLSLの知識が必要で非常に高難度

76.
three.js
デファクトスタンダードのライブラリ
WebGL界のjQuery
3DCDの知識があればハードルは低い
CSS3D等のレンダラーも選択可能

77.
geometry
環境光の色
ハイライトの色
mesh
テクスチャ
透明度・屈折率 etc.
material

78.
環境光の色
遠景の処理 etc.
mesh
camera
light

79.
geometry(幾何学図形)
テキスト
円
円環体(トーラス)
リング等
平面
四面体
立方体
八面体
円柱
二十面体
チューブ
多面体
球体
パラメトリック曲線
etc.

80.
material
物体の色
ハイライトの色
ハイライトの大きさ
map
テクスチャ画像
バンプ(表面の凹凸)
発光色
画像
金属か否か
スケール
環境光の色
屈折率
透明度
環境マッピング(擬似的
な背景)
etc.

81.
scene & etc.
カメラ
ライト(照明)
環境光
メッシュ
フォグ
パーティクル
レンズフレア
レンダラー
選択可能
ピッキング
マウスによる選択等
軌道制御
マウスでカメラ移動
ポストプロセス
etc.

82.
WebGL まとめ
OpenGLのサブセット
GPUを利用
Windowsでも使える
GLSLは難解
three.jsを使おう

83.
Combination

84.
APIを組み合わせて使う
色々
見てみよう!

85.
HTML5の効能
Webプラットフォーム上
組み合わせて使いやすい
APIが適度に抽象化されている
一部例外あり
やりたい事が簡単にできる
参入障壁が非常に低い
今後はアイディアが重要に...?

86.
完

87.
質疑応答
もう一度聞きたいところはありますか?
もっと詳しく聞きたいところはありますか?

88.
ご清聴
ありがとう
ございました

89.
付録

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/