SlideShare a Scribd company logo
公

開

版

WebSocket /
WebRTCの技術紹介
2014/02/24

情報機器テクノロジセンタ
回り道 康博
本日のテーマ
WebSocket
WebRTC
2
まずはWebSocket

3
の前に
HTTPのおさらい

4
HTTP
•

Webにおける通信の基本

•

HTTPリクエスト=レスポンスのやり取りの繰り返し
クライアント

サーバ

HTTPリクエスト

HTTPレスポンス
(並列読み込みによる時間短縮は本題でないので割愛)

5
HTTP
•

Webにおける通信の基本

•

HTTPリクエスト=レスポンスのやり取りの繰り返し
クライアント

HTML、JavaScript、
CSS、…を順に要求

サーバ

HTTPリクエスト

HTTPレスポンス
(並列読み込みによる時間短縮は本題でないので割愛)

5
HTTP
•

Webにおける通信の基本

•

HTTPリクエスト=レスポンスのやり取りの繰り返し
クライアント

HTML、JavaScript、
CSS、…を順に要求

サーバ

HTTPリクエスト

HTTPレスポンス
(並列読み込みによる時間短縮は本題でないので割愛)

5
HTTP
•

Webにおける通信の基本

•

HTTPリクエスト=レスポンスのやり取りの繰り返し
クライアント

HTML、JavaScript、
CSS、…を順に要求

サーバ

HTTPリクエスト

HTTPレスポンス
(並列読み込みによる時間短縮は本題でないので割愛)

5
HTTP
•

Webにおける通信の基本

•

HTTPリクエスト=レスポンスのやり取りの繰り返し
クライアント

HTML、JavaScript、
CSS、…を順に要求

サーバ

…

HTTPリクエスト

HTTPレスポンス
(並列読み込みによる時間短縮は本題でないので割愛)

5
HTTP
•

Webにおける通信の基本

•

HTTPリクエスト=レスポンスのやり取りの繰り返し
クライアント

…

描画

HTML、JavaScript、
CSS、…を順に要求

サーバ

HTTPリクエスト

HTTPレスポンス
(並列読み込みによる時間短縮は本題でないので割愛)

5
HTTPの欠点
1. リソース(URI)単位でしか要求・取得ができ
ない
•

100リソースあったら、100回リクエストとレスポンス
を繰り返す

2. 要求をクライアントからしか送れない
•

素の方法ではサーバからPUSHできない

3. HTTPヘッダが大きい
•

小さいデータを送ると、HTTPヘッダが相対的に大きい
6
HTTPの欠点への対策
1. リソース(URI)単位でしか要求・
取得ができない

7
HTTPの欠点への対策
1. リソース(URI)単位でしか要求・
取得ができない

ファイル数を減らす
まとめられるファイルをまとめる
7
HTTPの欠点への対策
2. 要求をクライアントからしか送れな
い

8
HTTPの欠点への対策
2. 要求をクライアントからしか送れな
い

PUSH手法を導入する
ポーリング、Comet…
8
HTTPの欠点への対策
3. HTTPヘッダが大きい

9
HTTPの欠点への対策
3. HTTPヘッダが大きい

お手上げ
9
で、新しい仕様
1. リソース(URI)単位でしか要求・取得ができ
ない
2. 要求をクライアントからしか送れない
3. HTTPヘッダが大きい

10
で、新しい仕様
1. リソース(URI)単位でしか要求・取得ができ
ない
SPDY HTTP 2.0(まだdraft※)
2. 要求をクライアントからしか送れない
3. HTTPヘッダが大きい

※ 2014/02/13版 http://tools.ietf.org/html/draft-ietf-httpbis-http2-10

10
で、新しい仕様
1. リソース(URI)単位でしか要求・取得ができ
ない
SPDY HTTP 2.0(まだdraft※)
2. 要求をクライアントからしか送れない

WebSocket
3. HTTPヘッダが大きい

※ 2014/02/13版 http://tools.ietf.org/html/draft-ietf-httpbis-http2-10

10
で、新しい仕様
1. リソース(URI)単位でしか要求・取得ができ
ない
SPDY HTTP 2.0(まだdraft※)
2. 要求をクライアントからしか送れない

WebSocket
3. HTTPヘッダが大きい

SPDY HTTP 2.0(ヘッダサイズ圧縮)
WebSocket(HTTPを使わない)
※ 2014/02/13版 http://tools.ietf.org/html/draft-ietf-httpbis-http2-10

10
改めてWebSocket

11
お話しすること
•

概要

•

標準化状況

•

通信イメージ

•

HTTPとWebSocketの通信量の比較

•

同じくPUSH方式の比較

•

ブラウザの対応状況
12
お話ししないこと
•

データ形式、パラメータ

•

最新の標準化状況
•

現在進行形で新しいドラフトが出ている…

13
WebSocketの概要
•

HTTPと同じくクライアント=サーバ型
•

•

アプリケーション層のプロトコル、下位層
はTCP
•

•

WebSocketクライアントとWebSocketサーバの
ペアで動作

これもHTTPと同様

クライアントとサーバの双方からデータを
送受信
14
WebSocketの概要
•

