WebRTC MeetUp Tokyo #8 のネタです。

1. DataChannelで
IoTしてみた
tonofo

2. 自己紹介
@tonofo
2年目になりました。
回路と組み込みを勉強したけど、就職してからはWebRTC…

3. いつも通り
• OpenWebRTCが0.4でRaspberryPiに対応しそう
https://github.com/EricssonResearch/openwebrtc/issues/
172
• iOS H.264 HWエンコーダ対応作業が始まりました※
AndroidはもうH.264とVP9に対応しています
https://code.google.com/p/webrtc/issues/detail?id=4081
• え、ChromeもH.264対応くるの？
https://webrtc-codereview.appspot.com/54499005

4. • MCUの話。
• MCUの話2 kurentoが動かなくてGStreamer触った
• WebRTC Native Client Libraryの話。
• とりとめもない話 (Raspberry Piとか)
今思うと、ヘビーモードな話題ばかり。。。
そうだ！今度は、イージーモードでいこう。
MeetUpの参加者を減らしてしまうのでは。ふぇぇ:;(∩´﹏`∩);:

5. DataChannel
• WebRTCでデータをやりとりする仕組み
• テキストとバイナリをP2Pを使い相互通信できる
レイテンシが低い
サーバやネットワークに負荷がかからない
• SCTPプロトコル
到達保証や順序保証を設定できる

6. 作りかた(javascript)
var peerConnection = new RTCPeerConnection(config, pcConstraints);
peerConnection.ondatachannel = onDataChannelCallback; //DataChannlを受け取る関数
var rtcDataChannel;
function createOffer() { //投げる側 createOfferの前
rtcDataChannel = peerConnection.createDataChannel("rtcDataChannel", null);
rtcDataChannel.onmessage = onMessageCallback; //Messageを受け取る関数
peerConnection.createOffer(gotLocalDescription, gotError, offerConstraints);
};
function onDataChannelCallback(event) { //受ける側
rtcDataChannel = event.channel;
rtcDataChannel.onmessage = onMessageCallback;
}
すでに、映像・音声ができているなら簡単。
DataChannelは双方向なのでcreateDataChannelするのは投げ側のみ

7. 使い方(javascript)
function sendDataChannel(message) {
if (rtcDataChannel.readyState === 'open') { //開いてるか確認
rtcDataChannel.send(message); //開いてたら送る
}
};
function onMessageCallback(event) { //Messageを受け取る関数
console.log('Received Message’ + event.data);
};
function dispose() {
rtcDataChannel.close(); //受け手も送り手も閉じる
peerConnection.close();
peerConnection = null;
};
チャットぐらいであれば、この実装でいけるので簡単ですが、
バイトを送る場合やサイズが大きい場合は別の配慮が要るらしい…

8. –tonofo
“でも、僕はWebエンジニアじゃないから
javascriptなんかわかんない”

9. 参考リンク集
• W3C WebRTC 1.0
http://www.w3.org/TR/webrtc/
• Data channelの活用方法とその可能性
http://www.slideshare.net/shintarotanaka/data-
channel-webrtc-conference-japan-26
• WebRTC demos and samples
https://github.com/webrtc/samples#rtcdatachannel

10. DataChannelでIoTといえば…

11. WebRT「ち∼ん」

12. 「ち∼ん」を超えるのは厳しい

13. 「ち∼ん」の良さ
1. 語呂 印象に残る。”WebRTちーん”→覚える
2. 内容 ちーんは時間を切るツール。自然に意識が向く
3. 視覚 動きの激しいUI、味のあるスライド
4. 実装 WebMIDI APIを使っている

14. WebRTCでIoTするには (Chrome)
• WebMIDI API
Chrome(WebMIDI API) <-- MIDI Interface --> Things
メリット：最もシンプル、クロスプラットフォーム
デメリット：ThingsのほうをMIDIデバイスとして実装しなければならない
• Chrome Extension
Chrome(Chrome Extension) <-- USB or Serial --> Things
メリット：USBやSerialといった汎用デバイスが使える、クロスプラットフォーム
デメリット：Extensionのインストールが必要、USBの場合はドライバを作ることに…
Chromeが動けば動く→マルチプラットフォーム
Javascriptで実装が簡単

15. WebRTCでIoTするには (Native)
• Native実装
Native WebRTC Client <-- ClientのあらゆるIF --> Things
メリット：スマホを利用すればウェアラブルとひも付きIoTの世界観に近い
デメリット：Native実装がそもそも大変、プラットフォームごとになる
• WebRTCをThingsに実装
メリット：依存関係がなくThings単体で利用可能
デメリット：泥沼(組み込みLinuxやAndroidでNative Client入れるかGWで変換する)
依存関係がなく実装の幅が広い
Chromeのバージョンアップに悩まされない

16. Androidの会 秋葉原支部

17. 3月末、秋葉原の某居酒屋 独身男性4人で飲みつつ
(Android + 電子回路) + メイド = 秋葉原
(IoT) + メイド(接触禁止)
ワイヤレスジャパンで新ネタを披露したい

18. 「メイドさんの吐息を地球の裏側に転送しよう」

19. 吐息伝送システム
ファン吐息 bluetoothbluetooth
DataChannel
センサ 吐息
映像・音声
Native
Client
Library
Native
Client
Library

20. ITmediaさんが記事にしてくれました…
http://www.itmedia.co.jp/mobile/
articles/1505/28/news115.html

21. まとめ
映像・音声に合わせて吐息をコミュニケーションするという新規性
映像・音声コミュニケーションの次へ
反省
吐息を名乗るには温度や湿気と甘さがたりない
会場で2.4GHz帯が飽和しデモできず死亡…