Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DataChannelでIoTしてみた

WebRTC MeetUp Tokyo #8 のネタです。

  • Login to see the comments

  • Be the first to like this

DataChannelでIoTしてみた

  1. 1. DataChannelで IoTしてみた tonofo
  2. 2. 自己紹介 @tonofo 2年目になりました。 回路と組み込みを勉強したけど、就職してからはWebRTC…
  3. 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. 4. • MCUの話。 • MCUの話2 kurentoが動かなくてGStreamer触った • WebRTC Native Client Libraryの話。 • とりとめもない話 (Raspberry Piとか) 今思うと、ヘビーモードな話題ばかり。。。 そうだ!今度は、イージーモードでいこう。 MeetUpの参加者を減らしてしまうのでは。ふぇぇ:;(∩´﹏`∩);:
  5. 5. DataChannel • WebRTCでデータをやりとりする仕組み • テキストとバイナリをP2Pを使い相互通信できる
 レイテンシが低い
 サーバやネットワークに負荷がかからない • SCTPプロトコル
 到達保証や順序保証を設定できる
  6. 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. 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. 8. –tonofo “でも、僕はWebエンジニアじゃないから javascriptなんかわかんない”
  9. 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. 10. DataChannelでIoTといえば…
  11. 11. WebRT「ち∼ん」
  12. 12. 「ち∼ん」を超えるのは厳しい
  13. 13. 「ち∼ん」の良さ 1. 語呂 印象に残る。”WebRTちーん”→覚える 2. 内容 ちーんは時間を切るツール。自然に意識が向く 3. 視覚 動きの激しいUI、味のあるスライド 4. 実装 WebMIDI APIを使っている
  14. 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. 15. WebRTCでIoTするには (Native) • Native実装
 
  Native WebRTC Client <-- ClientのあらゆるIF --> Things
 
    メリット:スマホを利用すればウェアラブルとひも付きIoTの世界観に近い
   デメリット:Native実装がそもそも大変、プラットフォームごとになる • WebRTCをThingsに実装
 
    メリット:依存関係がなくThings単体で利用可能
   デメリット:泥沼(組み込みLinuxやAndroidでNative Client入れるかGWで変換する) 依存関係がなく実装の幅が広い Chromeのバージョンアップに悩まされない
  16. 16. Androidの会 秋葉原支部
  17. 17. 3月末、秋葉原の某居酒屋 独身男性4人で飲みつつ (Android + 電子回路) + メイド = 秋葉原 (IoT) + メイド(接触禁止) ワイヤレスジャパンで新ネタを披露したい
  18. 18. 「メイドさんの吐息を地球の裏側に転送しよう」
  19. 19. 吐息伝送システム ファン吐息 bluetoothbluetooth DataChannel センサ 吐息 映像・音声 Native Client
 Library Native Client
 Library
  20. 20. ITmediaさんが記事にしてくれました… http://www.itmedia.co.jp/mobile/ articles/1505/28/news115.html
  21. 21. まとめ 映像・音声に合わせて吐息をコミュニケーションするという新規性 映像・音声コミュニケーションの次へ 反省 吐息を名乗るには温度や湿気と甘さがたりない 会場で2.4GHz帯が飽和しデモできず死亡…

×