URIスキーム
•
•

•

ws://∼(HTTPの「http://∼」相当)
wss://∼(HTTPの「https://∼」相当)

WebSocketプロトコルに未対応のネッ
トワーク機器が多い
•

TLS/SSLの上をhttps://∼のフリをして
こっそり流すのが常套
15
ws://∼
HTTPプロトコルと異なるデータが流れてくるので
通信経路上のネットワーク機器が通信を遮断する可能性

HTTP

WebSocket
TCP

http://∼

ws://∼
16
wss://∼
HTTP

WebSocket
TLS/SSL
TCP

https://∼

wss://∼
17
wss://∼
HTTP

WebSocket
TLS/SSL

暗号化

TCP
https://∼

wss://∼
17
wss://∼
暗号化後のレイヤなので、通信経路上では見分けがつかない

HTTP

WebSocket
TLS/SSL

暗号化

TCP
https://∼

wss://∼
17
wss://∼
ws://∼より引っかかりにくい
暗号化後のレイヤなので、通信経路上では見分けがつかない

HTTP

WebSocket
TLS/SSL

暗号化

TCP
https://∼

wss://∼
17
WebSocketの標準化状況
•

WebSocketプロトコル(@IETF、RFC6455)
•
•

通信規格側の仕様

•

•

Proposed Standard

http://tools.ietf.org/html/rfc6455

WebSocket API(@W3C)
•

Candidate Recommendation

•

Web API側(JavaScriptから使う側)の仕様

•

http://www.w3.org/TR/websockets/
18
WebSocketを端的に表すと

Web上でソケット通信っぽい
ことをするための規格

19
WebSocket通信のイメージ

クライアント

サーバ

WebSocket

メッセージ
20
WebSocket通信のイメージ
WebSocketの確立
(HTTPからUPGRADE)

クライアント

サーバ

WebSocket

メッセージ
20
WebSocket通信のイメージ
WebSocketの確立
(HTTPからUPGRADE)

クライアント

サーバ

WebSocket

メッセージ
20
WebSocket通信のイメージ
WebSocketの確立
(HTTPからUPGRADE)

クライアント

サーバ

WebSocket

メッセージ
20
WebSocket通信のイメージ
WebSocketの確立
(HTTPからUPGRADE)

クライアント

サーバ

WebSocket

メッセージ
20
WebSocket通信のイメージ
WebSocketの確立
(HTTPからUPGRADE)

クライアント

双方から任意のデータを送信
サーバ

WebSocket

メッセージ
20
WebSocket通信のイメージ

クライアント

サーバ

WebSocket

メッセージ
21
WebSocket通信のイメージ
送信完了前に別の送信を開始しても可

クライアント

サーバ

WebSocket

メッセージ
21
WebSocket通信のイメージ
送信完了前に別の送信を開始しても可

クライアント

サーバ

WebSocket

クロスしても可

メッセージ
21
WebSocket通信のイメージ

WebSocket

メッセージ
22
WebSocketのフレーム
•

制御フレーム
•
•

Pingフレーム

•

•

Closeフレーム

Pongフレーム

データフレーム
•
•

•

Textフレーム
Binaryフレーム

継続フレーム
23
WebSocketのフレームサイズ
4 byte
フラグ+基本ペイロード長 (2 byte)
拡張ペイロード長 (0 or 2 or 8 byte)
Masking-key (0 or 4 byte)
!
合計 最小2 byte∼最大14 byte
ペイロードデータ(データ格納部)
∼8 EiB

24
一方、HTTPレスポンスヘッダ
Accept-Ranges:bytes
Age:243815
Content-Length:371
Content-Type:text/css
Date:Thu, 13 Feb 2014 07:14:14 GMT
ETag:"a7ac8-173-4a66f8ada8500"
Last-Modified:Fri, 24 Jun 2011 06:45:08 GMT
Server:Apache
…

25
一方、HTTPレスポンスヘッダ
Accept-Ranges:bytes
Age:243815
ここだけで約20 byte
Content-Length:371
Content-Type:text/css
Date:Thu, 13 Feb 2014 07:14:14 GMT
ETag:"a7ac8-173-4a66f8ada8500"
Last-Modified:Fri, 24 Jun 2011 06:45:08 GMT
Server:Apache
…

25
一方、HTTPレスポンスヘッダ
Accept-Ranges:bytes
Age:243815
ここだけで約20 byte
Content-Length:371
Content-Type:text/css
Date:Thu, 13 Feb 2014 07:14:14 GMT
ETag:"a7ac8-173-4a66f8ada8500"
Last-Modified:Fri, 24 Jun 2011 06:45:08 GMT
Server:Apache
…

上記で約200 byte
(一般に数百 byteのオーダー)

25
HTTPとWebSocketの通信量

•

以下の仮定を置いて比較
•

HTTPはヘッダ長は200 byte

•

WebSocketはマスクあり(4 byteの
Masking-keyあり)

26
本文が10 byteの場合
•

HTTP
•

200(byte) + 10(byte) = 210(byte)

!

•

WebSocket
•

基本ペイロード長の範囲に収まる

•

