WebSocket / WebRTC 技術解説第6回 CORETECH技術講習会 HTML５などの最新Web技術2013/10/18

金城 雄

NTTアドバンステクノロジ情報機器テクノロジセンタ所属

WebSocket / WebRTC 技術解説第6回 CORETECH技術講習会 HTML５などの最新Web技術2013/10/18

金城 雄

NTTアドバンステクノロジ情報機器テクノロジセンタ所属

HTML5とWebSocket / WebRTC /Web Audio API / WebGL 技術解説第6回 CORETECH技術講習会 HTML５などの最新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

広義

狭義

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音楽をデジタルで保存できるようにしてみたよ

音質悪いよ...メディアの耐久年数短すぎやっぱりアナログの方が良いよね

(　･`ω･´)ドヤァ

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

Twitter

みんな! 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上に蓄積

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

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

インパクトの強そうな仕様の一部

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/