HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
-
Upload
youkinjoh -
Category
Technology
-
view
24.620 -
download
8
description
Transcript of HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
![Page 1: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/1.jpg)
WebSocket / WebRTC 技術解説第6回 CORETECH技術講習会 HTML5などの最新Web技術2013/10/18
金城 雄
NTTアドバンステクノロジ情報機器テクノロジセンタ所属
![Page 2: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/2.jpg)
WebSocket / WebRTC 技術解説第6回 CORETECH技術講習会 HTML5などの最新Web技術2013/10/18
金城 雄
NTTアドバンステクノロジ情報機器テクノロジセンタ所属
![Page 3: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/3.jpg)
HTML5とWebSocket / WebRTC /Web Audio API / WebGL 技術解説第6回 CORETECH技術講習会 HTML5などの最新Web技術2013/10/18
金城 雄
NTTアドバンステクノロジ情報機器テクノロジセンタ所属
![Page 4: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/4.jpg)
今日はてんこ盛り超特急で行きます内容 合計35分HTML5の概要 6分HTML5のAPI 4つ x 6分 (デモ込み)HTML5のAPIの組み合わせ 5分 (デモ込み)
バッファ 5分質疑応答 5分
セキの時間込み : ノドの調子が戻らないのでご勘弁を...
![Page 6: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/6.jpg)
狭義のHTML5と
広義のHTML5
![Page 7: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/7.jpg)
HTML5 = HTML5 + CSS + JS
![Page 8: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/8.jpg)
HTML5 = HTML5 + CSS + JS
広義
狭義
![Page 9: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/9.jpg)
HTML5 = HTML5 + CSS + JS
広義
狭義 マークアップ言語の仕様従来のHTMLの改訂
新しいAPIも含まれるバズワード(マーケティング用語)
![Page 10: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/10.jpg)
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 より引用
![Page 11: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/11.jpg)
HTML5 = HTML5 + CSS + JS
本日のコンテキスト
これ
![Page 12: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/12.jpg)
HTML5 = HTML5 + CSS + JS
本日のコンテキスト
これ
最近ではバズワードを避けて、一部の人は
Open Web Platformと呼んでいる。
![Page 13: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/13.jpg)
で、HTML5で何ができるように
なるの?
![Page 14: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/14.jpg)
できることはこれまでと変わらない
![Page 15: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/15.jpg)
これまでブラウザで
できなかったことができるようになる
だけ
![Page 16: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/16.jpg)
元々はWeb Pageを閲覧するためのものだった
ブラウザで、Web Applicationを実行できるようにするために、
必要なものを追加
![Page 17: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/17.jpg)
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
Typed Arraysブラウザ上でバイナリデータを操作できるようにしたよ
今まで出来なかったことがおかしい
![Page 18: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/18.jpg)
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
Web Audio APIブラウザ上で音声データを操作・再生できるようにしたよ
今まで出来なかったことがおかしい
![Page 19: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/19.jpg)
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
Web Workersバッググランドで処理ができるようになったよ
今まで出来なかったことがおかしい
![Page 20: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/20.jpg)
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
CSS3画像を使わなくても、角丸・グラデーション使えるよ
今まで出来なかったことがおかしい
![Page 21: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/21.jpg)
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
SVGベクターデータが使えるようになったよ
今まで出来なかったことがおかしい
![Page 22: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/22.jpg)
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
(広義の)HTML5
色々できるようになったよ
でも、まだまだ全然機能足りてないじゃん!
![Page 23: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/23.jpg)
機能一覧だけ見ていると本質を見失う
![Page 24: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/24.jpg)
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
iPhone
電話を再発明しました
技術的に新しくないよね3thPartyのアプリ入れられないとは...ガラケーのほうが高性能
![Page 25: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/25.jpg)
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
Open SourceOS/アプリを作ってSourceをOpenにしたよ
だれが品質保障するの?おもちゃだろ、おもちゃこれからも、プロプライエタリなの買うよ
![Page 26: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/26.jpg)
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
CD音楽をデジタルで保存できるようにしてみたよ
音質悪いよ...メディアの耐久年数短すぎやっぱりアナログの方が良いよね
![Page 27: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/27.jpg)
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
みんな! Tweetして!
つぶやくしかできないの?SNSやblogの方が高機能だよねそんなのやらないよ
![Page 28: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/28.jpg)
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
コンビニエンスストア
便利な小売店だよ!
商品高すぎ定価販売なんてありえない...すぐ潰れるんじゃない?
![Page 29: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/29.jpg)
本質を理解しなくては!
![Page 30: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/30.jpg)
機能一覧には現れない
HTML5の特徴
![Page 31: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/31.jpg)
HTML5
OSの機能がブラウザ上で使える低レイヤーのAPIがWeb APIで共通化特許に制限されない誰もが利用可能Webプラットフォーム上で統合
![Page 32: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/32.jpg)
OSの機能がブラウザ上でOSの機能が、ブラウザを介してサイトに提供されるアドレス帳 ネットワーク情報 バッテリー状態 通知ストリーム メディアデータ オーディオ ビデオ 字幕
Webカメラ マイク Audioの波形操作2D(ラスター,ベクター) 3DCG 音声入力 音声合成暗号化 ファイルシステム データベース スレッド通信(WebSocket,TCP,UDP) Bluetooth
加速度センサ 傾きセンサ ジャイロ バイブレーションGPS 電子コンパス 温度センサ 湿度センサ 気圧センサ
環境光センサ 近接センサ 磁気センサ etc.ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。
![Page 33: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/33.jpg)
Web APIで共通化
低レイヤーのAPIがWeb APIで共通化されるOSに非依存実行環境に基本的に非依存環境による制限はありえる
センサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が制限として考えられます。
![Page 34: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/34.jpg)
特許に制限されない
Openであることが特徴パテント・フリーロイヤリティ・フリー
いわゆる業界団体よりもオープン仕様だけでなく策定過程も公開
特定の組織の利益よりも人類の利益を市場原理に左右される側面もあり。理想と現実は違う...。
![Page 35: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/35.jpg)
誰もが利用可能世界中の誰もが利用可能な機能限られた組織の限られた人しか使えない仕様はオープンではない
今も100年後も自由に使える「古文書の一部が、DRMで保護されていて見られない」のない未来に(電子書籍の仕様にも関連しているため)
DRMについての議論が始まったそうです。
![Page 36: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/36.jpg)
Web P/F上で統合
これら全てが、OpenWebプラットフォーム上で統合アイディア次第で新しい物が誰にでも日曜プログラミングで音声合成夏休みの宿題でビデオチャット作成
これらの知見はWeb上に蓄積
![Page 39: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/39.jpg)
インパクトの強そうな仕様の一部
WebSocketWebRTCWeb Audio APIWebGL
![Page 40: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/40.jpg)
WebSocket
![Page 41: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/41.jpg)
WebSocket
高速・双方向通信2つの仕様WebSocket ProtocolWebSocket API
C10K問題を回避 <- 今回は詳細にはふれません訂正 : Cometよりも低負荷
![Page 42: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/42.jpg)
何故双方向通信が可能か
サーバ側から情報を送るにはrequest/responseでないと届きにくい
Client Serverrequest
response
FireWallNATProxy
access
access×
![Page 43: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/43.jpg)
何故双方向通信が可能か
HTTPでWebSocketのハンドシェイクを行なう
Client Server
request
response
GET / HTTP/1.1Upgrade: websocketConnection: Upgrade(略)
HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: Upgrade(略)
handshake
厳密にはHTTPと完全互換ではありません。
![Page 44: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/44.jpg)
何故双方向通信が可能か
ハンドシェイク後、双方向通信が可能となる
Client Server
request
responsehandshake
SwitchingProtocols
![Page 45: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/45.jpg)
何故双方向通信が可能か
切断しない限り、双方向通信が可能
Client Server
request
responsehandshake
![Page 46: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/46.jpg)
何故双方向通信が可能か
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
![Page 47: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/47.jpg)
何故高速通信が可能かある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!
![Page 48: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/48.jpg)
何故高速通信が可能か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
![Page 49: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/49.jpg)
何故高速通信が可能か送信データが「Hello, world」の場合
HTTP12 bytes + 400 bytes → 412 Bytes97.1%がHeader
WebSocket (Client => Server)12 bytes + 6 bytes → 18 Bytes33.3%がHeader
![Page 50: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/50.jpg)
何故高速通信が可能か送信データが「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倍のデータ量
![Page 51: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/51.jpg)
C10K問題を回避
今回は詳細にはふれません
http://www.slideshare.net/You_Kinjoh/javascript-websocket
訂正 : Cometよりも低負荷
![Page 52: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/52.jpg)
http://www.slideshare.net/You_Kinjoh/javascript-websocket
![Page 53: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/53.jpg)
WebSocket まとめ
高速・双方向通信HTTPからSwitching ProtocolsHTTPSなら95%で接続可能Headerが小さいことが高速通信の理由のひとつC10K問題を回避できる
訂正 : Cometよりも低負荷
![Page 54: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/54.jpg)
WebRTC
![Page 55: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/55.jpg)
WebRTCボイス・ビデオチャット / P2P2つの仕様Media Capture and Streams (getUserMedia)WebRTC 1.0: Real-time Communication Between Browsers
![Page 56: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/56.jpg)
Media Capture and Streams (getUserMesia)
ブラウザからマイクやカメラにアクセス利用範囲はWebRTC以外とも音声処理(with Web Audio API)ボイスチェンジャー etc.
画像処理(with Canvas)顔検出 etc.
顔認識ができるようになるのも時間の問題か?
![Page 57: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/57.jpg)
WebRTC 1.0: Real-time Communication Between
Browsers
ブラウザとブラウザを接続シグナリングSIPXMPPWebSocket <- 今のところ一番使われているetc.
![Page 58: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/58.jpg)
WebRTC 1.0: Real-time Communication Between
Browsers
NAT通過・ ネゴシエーションICE(STUN + TURN + α)
STUNP2P・UDPホールパンチング
TURNサーバ経由
![Page 59: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/59.jpg)
WebRTC 1.0: Real-time Communication Between
Browsers
データ通信MediaStream音声データ・映像データ
DataChannelテキストデータ・バイナリデータ
![Page 60: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/60.jpg)
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
![Page 61: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/61.jpg)
WebRTC 1.0: Real-time Communication Between
Browsers
APIが複雑でわかりにくい
抽象化した仕様の多いHTML5のAPIの中では非常に複雑
![Page 62: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/62.jpg)
WebRTC まとめ
ボイス・ビデオチャットが可能テキスト・バイナリの通信も可能P2PNAT通過の仕組みAPIが複雑ライブラリを使うという選択肢も
定番と言われるようなライブラリはまだありません。
![Page 63: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/63.jpg)
Web Audio API
![Page 64: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/64.jpg)
Web Audio API
オーディオ波形操作フィルタリングミキシング加工
動的に波形を生成することも可能SE等の短い音声に特に威力を発揮
![Page 65: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/65.jpg)
音声処理の種類ウェーブシェイパーコンボルバ(畳み込み)
リバーブ(残響)
ディレイ(遅延)ダイナミックコンプレッサーゲイン
双2次フィルタローパスフィルタ
ハイパスフィルタ
バンドパスフィルタ
ローシェフフィルタ
ハイシェフフィルタ
ピーキングフィルタ
ノッチフィルタ
オールパスフィルタ
![Page 66: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/66.jpg)
Delay0.2s
in/out間をノードで接続
outputinput
Gain20%
Echo
![Page 67: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/67.jpg)
in側とout側の種類inputマイクMediaStreamバイナリデータオシレータAudio要素Video要素
outputスピーカーMediaStream
![Page 68: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/68.jpg)
プログラマブルScriptProcessorNodeinputとoutputの両方で使えるinput and/or outputinput例getUserMediaから取得した音声を加工WebRTCで取得した遠隔地の音声を解析
output例ゼロから音声データの生成が可能
![Page 69: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/69.jpg)
output
input
生成
加工
解析
![Page 70: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/70.jpg)
音源とリスナーを3D空間上に
PannerNode・AudioListener音源とリスナーを3D空間上に配置音源の方向・移動速度も指定可能左右の音量差・ドップラー効果等WebGLと同時によく使われるOpenALに近い
![Page 71: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/71.jpg)
音源とリスナーを3D空間上に
◎ ◎ ◎
![Page 72: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/72.jpg)
音源とリスナーを3D空間上に
◎ ◎ ◎左右スピーカーの音量の差
ドップラー効果
![Page 73: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/73.jpg)
Web Audo API まとめ
ノードを接続し処理を行なう多数のinput/output音声データの編集ができるJavaScriptで直接編集も可能3D空間にも対応
![Page 74: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/74.jpg)
WebGL
![Page 75: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/75.jpg)
WebGL
3DグラフィックのAPIOpenGLのサブセット的な位置付けGPUを利用する互換レイヤーを挟んでいるDirectX(Windows)でも利用可能GLSLの知識が必要で非常に高難度
![Page 76: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/76.jpg)
three.js
デファクトスタンダードのライブラリWebGL界のjQuery3DCDの知識があればハードルは低いCSS3D等のレンダラーも選択可能
![Page 77: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/77.jpg)
geometry
mesh
環境光の色ハイライトの色
テクスチャ透明度・屈折率 etc. material
![Page 78: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/78.jpg)
mesh
環境光の色遠景の処理 etc.
light
camera
![Page 79: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/79.jpg)
geometry(幾何学図形)テキスト円平面立方体円柱チューブ球体
円環体(トーラス)リング等
四面体八面体二十面体多面体パラメトリック曲線etc.
![Page 80: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/80.jpg)
material物体の色ハイライトの色ハイライトの大きさ発光色金属か否か環境光の色屈折率透明度
mapテクスチャ画像
バンプ(表面の凹凸)画像スケール
環境マッピング(擬似的な背景)etc.
![Page 81: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/81.jpg)
scene & etc.カメラライト(照明)環境光メッシュフォグパーティクルレンズフレア
レンダラー選択可能
ピッキングマウスによる選択等
軌道制御マウスでカメラ移動
ポストプロセスetc.
![Page 82: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/82.jpg)
WebGL まとめ
OpenGLのサブセットGPUを利用Windowsでも使えるGLSLは難解three.jsを使おう
![Page 83: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/83.jpg)
Combination
![Page 84: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/84.jpg)
APIを組み合わせて使う
色々見てみよう!
![Page 85: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/85.jpg)
HTML5の効能Webプラットフォーム上組み合わせて使いやすいAPIが適度に抽象化されている一部例外あり
やりたい事が簡単にできる参入障壁が非常に低い今後はアイディアが重要に...?
![Page 86: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/86.jpg)
完
![Page 87: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/87.jpg)
質疑応答
もう一度聞きたいところはありますか?
もっと詳しく聞きたいところはありますか?
![Page 88: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/88.jpg)
ご清聴ありがとうございました
![Page 89: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/89.jpg)
付録
![Page 90: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://reader031.fdocuments.net/reader031/viewer/2022020920/54953e13b479598d538b468f/html5/thumbnails/90.jpg)
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/