6(byte) + 10(byte) = 16(byte)
27
本文が10 byteの場合
•

HTTP
•

200(byte) + 10(byte) = 210(byte)

!

•

WebSocket
•

基本ペイロード長の範囲に収まる

•

圧倒的な差

6(byte) + 10(byte) = 16(byte)
27
本文が1024 byteの場合
•

HTTP
•

200(byte) + 1024(byte) = 1224(byte)

!

•

WebSocket
•

拡張ペイロード長で+2 byte

•

8(byte) + 1024(byte) = 1032(byte)
28
本文が1024 byteの場合
•

HTTP
•

200(byte) + 1024(byte) = 1224(byte)

!

•

WebSocket

これでも差が大きい

•

拡張ペイロード長で+2 byte

•

8(byte) + 1024(byte) = 1032(byte)
28
通信量はWebSocketが有利

•

本文が小さいほどHTTPとの差が顕著

•

小さいメッセージを頻繁にやり取りす
るケースで、WebSocketは特に有利

29
話は変わって
Webの世界のサーバPUSH

30
PUSH方式の変遷

31
PUSH方式の変遷
ポーリング

31
PUSH方式の変遷
ポーリング
Comet(※)

※ Comet: Ajax+ロングポーリングによるサーバPUSHの総称

31
PUSH方式の変遷
ポーリング
Comet(※)
Server Sent Events
※ Comet: Ajax+ロングポーリングによるサーバPUSHの総称

31
PUSH方式の変遷
ポーリング
Comet(※)
Server Sent Events

WebSocket

※ Comet: Ajax+ロングポーリングによるサーバPUSHの総称

31
ポーリングによるPUSH
•

クライアント契機でHTMLやXML/jsonを取得

•

疑似PUSH
クライアント

Ajax

サーバ

HTTPリクエスト

HTTPレスポンス
32
ポーリングによるPUSH
•

クライアント契機でHTMLやXML/jsonを取得

•

疑似PUSH
クライアント

Ajax

サーバ

HTTPリクエスト

HTTPレスポンス
32
ポーリングによるPUSH
•

クライアント契機でHTMLやXML/jsonを取得

•

疑似PUSH
クライアント

Ajax

サーバ

HTTPリクエスト

HTTPレスポンス
32
ポーリングによるPUSH
•

クライアント契機でHTMLやXML/jsonを取得

•

疑似PUSH

Ajax

画面を更新
クライアント

サーバ

HTTPリクエスト

HTTPレスポンス
32
ポーリングによるPUSH
•

クライアント契機でHTMLやXML/jsonを取得

•

疑似PUSH

Ajax

画面を更新
クライアント

サーバ

…

HTTPリクエスト

HTTPレスポンス
32
CometによるPUSH
•

サーバ契機でHTMLやXML/jsonを取得

•

サーバからの即応性が改善された擬似PUSH
クライアント

サーバ

HTTPリクエスト

HTTPレスポンス
33
CometによるPUSH
•

サーバ契機でHTMLやXML/jsonを取得

•

サーバからの即応性が改善された擬似PUSH
クライアント

サーバ

HTTPリクエスト

HTTPレスポンス
33
CometによるPUSH
•

サーバ契機でHTMLやXML/jsonを取得

•

サーバからの即応性が改善された擬似PUSH
クライアント

データ発生まで
レスポンスを保留
サーバ

HTTPリクエスト

HTTPレスポンス
33
CometによるPUSH
•

サーバ契機でHTMLやXML/jsonを取得

•

サーバからの即応性が改善された擬似PUSH
クライアント

データ発生まで
レスポンスを保留
サーバ

HTTPリクエスト

HTTPレスポンス
33
CometによるPUSH
•

サーバ契機でHTMLやXML/jsonを取得

•

サーバからの即応性が改善された擬似PUSH
画面を更新
クライアント

データ発生まで
レスポンスを保留
サーバ

HTTPリクエスト

HTTPレスポンス
33
CometによるPUSH
•

サーバ契機でHTMLやXML/jsonを取得

•

サーバからの即応性が改善された擬似PUSH
画面を更新
クライアント

データ発生まで
レスポンスを保留
サーバ

次のPUSH用の
リクエストを投げる
HTTPリクエスト

HTTPレスポンス
33
CometによるPUSH
•

サーバ契機でHTMLやXML/jsonを取得

•

サーバからの即応性が改善された擬似PUSH
画面を更新
クライアント

データ発生まで
レスポンスを保留
サーバ

次のPUSH用の
リクエストを投げる
HTTPリクエスト

HTTPレスポンス
33
CometによるPUSH
•

サーバ契機でHTMLやXML/jsonを取得

•

サーバからの即応性が改善された擬似PUSH
画面を更新
クライアント

データ発生まで
レスポンスを保留
サーバ

次のPUSH用の
リクエストを投げる
HTTPリクエスト

HTTPレスポンス
33
CometによるPUSH
•

サーバ契機でHTMLやXML/jsonを取得

•

サーバからの即応性が改善された擬似PUSH
画面を更新
クライアント

次のPUSH用の
リクエストを投げる

