WebSocket / WebRTC 技術解説 第6回 CORETECH技術講習会 HTML5などの最新Web技術 2013/10/18 金城 雄 NTTアドバンステクノロジ 情報機器テクノロジセンタ所属
Dec 20, 2014
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分
セキの時間込み : ノドの調子が戻らないのでご勘弁を...
狭義のHTML5と
広義のHTML5
HTML5 = HTML5 + CSS + JS
HTML5 = HTML5 + CSS + JS
広義
狭義
HTML5 = HTML5 + CSS + JS
広義
狭義 マークアップ言語の仕様従来のHTMLの改訂
新しいAPIも含まれるバズワード(マーケティング用語)
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Webm
H.264
Micro-Data
WebGL
WebSQL
IndexedDB
SVG
Server-Sent ev.
WebSockets
WebSockets
Geo-location
FileAPI
WebStorage
XHR2
MathML
WebAudio
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
Opus
ECMAScript ECMA
6th
USB
CSP
SPDY
WebCL
WebRTC
NetInfo
MP3
DeviceStorage
TCPSocket
NFC
File Sys
Notifi-cation
XHTML5
Orien-tation
WebWorkers
WebMessag-
ing
DOM4
SMIL Vibra-tion
Proxi-mity
XPathRSS
RDF
OGPSchema
.org
WAI-ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
BatteryStatus
Radio
Tel
HTML
DNT
http://www.slideshare.net/dynamis/toward-firefox-os/26 より引用
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 SourceOS/アプリを作ってSourceをOpenにしたよ
だれが品質保障するの?おもちゃだろ、おもちゃこれからも、プロプライエタリなの買うよ
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
CD音楽をデジタルで保存できるようにしてみたよ
音質悪いよ...メディアの耐久年数短すぎやっぱりアナログの方が良いよね
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
みんな! Tweetして!
つぶやくしかできないの?SNSやblogの方が高機能だよねそんなのやらないよ
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
コンビニエンスストア
便利な小売店だよ!
商品高すぎ定価販売なんてありえない...すぐ潰れるんじゃない?
本質を理解しなくては!
機能一覧には現れない
HTML5の特徴
HTML5
OSの機能がブラウザ上で使える低レイヤーのAPIがWeb APIで共通化特許に制限されない誰もが利用可能Webプラットフォーム上で統合
OSの機能がブラウザ上でOSの機能が、ブラウザを介してサイトに提供されるアドレス帳 ネットワーク情報 バッテリー状態 通知ストリーム メディアデータ オーディオ ビデオ 字幕
Webカメラ マイク Audioの波形操作2D(ラスター,ベクター) 3DCG 音声入力 音声合成暗号化 ファイルシステム データベース スレッド通信(WebSocket,TCP,UDP) Bluetooth
加速度センサ 傾きセンサ ジャイロ バイブレーションGPS 電子コンパス 温度センサ 湿度センサ 気圧センサ
環境光センサ 近接センサ 磁気センサ etc.ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。
Web APIで共通化
低レイヤーのAPIがWeb APIで共通化されるOSに非依存実行環境に基本的に非依存環境による制限はありえる
センサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が制限として考えられます。
特許に制限されない
Openであることが特徴パテント・フリーロイヤリティ・フリー
いわゆる業界団体よりもオープン仕様だけでなく策定過程も公開
特定の組織の利益よりも人類の利益を市場原理に左右される側面もあり。理想と現実は違う...。
誰もが利用可能世界中の誰もが利用可能な機能限られた組織の限られた人しか使えない仕様はオープンではない
今も100年後も自由に使える「古文書の一部が、DRMで保護されていて見られない」のない未来に(電子書籍の仕様にも関連しているため)
DRMについての議論が始まったそうです。
Web P/F上で統合
これら全てが、OpenWebプラットフォーム上で統合アイディア次第で新しい物が誰にでも日曜プログラミングで音声合成夏休みの宿題でビデオチャット作成
これらの知見はWeb上に蓄積
インパクトの強そうな仕様の一部
WebSocketWebRTCWeb Audio APIWebGL
WebSocket
WebSocket
高速・双方向通信2つの仕様WebSocket ProtocolWebSocket API
C10K問題を回避 <- 今回は詳細にはふれません訂正 : Cometよりも低負荷
何故双方向通信が可能か
サーバ側から情報を送るにはrequest/responseでないと届きにくい
Client Serverrequest
response
FireWallNATProxy
access
access×
何故双方向通信が可能か
HTTPでWebSocketのハンドシェイクを行なう
Client Server
request
response
GET / HTTP/1.1Upgrade: websocketConnection: Upgrade(略)
HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: Upgrade(略)
handshake
厳密にはHTTPと完全互換ではありません。
何故双方向通信が可能か
ハンドシェイク後、双方向通信が可能となる
Client Server
request
responsehandshake
SwitchingProtocols
何故双方向通信が可能か
切断しない限り、双方向通信が可能
Client Server
request
responsehandshake
何故双方向通信が可能か
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
何故高速通信が可能かあるHTTP requestのHeaderGET / HTTP/1.1Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Accept-Encoding: gzip,deflate,sdchAccept-Language: ja,en-US;q=0.8,en;q=0.6Cache-Control: max-age=0Connection: keep-aliveHost: localhostIf-Modified-Since: Tue, 08 Oct 2013 17:46:38 GMTIf-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!
何故高速通信が可能かWebSocketのHeader FIN 1 bit RSV1 1 bit RSV2 1 bit RSV3 1 bit Opcode 4 bits Mask 1 bit Payload length 7 bits, 7+16 bits, or 7+64 bits Masking-key 0 bytes or 4 bytes
2~14 Bytes
何故高速通信が可能か送信データが「Hello, world」の場合
HTTP12 bytes + 400 bytes → 412 Bytes97.1%がHeader
WebSocket (Client => Server)12 bytes + 6 bytes → 18 Bytes33.3%がHeader
何故高速通信が可能か送信データが「Hello, world」の場合
HTTP12 bytes + 400 bytes → 412 Bytes97.1%がHeader
WebSocket (Client => Server)12 bytes + 6 bytes → 18 Bytes33.3%がHeader
HTTP12 bytes + 400 bytes →97.1%がHeader
WebSocket (Client => Server)12 bytes + 6 bytes →33.3%がHeader
同じ文字列を送信するために約23倍のデータ量
C10K問題を回避
今回は詳細にはふれません
http://www.slideshare.net/You_Kinjoh/javascript-websocket
訂正 : Cometよりも低負荷
http://www.slideshare.net/You_Kinjoh/javascript-websocket
WebSocket まとめ
高速・双方向通信HTTPからSwitching ProtocolsHTTPSなら95%で接続可能Headerが小さいことが高速通信の理由のひとつC10K問題を回避できる
訂正 : Cometよりも低負荷
WebRTC
WebRTCボイス・ビデオチャット / P2P2つの仕様Media Capture and Streams (getUserMedia)WebRTC 1.0: Real-time Communication Between Browsers
Media Capture and Streams (getUserMesia)
ブラウザからマイクやカメラにアクセス利用範囲はWebRTC以外とも音声処理(with Web Audio API)ボイスチェンジャー etc.
画像処理(with Canvas)顔検出 etc.
顔認識ができるようになるのも時間の問題か?
WebRTC 1.0: Real-time Communication Between
Browsers
ブラウザとブラウザを接続シグナリングSIPXMPPWebSocket <- 今のところ一番使われているetc.
WebRTC 1.0: Real-time Communication Between
Browsers
NAT通過・ ネゴシエーションICE(STUN + TURN + α)
STUNP2P・UDPホールパンチング
TURNサーバ経由
WebRTC 1.0: Real-time Communication Between
Browsers
データ通信MediaStream音声データ・映像データ
DataChannelテキストデータ・バイナリデータ
Web Server
WebSocketServer
ICE Server(STUN)
Browser Browser
NAT NAT
HTML+JS+CSS
Global IP/Port
signaling
HTML+JS+CSS
Global IP/Port
signaling
data
WebRTC 1.0: Real-time Communication Between
Browsers
APIが複雑でわかりにくい
抽象化した仕様の多いHTML5のAPIの中では非常に複雑
WebRTC まとめ
ボイス・ビデオチャットが可能テキスト・バイナリの通信も可能P2PNAT通過の仕組みAPIが複雑ライブラリを使うという選択肢も
定番と言われるようなライブラリはまだありません。
Web Audio API
Web Audio API
オーディオ波形操作フィルタリングミキシング加工
動的に波形を生成することも可能SE等の短い音声に特に威力を発揮
音声処理の種類ウェーブシェイパーコンボルバ(畳み込み)
リバーブ(残響)
ディレイ(遅延)ダイナミックコンプレッサーゲイン
双2次フィルタローパスフィルタ
ハイパスフィルタ
バンドパスフィルタ
ローシェフフィルタ
ハイシェフフィルタ
ピーキングフィルタ
ノッチフィルタ
オールパスフィルタ
Delay0.2s
in/out間をノードで接続
outputinput
Gain20%
Echo
in側とout側の種類inputマイクMediaStreamバイナリデータオシレータAudio要素Video要素
outputスピーカーMediaStream
プログラマブルScriptProcessorNodeinputとoutputの両方で使えるinput and/or outputinput例getUserMediaから取得した音声を加工WebRTCで取得した遠隔地の音声を解析
output例ゼロから音声データの生成が可能
output
input
生成
加工
解析
音源とリスナーを3D空間上に
PannerNode・AudioListener音源とリスナーを3D空間上に配置音源の方向・移動速度も指定可能左右の音量差・ドップラー効果等WebGLと同時によく使われるOpenALに近い
音源とリスナーを3D空間上に
◎ ◎ ◎
音源とリスナーを3D空間上に
◎ ◎ ◎左右スピーカーの音量の差
ドップラー効果
Web Audo API まとめ
ノードを接続し処理を行なう多数のinput/output音声データの編集ができるJavaScriptで直接編集も可能3D空間にも対応
WebGL
WebGL
3DグラフィックのAPIOpenGLのサブセット的な位置付けGPUを利用する互換レイヤーを挟んでいるDirectX(Windows)でも利用可能GLSLの知識が必要で非常に高難度
three.js
デファクトスタンダードのライブラリWebGL界のjQuery3DCDの知識があればハードルは低いCSS3D等のレンダラーも選択可能
geometry
mesh
環境光の色ハイライトの色
テクスチャ透明度・屈折率 etc. material
mesh
環境光の色遠景の処理 etc.
light
camera
geometry(幾何学図形)テキスト円平面立方体円柱チューブ球体
円環体(トーラス)リング等
四面体八面体二十面体多面体パラメトリック曲線etc.
material物体の色ハイライトの色ハイライトの大きさ発光色金属か否か環境光の色屈折率透明度
mapテクスチャ画像
バンプ(表面の凹凸)画像スケール
環境マッピング(擬似的な背景)etc.
scene & etc.カメラライト(照明)環境光メッシュフォグパーティクルレンズフレア
レンダラー選択可能
ピッキングマウスによる選択等
軌道制御マウスでカメラ移動
ポストプロセスetc.
WebGL まとめ
OpenGLのサブセットGPUを利用Windowsでも使えるGLSLは難解three.jsを使おう
Combination
APIを組み合わせて使う
色々見てみよう!
HTML5の効能Webプラットフォーム上組み合わせて使いやすいAPIが適度に抽象化されている一部例外あり
やりたい事が簡単にできる参入障壁が非常に低い今後はアイディアが重要に...?
完
質疑応答
もう一度聞きたいところはありますか?
もっと詳しく聞きたいところはありますか?
ご清聴ありがとうございました
付録
WebSocketWebRTC
getUserMediaAn AR Game
https://developer.mozilla.org/ja/demos/detail/an-ar-game/launchReal-time Communication Between Browsers
Video Chat with getUserMediahttps://apprtc.appspot.com/
Web Audio APIPitch Detector with getUserMedia
http://webaudiodemos.appspot.com/pitchdetect/index.htmlWebGL
3D Interactive Asteroid Space Visualization - Asterankhttp://www.asterank.com/3d/
+360º - Car Visualizer - Three.jshttp://carvisualizer.plus360degrees.com/threejs/
Aquariumhttp://webglsamples.googlecode.com/hg/aquarium/aquarium.html
Water/Oceanhttp://oos.moxiecode.com/js_webgl/water_noise/
Epic Citadelhttp://www.unrealengine.com/html5/
CombinationChrome World Wide Maze
for Machinehttp://chrome.com/maze/
for Androidhttp://g.co/maze
Cube Slamhttps://www.cubeslam.com/