Feb. 9th: Updated to the latest version (used in actual session) 2015年2月6日 WebRTC Conference Japanセッション 「DataChannelの活用方法とその可能性」の資料の最新版です。 転載の場合は弊社名もどこかに記載しておいて頂ければ幸いです。 Mist Technologies, Inc. CEO/Founder 田中 晋太朗 If someone want this to be translated in English, please leave a comment for me.

1. 1
WebRTC Conference Japan
WebRTC DataChannelの活⽤用⽅方法とその可能性
2015/2/6 13:00-13:20 @ソラシティカンファレンスセンター
Mist Technologies 株式会社 CEO/Founder
⽥田中 晋太朗（たなか しんたろう / Shintaro Tanaka）
Twitter: @qpSHiNqp

2. 2
⽥田中 晋太朗（たなか しんたろう） @qpSHiNqp
• Mist Technologies株式会社 代表
→ http://www.mist-t.co.jp/
• MistCDNというP2P型CDNを作っています
⾃自⼰己紹介

3. 3
• WebRTC DataChannelのおさらい
• ひねりのある使い⽅方事例例紹介
+使⽤用上の注意など
今⽇日のお題

4. 4
WebRTC DataChannelのおさらい

5. 5
• サーバを介さずに「テキスト」や「バイナリデータ」を送受信
• → P2P
• 低レイテンシ, サーバの仕事の削減などのメリット
• ArrayBuffer, ArrayBufferView, Blob, Stringを送れる（send）
概要
WebRTC DataChannelのおさらい
var peerConnection = new RTCPeerConnection();!
var dataChannel =!
peerConnection.createDataChannel(“hogehoge”, dcOptions);!
// dcOptionsでSCTPなどのconfig!
dataChannel.onmesage = function(evt) {!
console.log(evt.data);!
};!
// 注) createDataChannelしたあとでcreateOffer/Answerしないといけない!
dataChannel.send(“This is a test message.”); // 送る

6. 6
※1 SCTPの動作設定
createDataChannelの第2引数で
“maxRetransmitTime”も
“maxRetransmits”も指定しなけれ
ばReliableモード (TCP的)
DataChannel 直接コードから触る部分
SCTP
TCPとUDPの良良いとこ取り
→ Configurable※1
DTLS Payloadの暗号化などを⾏行行う
UDP
上位SCTPで柔軟なTransport
機能を与えるためUDPを利利⽤用
IPなど下層
プロトコルスタック
WebRTC DataChannelのおさらい
var dcOptions = {!
ordered: false,!
maxRetransmitTime: 3000,!
maxRetransmits: 5!
};!
var dc =!
pc.createDataChannel(!
“foo”, dcOptions);

7. 7
チャット? 他にもいろいろあるでしょう！
ひねりのある使い⽅方事例例紹介

8. 8
• DHT (分散ハッシュテーブル) の
⼀一種 ”Chord”をWebRTCで実装
• WebRTCノードで円形の
オーバーレイトポロジを形成し
key:valueを分散保持
• DataChannelでinsert / retrieveメッ
セージをやり取り
• ユーザ端末が協調しKVS機能を
提供できる
Ø DBについてもサーバ依存を減らせる
よりscalableなPure-P2Pに近づく
(シグナリングサーバは必要だけど)
webrtc-chord
事例例1: DHT » https://github.com/tsujio/webrtc-chord
画像は http://ntsujio.hatenablog.com/entry/2014/07/03/221023 から転載

9. 9
• P2Pでファイルを送りつけられる
• File APIでファイルを読み、ArrayBufferなどでsend()している
• クラウドストレージにはupしたくないけど、メールは添付容量量を
超えてしまう… などの場合に
• 類似サービス
• Sharefest
https://www.sharefest.me
• ShareDrop
http://sharedrop.io
WebDrop
事例例2: ファイル共有 » http://wdrop.in