データ発生まで
レスポンスを保留
サーバ

この辺でデータが
発生するとラグ
HTTPリクエスト

HTTPレスポンス
33
Server Sent Eventsによる
PUSH
•

Cometを洗練させたWeb標準(W3C CR)

•

本格的なPUSH
クライアント

サーバ

HTTPリクエスト

HTTPレスポンス
34
Server Sent Eventsによる
PUSH
•

Cometを洗練させたWeb標準(W3C CR)

•

本格的なPUSH
クライアント

サーバ

HTTPリクエスト

HTTPレスポンス
34
Server Sent Eventsによる
PUSH
•

Cometを洗練させたWeb標準(W3C CR)

•

本格的なPUSH
クライアント

データ発生のたびに
送信する
サーバ

HTTPリクエスト

HTTPレスポンス
34
Server Sent Eventsによる
PUSH
•

Cometを洗練させたWeb標準(W3C CR)

•

本格的なPUSH

データ発生のたびに
送信する

クライアント

サーバ
分割(chunked)データ扱い

HTTPリクエスト

HTTPレスポンス
34
Server Sent Eventsによる
PUSH
•

Cometを洗練させたWeb標準(W3C CR)

•

本格的なPUSH

データ発生のたびに
送信する

画面を更新
クライアント

サーバ
分割(chunked)データ扱い

HTTPリクエスト

HTTPレスポンス
34
Server Sent Eventsによる
PUSH
•

Cometを洗練させたWeb標準(W3C CR)

•

本格的なPUSH

データ発生のたびに
送信する

画面を更新
クライアント

サーバ
分割(chunked)データ扱い
クローズしていないのでさらに送れる

HTTPリクエスト

HTTPレスポンス
34
Server Sent Eventsによる
PUSH
•

Cometを洗練させたWeb標準(W3C CR)

•

本格的なPUSH

データ発生のたびに
送信する

画面を更新
クライアント

サーバ
分割(chunked)データ扱い
クローズしていないのでさらに送れる

HTTPリクエスト

HTTPレスポンス
34
WebSocketによるPUSH
•

HTTPの縛りを外して作られたWeb標準

•

本格的なPUSH
サーバ

WebSocket

メッセージ
35
WebSocketによるPUSH
•

HTTPの縛りを外して作られたWeb標準

•

本格的なPUSH
サーバ

WebSocket

メッセージ
35
WebSocketによるPUSH
•

HTTPの縛りを外して作られたWeb標準

•

本格的なPUSH

データ発生のたびに
送信する
サーバ

WebSocket

メッセージ
35
WebSocketによるPUSH
•

HTTPの縛りを外して作られたWeb標準

•

本格的なPUSH
画面を更新

データ発生のたびに
送信する
サーバ

WebSocket

メッセージ
35
WebSocketによるPUSH
•

HTTPの縛りを外して作られたWeb標準

•

本格的なPUSH
画面を更新

データ発生のたびに
送信する
サーバ

WebSocket

メッセージ
35
PUSH方式まとめ
ポーリング
Comet
Server Sent Events

WebSocket
36
PUSH方式まとめ
ポーリング

旧

Comet
Server Sent Events

WebSocket 新
36
PUSH方式まとめ
ポーリング
HTTPの拡張で進化

旧

Comet

Server Sent Events

WebSocket 新
36
PUSH方式まとめ
ポーリング
HTTPの拡張で進化

Comet

Server Sent Events

旧

突然変異

WebSocket 新
36
ブラウザのWeb Socket API
対応状況
ブラウザ名

対応状況

Internet Explorer

10以降

Chrome

13以降

Firefox

11以降

Opera

12.10以降

iOS (UIWebView)

6.0以降

iOS (Safari Mobile)

同上

Android (WebView)

4.4

Android (Chrome)

18以降

•

PCの現行ブラウザは基本的に使用可能(但しIE9以下は )

•

モバイルはAndroidのWebView(アプリ組み込み用エンジン)が難

•

なおWebSocketクライアントが必ずしもブラウザである必要はない
37
WebSocketのまとめ
•

Webでソケット通信的なことを行うための規格

•

WebSocketプロトコルとWebSocket APIから
成る

•

通信量はHTTPで同内容を送るより少ない

•

双方向通信に向いている

•

モダンブラウザの多くで対応済み
•

但しAndroidのWebViewは未
38
続いてWebRTC

39
お話しすること
•

概要

•

標準化状況

•

音声・映像通信までの流れ

•

PeerConnectionの課題

•

WebRTCの利用事例

•

ブラウザの対応状況
40
お話ししないこと
•

MediaCaptureの利用事例
•

MediaCaptureはカメラやマイクの入力をキャ
プチャするための仕様

•

MediaCaptureと別のメディア操作用APIを
組み合わせることでいろいろ応用できる

41
概要
•

RTC=Real-Time Communication

•

音声/ビデオチャット、データ通信を
使ったリアルタイムコミュニケーショ
ン

•

WebRTCは単一の規格でなく、Web
でRTCを行うための仕様群
42
表現を変えると
•

Web標準でSkype等の機能を実現する
ための仕様群
•

OS毎にネイティブアプリを作らずに

•

Flashやブラウザプラグインを使わずに

43
WebRTCの標準化状況
•

WebRTC (@W3C)
•
•

PeerConnectionとDataChannel、DTMFなども

•

•

Working Draft

http://www.w3.org/TR/webrtc/

Media Capture and Streams(@W3C)
•
•

ブラウザから動画(カメラ)や音声(マイク)へアクセスするための仕様

•

•

Working Draft

http://www.w3.org/TR/mediacapture-streams/

RTCWEB(@IETF)
•

draft

•

プロトコルやコーデックの取り決め等々

•

https://tools.ietf.org/wg/rtcweb/ 以下の各ドラフト
44
WebRTCの利用例

Dialogicのサイトより引用
https://www.dialogic.com/ja/landing/webrtc.aspx

•

1対1のビデオチャット

•

画面共有、ファイル共有

•

コンタクトセンタ

•

グループチャット

•

他のコミュニケーション規格(SIP、PSTN、…)と相互接続
45
WebRTCの利用例

Dialogicのサイトより引用
https://www.dialogic.com/ja/landing/webrtc.aspx

•

1対1のビデオチャット

•

画面共有、ファイル共有

•

コンタクトセンタ

•

グループチャット

•

他のコミュニケーション規格(SIP、PSTN、…)と相互接続

この辺からハードルが高い
45
WebRTCを構成する仕様
• PeerConnection
• DataChannel
• MediaStream

46
PeerConnection

•

クライアント同士をP2Pで接続するた
めの仕様

•

下位層はUDP

47
DataChannel
•

任意のデータをPeerConnection経由
で送るための仕様

•

テキストメッセージとか写真とか資料
とか、使い方は自由

48
MediaCapture
•

正確にはWebRTCの一部ではない
•

Specificationも別

•

ブラウザからマイクやカメラへアクセスする
ための仕様

•

MeiaCaptureで取得したStreamを
PeerConnection経由で通信相手とやり取り

•

単独で使える
49
PeerConnectionの流れ

50
一般的な流れ
Webアプリケーションサーバ
• Webアプリ
• シグナリング機能

クライアントB

クライアントA
STUNサーバ

51
一般的な流れ
Webアプリケーションサーバ
• Webアプリ
• シグナリング機能

クライアントB

クライアントA
STUNサーバ
①クライアントはSTUNサー
バで自身のグローバルIP/Port
を確認
51
一般的な流れ
②クライアントは自分の
IP/Portやアプリ用情報を
添えて接続要求を送信

Webアプリケーションサーバ
• Webアプリ
• シグナリング機能

クライアントB

クライアントA
STUNサーバ
①クライアントはSTUNサー
バで自身のグローバルIP/Port
を確認
51
一般的な流れ
②クライアントは自分の
IP/Portやアプリ用情報を
添えて接続要求を送信

Webアプリケーションサーバ
• Webアプリ
• シグナリング機能

クライアントB
③繋ぎたい相手のIP/Portを
シグナリング機能で確認して
接続
クライアントA
STUNサーバ
①クライアントはSTUNサー
バで自身のグローバルIP/Port
を確認
51
STUN
•

STUN=Simple Traversal of UDP
through NAT

•

またの名をUDPホールパンチング

•

NATの内側にあるノードからグローバ
ルのIP/Port(トランスポートアドレ
ス)を確認して「穴」を開ける仕組み
52
前述の流れで繋がらないケース
Webアプリケーションサーバ

クライアントB

クライアントA
STUNサーバ

53
前述の流れで繋がらないケース
Webアプリケーションサーバ

ルータのNAT機能やファイアウォールに
ガードされて、外から中に入れない
 →シンメトリックNATの可能性

クライアントB

クライアントA
STUNサーバ

53
「シンメトリックNAT」
以外のNAT
•

NATの内側のノードが外へアクセスする時、NAT
は内側と外側のIP/Port同士をマッピングする
•

リクエストを投げると、外からレスポンスが帰ってこれ
る

•

かつ任意のアドレスから「マッピング済みのIP/
Port」へアクセスするとクライアントへ転送して
くれる

•

なのでSTUNサーバから取得したIP/Portを使って、
第三者であるクライアントBがAへ接続できる
54
一般的な流れ(改)
Webアプリケーションサーバ

STUNサーバで確認した
IP/Port

クライアントB

クライアントA
STUNサーバ

55
一般的な流れ(改)
Webアプリケーションサーバ

STUNサーバで確認した
IP/Port
STUNサーバから見えるIP/Portは第三
者も使える
 →同じIP/PortでBもアクセスできる

クライアントB

クライアントA
STUNサーバ

55
シンメトリックNAT
•

「内側から外へアクセスした時の相手
先からのアクセス」のみポートマッピ
ングが有効
•

•

それ以外は遮断される

STUNサーバでないクライアントBは、
STUNサーバ向けに開けられたIP/Port
を使ってもAへ接続できない
56
シンメトリックNATでの流れ
Webアプリケーションサーバ

STUNサーバで確認した
IP/Port

クライアントB

クライアントA
STUNサーバ