10. 10
ブラウザ String ArrayBuffer Blob
ArrayBuffer
View
バイナリの
onmessage
での扱い1
Chrome
40.0
OK
OK
(⻑⾧長さ制限)
✕
(Error)
OK ArrayBuffer
Opera
24.0
OK
OK
(⻑⾧長さ制限)
✕
(Error)
OK ArrayBuffer
Firefox
34.0
OK OK OK OK Blob
送信するデータ型の対応状況 - データ送受信の注意点（１）
事例例2: ファイル共有
1. 例例えばChromeなら、BlobでsendしてもonmessageではArrayBufferに変換されて出てくる
BinaryPackなどを使ってオブジェクトをpackし、
適宜Blob→ArrayBuffer変換しながら基本的にArrayBufferで扱うと良良さげ

11. 11
• 現状、ブラウザにより送信できるバイナリ型の⻑⾧長さ上限がある
1. UDPデータグラム⻑⾧長さの制限
→ Buffering & Chunkで回避可能
2. SDPによるアプリケーション利利⽤用帯域の制限 (Chrome)
→ SDPの改変による悪あがき1で多少の対処 (b=AS:1638400を付与するなど)
送信できるバイナリ⻑⾧長の制限 - データ送受信の注意点（２）
事例例2: ファイル共有
1. https://bloggeek.me/send-file-webrtc-data-api/
2. UDPペイロードの最⼤大は65515だったはずなので、何かおかしい気もする
ブラウザ バイナリ⻑⾧長制限 (SCTPはreliableモード, localhost同⼠士で測定)
① Chrome → Chrome 上限256KBを超えると勝⼿手にDataChannelがcloseする
上限以下では⾃自動的に66528B2単位でchunkされる
② Firefox → Firefox 上限なし(?)
内部的にはchunkされるが, 呼ばれるonmessageは1回
③ Firefox → Chrome 上限なし; 16KB単位で⾃自動的にchunkされ
Chrome側ではchunk毎に複数回onmessageが呼ばれる
④ Chrome → Firefox ①に準ずる
Firefox側ではchunk毎に複数回onmessageが呼ばれる

12. 12
• DataChannelにより
近隣隣で同じWebサイトを⾒見見ている⼈人とWebリソースを共有
• CDN-edgeより
近い
• CDNトラフィック
流流量量抑制
MistCDN（１）
事例例3: P2P型CDN » http://www.mist-t.co.jp/
Webサーバ
ア ジ ア 地 域北北 ⽶米 地 域 従来CDN
サーバ
従来CDN
サーバ
ユーザ端末 ユーザ端末

13. 13
• メリット
• 既存CDNコスト削減
• コンテンツロード⾼高速化
• ネットワーク負荷軽減
など
• 類似サービス
PeerCDN, Peer5, Swarmify
StreamRoot, BemTV (動画配信)
MistCDN（２）
事例例3: P2P型CDN » http://www.mist-t.co.jp/

14. 14
• シグナリング, WebRTCセッション確⽴立立のオーバーヘッド
• シグナリングメッセージを⼯工夫して減らす
• ⼩小さいコンテンツはまとめて送るなど
• Peer選択
• 遠くのユーザ端末は選択しない
• 対応ブラウザ…
P2P型CDNの要所
事例例3: P2P型CDN

15. 15
• Pure P2Pに近いP2P利利⽤用アプリ
⾃自前サーバの仕事を最⼩小限に、スケーラブルなサービスを
• シグナリングはSkyWayなどのPaaSで
• メタなデータはwebrtc-chordによるDHTで保持
• コンテンツはユーザがキャッシュ/保持
• P2PCDNやWeb版Skype, サーバなしのUstreamのようなアプリケーション
• ブラウザをエージェントとしたグリッドコンピューティング基盤
• DataChannelによる通信で計算ネタを配布、並列列計算
• Webページを開いておくだけで参加
• ノード数集めるのが⼤大変 → インセンティブ付与? 広告の代わり?
今後登場しそうなWebRTC応⽤用
Discussion

16. SlideShare: http://goo.gl/Xvv0JL
contact@mist-t.co.jp
[エンジニア募集中です]
スライド最新版公開中