57
シンメトリックNATでの流れ
Webアプリケーションサーバ

STUNサーバで確認した
IP/Port STUNサーバから見えるIP/PortはSTUN

クライアントB

サーバ専用
 →Bからはアクセスできない
クライアントA
STUNサーバ

57
シンメトリックNAT vs TURN
Webアプリケーションサーバ

TURNサーバ向けの
IP/Port

クライアントB

クライアントA

58
シンメトリックNAT vs TURN
Webアプリケーションサーバ

TURNサーバ向けの
IP/Port

クライアントB

TURNサーバ
クライアントA

TURNサーバ経由でAとBを接続

58
シンメトリックNAT vs TURN
Webアプリケーションサーバ

TURNサーバ向けの
IP/Port

クライアントB

TURNサーバ
クライアントA

TURNサーバ経由でAとBを接続
TURNサーバからの接続なので通れる=勝利

58
TURN
•

Traversal Using Relay NAT

•

NATの内側にあるノードに対して透過
的な経路(トンネル)を提供する

•

すべての通信をパススルーするので、
ノードが増えるほどTURNサーバの帯
域が消費される
•

STUNサーバに比べて運用コストが高い
59
ICE
•

Interactive Connectivity Establishment

•

常にSTUNを使うとシンメトリックNAT
の時に到達できない

•

常にTURNを使うとコストが高い

•

ICEは、STUNが使えない時だけTURNへ
フォールバックする
•

WebRTCのPeerConnectionはICEに対応
60
PeerConnectionのまとめ

ネットワーク周りの
ハードルが高い
普通のWeb APIと勝手が違うポイント
61
ここでスライドを振り返る
②クライアントは自分の
IP/Portやアプリ用情報を
添えて接続要求を送信

Webアプリケーションサーバ
• Webアプリ
• シグナリング機能

クライアントB
③繋ぎたい相手のIP/Portを
シグナリング機能で確認して
接続
クライアントA
STUNサーバ
①クライアントはSTUNサー
バで自身のグローバルIP/Port
を確認
62
ここでスライドを振り返る
②クライアントは自分の
IP/Portやアプリ用情報を
添えて接続要求を送信

Webアプリケーションサーバ
• Webアプリ
• シグナリング機能

クライアントB
③繋ぎたい相手のIP/Portを
シグナリング機能で確認して
接続

ここにWebSocketを
使うことが多い

クライアントA

STUNサーバ
①クライアントはSTUNサー
バで自身のグローバルIP/Port
を確認
62
WebRTCとWebSocket
•

WebRTCはシグナリングが必要だが、シグナリ
ングの手段は任意(仕様外)

•

WebSocketはリアルタイムPUSHに向いている

•

WebRTCに対応しているブラウザはWebSocket
にも対応している

63
WebRTCとWebSocket
•

WebRTCはシグナリングが必要だが、シグナリ
ングの手段は任意(仕様外)

•

WebSocketはリアルタイムPUSHに向いている

•

WebRTCに対応しているブラウザはWebSocket
にも対応している

ということでWebSocketが使われる
63
WebRTCの利用事例
•

PeerConnection周りを肩代わりするサービス
•
•

•

PeerJS
SkyWay

WebRTCを使ったコミュニケーションプラット
フォーム
•

•

OpenTok(TokBox)

WebRTCとSIP等を相互接続する製品
•

PowerMedia XMS(Dialogic社)
64
PeerJS
•

http://peerjs.com/

•

OSS(MIT License)

•

クライアント用ライブラリ(WebRTCのラッパ)
の提供

•

対になるサーバの提供(クラウドサービス)
!

•

通信周りの実装が簡単に

•

ブラウザ間の実装差を吸収
65
SkyWay
•

http://nttcom.github.io/skyway/

•

NTTコミュニケーションズが提供

•

PeerJSベース

•

APIキー(Webアプリ)毎のアクティ
ブ接続状況を確認する機能
66
字幕付きボイスチャット
•

SkyWayのデモアプリの一つ

•

Web Speech API(※)を組み合わせて、声をテキスト
化して画面に表示
※ Chromeに実装されている、音声認識のAPI

67
字幕付きボイスチャット
•

SkyWayのデモアプリの一つ

•

Web Speech API(※)を組み合わせて、声をテキスト
化して画面に表示
※ Chromeに実装されている、音声認識のAPI

音声チャットの内容がその場でテ
キスト化されて画面に表示される

67
OpenTok
•

http://tokbox.com/opentok

•

TokBox社

•

多者間通話

•

録画
•

WebRTC単体ではP2P=1対1、多者間通話の実現
はWebアプリ開発者による作り込みが必要

•

TokBoxはプラットフォーム機能として提供、簡単
に機能を組み込めるように
68
PowerMedia XMS
•

https://www.dialogic.com/ja/products/
media-server-software/xms.aspx

•

Dialogic社

•

メディアサーバ
•

WebRTCと別のメディア(SIP等)を相互接続
•

•

ラッパライブラリによるWebRTC接続とUI部品

音声/動画コーデックを相互変換
69
PowerMedia XMS
XMS Highlights:

•

既存オペレーターサービスのWebRTCへの置換

•

ユーザーはスマホから電話発信及び受信

•

オペレーションコストの削減

•

Dialogic JS APIを利用してApp. Serverと接続

•

WebRTC JS APIの簡便さ

•

SIP/WebRTCのインターワーキング

•

WebRTC通話

•

Application
Server

Web Portal

SIP
Media Ctrl

Signaling over
WebSocket

Dialogic
WebRTC JS API

IP/PSTN
Network

RTP

PowerMedia XMS

SRTP

Agent

SIPクライアントとWebRTCクライアントを相互接続
音声/動画コーデックを変換
http://ngw.ntt-at.co.jp/product/media/products/PowerMedia_XMS.html

70
ブラウザのWebRTC対応状況
ブラウザ名

PeerConnection DataChannel MediaStream

Internet Explorer

同左

同左

Chrome

○/prefixed(※)

同左

同左

Firefox

○/prefixed(※)

同左

同左

Opera

○/prefixed(※)

同左

同左

iOS (UIWebView)

同左

同左

iOS (Mobile Safari)

同左

同左

Android (WebView)

同左

同左

同左

同左

Android (Chrome) ○/prefixed(※)
•

Chrome、Firefox、Operaが対応

•

APIが流動的なため、各ブラウザともベンダプレフィックス付き

•

2014/02/24現在

実装が過渡的なため、本資料ではバージョン番号を明記しない
71
WebRTCの問題
•

仕様が流動的
•

ブラウザ間、あるいは同一ブラウザでもバージョンによっ
て実装に差異がある

•

当面はPeerJS等のライブラリに依存せざるを得ない
•

Webアプリ開発者が個別に対応するのは辛い

•

IE(Microsoft)とSafari(Apple)が未対応

•

国内ではあまり活発でない
•

日本はテレビ電話/ビデオチャットを使う文化が弱い…ら
しい
72
NTTアドバンステクノロジ株式会社 情報機器テクノロジセンタ
〒212-0014 神奈川県川崎市幸区大宮町1310 ミューザ川崎セントラルタワー
TEL : 044-589-6094 FAX : 044-541-1381
http://www.ntt-at.co.jp/

More Related Content

What's hot

例外設計における大罪
例外設計における大罪例外設計における大罪
例外設計における大罪
Takuto Wada
 
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
 
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
NGINX, Inc.
 
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
infinite_loop
 
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjugフロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
 
ストリーム処理を支えるキューイングシステムの選び方
ストリーム処理を支えるキューイングシステムの選び方ストリーム処理を支えるキューイングシステムの選び方
ストリーム処理を支えるキューイングシステムの選び方
Yoshiyasu SAEKI
 
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~ CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
SEGADevTech
 
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
Taku Miyakawa
 
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計
sairoutine
 
Docker Compose 徹底解説
Docker Compose 徹底解説Docker Compose 徹底解説
Docker Compose 徹底解説
Masahito Zembutsu
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
 
NGINXをBFF (Backend for Frontend)として利用した話
NGINXをBFF (Backend for Frontend)として利用した話NGINXをBFF (Backend for Frontend)として利用した話
NGINXをBFF (Backend for Frontend)として利用した話
Hitachi, Ltd. OSS Solution Center.
 
インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方
Shohei Koyama
 
日本語テストメソッドについて
日本語テストメソッドについて日本語テストメソッドについて
日本語テストメソッドについてkumake
 
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
 
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
 
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
Gosuke Miyashita
 
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
NTT DATA Technology & Innovation
 
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
 

What's hot (20)

例外設計における大罪
例外設計における大罪例外設計における大罪
例外設計における大罪
 
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
 
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
 
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
 
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjugフロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
 
ストリーム処理を支えるキューイングシステムの選び方
ストリーム処理を支えるキューイングシステムの選び方ストリーム処理を支えるキューイングシステムの選び方
ストリーム処理を支えるキューイングシステムの選び方
 
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~ CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
 
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
 
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計
 
Docker Compose 徹底解説
Docker Compose 徹底解説Docker Compose 徹底解説
Docker Compose 徹底解説
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
 
NGINXをBFF (Backend for Frontend)として利用した話
NGINXをBFF (Backend for Frontend)として利用した話NGINXをBFF (Backend for Frontend)として利用した話
NGINXをBFF (Backend for Frontend)として利用した話
 
インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方
 
日本語テストメソッドについて
日本語テストメソッドについて日本語テストメソッドについて
日本語テストメソッドについて
 
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
 
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
 
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
 
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
 
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
 

Similar to WebSocket / WebRTCの技術紹介

サーバPUSHざっくりまとめ
サーバPUSHざっくりまとめサーバPUSHざっくりまとめ
サーバPUSHざっくりまとめ
Yasuhiro Mawarimichi
 
RESTful Webサービス
RESTful WebサービスRESTful Webサービス
RESTful Webサービス
Kentaro Inomata
 
HTTP入門
HTTP入門HTTP入門
HTTP入門
Sho A
 
再入門、サーバープッシュ技術
再入門、サーバープッシュ技術再入門、サーバープッシュ技術
再入門、サーバープッシュ技術
Shin Sekaryo
 
Janogia20120921 yoshinotakeshi
Janogia20120921 yoshinotakeshiJanogia20120921 yoshinotakeshi
Janogia20120921 yoshinotakeshiKeisuke Ishibashi
 
REST APIに入門する。
REST APIに入門する。REST APIに入門する。
REST APIに入門する。
Kazushi Kawamura
 
5分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.015分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.01
西畑 一馬
 
websocket-survery
websocket-surverywebsocket-survery
websocket-survery
hogemaru_
 
WebAppDev勉強会 #1 at cafe? IKAGAWA DO
WebAppDev勉強会 #1 at cafe? IKAGAWA DOWebAppDev勉強会 #1 at cafe? IKAGAWA DO
WebAppDev勉強会 #1 at cafe? IKAGAWA DOKohei Noda
 
WebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocketWebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocket
Yu Nobuoka
 
いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21
いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21
いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21
Takakiyo Tanaka
 
Web基礎
Web基礎Web基礎
Web基礎
stx_kata
 
20110622 haruyama webso]cket
20110622 haruyama webso]cket20110622 haruyama webso]cket
20110622 haruyama webso]cket
Makoto Haruyama
 
これから利用拡大?WebSocket
これから利用拡大?WebSocketこれから利用拡大?WebSocket
これから利用拡大?WebSocket
AdvancedTechNight
 
Rust で簡易 HTTP サーバーを作ってみよう
Rust で簡易 HTTP サーバーを作ってみようRust で簡易 HTTP サーバーを作ってみよう
Rust で簡易 HTTP サーバーを作ってみよう
Yuki Toyoda ✲
 
HTTPを理解する
HTTPを理解するHTTPを理解する
HTTPを理解する
IIJ
 
Lesson01
Lesson01Lesson01
Lesson01MRI
 
Java8でhttpサーバを実装してみた
Java8でhttpサーバを実装してみたJava8でhttpサーバを実装してみた
Java8でhttpサーバを実装してみた
夕人 江熊
 
Web Environments
Web EnvironmentsWeb Environments
Web Environments
nasa9084
 
[BurpSuiteJapan]HTTP基礎入門
[BurpSuiteJapan]HTTP基礎入門[BurpSuiteJapan]HTTP基礎入門
[BurpSuiteJapan]HTTP基礎入門
Burp Suite Japan User Group
 

Similar to WebSocket / WebRTCの技術紹介 (20)

サーバPUSHざっくりまとめ
サーバPUSHざっくりまとめサーバPUSHざっくりまとめ
サーバPUSHざっくりまとめ
 
RESTful Webサービス
RESTful WebサービスRESTful Webサービス
RESTful Webサービス
 
HTTP入門
HTTP入門HTTP入門
HTTP入門
 
再入門、サーバープッシュ技術
再入門、サーバープッシュ技術再入門、サーバープッシュ技術
再入門、サーバープッシュ技術
 
Janogia20120921 yoshinotakeshi
Janogia20120921 yoshinotakeshiJanogia20120921 yoshinotakeshi
Janogia20120921 yoshinotakeshi
 
REST APIに入門する。
REST APIに入門する。REST APIに入門する。
REST APIに入門する。
 
5分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.015分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.01
 
websocket-survery
websocket-surverywebsocket-survery
websocket-survery
 
WebAppDev勉強会 #1 at cafe? IKAGAWA DO
WebAppDev勉強会 #1 at cafe? IKAGAWA DOWebAppDev勉強会 #1 at cafe? IKAGAWA DO
WebAppDev勉強会 #1 at cafe? IKAGAWA DO
 
WebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocketWebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocket
 
いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21
いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21
いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21
 
Web基礎
Web基礎Web基礎
Web基礎
 
20110622 haruyama webso]cket
20110622 haruyama webso]cket20110622 haruyama webso]cket
20110622 haruyama webso]cket
 
これから利用拡大?WebSocket
これから利用拡大?WebSocketこれから利用拡大?WebSocket
これから利用拡大?WebSocket
 
Rust で簡易 HTTP サーバーを作ってみよう
Rust で簡易 HTTP サーバーを作ってみようRust で簡易 HTTP サーバーを作ってみよう
Rust で簡易 HTTP サーバーを作ってみよう
 
HTTPを理解する
HTTPを理解するHTTPを理解する
HTTPを理解する
 
Lesson01
Lesson01Lesson01
Lesson01
 
Java8でhttpサーバを実装してみた
Java8でhttpサーバを実装してみたJava8でhttpサーバを実装してみた
Java8でhttpサーバを実装してみた
 
Web Environments
Web EnvironmentsWeb Environments
Web Environments
 
[BurpSuiteJapan]HTTP基礎入門
[BurpSuiteJapan]HTTP基礎入門[BurpSuiteJapan]HTTP基礎入門
[BurpSuiteJapan]HTTP基礎入門
 

Recently uploaded

無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
Yuki Miyazaki
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
osamut
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
sugiuralab
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
azuma satoshi
 

Recently uploaded (9)

無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
 

WebSocket / WebRTCの技術紹介