Successfully reported this slideshow.

Node.js with WebRTC DataChannel

8

Share

Upcoming SlideShare
WebRTC meetup  Tokyo 1
WebRTC meetup Tokyo 1
Loading in …3
×
1 of 32
1 of 32

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Node.js with WebRTC DataChannel

  1. 1. Node.js with WebRTC DataChannel 東京Node学園祭2016 2016.11.12 がねこまさし @massie_g
  2. 2. 自己紹介 • 所属 – インフォコム(株)の調査研究チーム Web担当 • Node学園の過去の発表 – 東京Node学園祭2014 • Nodeで操るKurentoメディアサーバー • http://www.slideshare.net/mganeko/nodekurento – 東京Node学園祭2013 • WebRTCを始めよう • http://www.slideshare.net/mganeko/2013-web-rtcnode • Web記事 – HTML5Experts.jp WebRTC入門2016 • https://html5experts.jp/series/webrtc2016/
  3. 3. WebRTCとは • Web Real-Time Communication の略 • Webブラウザ上のリアルタイム通信の規格 – ビデオ/オーディオ … MediaStream – 任意のデータ … DataChannel • どこで使えるか? – PCブラウザ (Chrome, Firefox, もうすぐEdgeでも) – Androidブラウザ (Chrome, Firefox) – ネイティブアプリ (PC, Android, iOS, other) – Node.js 用モジュール
  4. 4. Node.jsでWebRTCを使う方法 • Node.js × ブラウザ – NW.js (node-webkit) … http://nwjs.io – Electron … http://electron.atom.io – どちらもデスクトップアプリケーション • 中にChromiumを丸ごと持っているようなもの • Node.js × libwebrtc – Chromiumの中から、WebRTCのライブラリのみ利用 – wrtc (node-webrtc) ... DataChannel のみ対応 • https://github.com/js-platform/node-webrtc – webrtc-native … DataChannel、MediaStream両対応 • https://github.com/vmolsa/webrtc-native
  5. 5. やりたいこと P2Pのデータ通信 Webブラウザ Node.jsのアプリ
  6. 6. Part 1 wrtc (node-webrtc)
  7. 7. インストール方法 • Mac OS X 10.10.x / 10.11.x のケース – npm install wrtc • Ubutnu 16でも同様 • npm install wrtc
  8. 8. 使い方(1) 読み込み var WebRTC = require('wrtc'); var RTCPeerConnection = WebRTC.RTCPeerConnection; var RTCIceCandidate= WebRTC.RTCIceCandidate; var RTCSessionDescription = WebRTC.RTCSessionDescription; var RTCDataChannel = WebRTC.RTCDataChannel;
  9. 9. 使い方(2) シグナリング • シグナリングとは – P2P通信をするために必要な情報を交換すること • 今日はシグナリングの処理は省略 – 通常シグナリングサーバーを介して行う • WebSocketが使われることが多い(Socket.IOも含む) • 今回は、Socket.IOを利用 • 参考 – WebRTCハンズオン 概要編 • http://qiita.com/massie_g/items/916694413353a3293f73 – WebRTC入門2016 • https://html5experts.jp/mganeko/19814/ • https://html5experts.jp/mganeko/20013/ • https://html5experts.jp/mganeko/20112/ 今回は手順は省略
  10. 10. シグナリングサーバーとの関係 P2Pのデータ通信 シグナリングサーバー Node.js + Socket.IO接続情報 (SDP) を交換 Node.jsのアプリ Socket.IOクライアント Webブラウザ
  11. 11. DataChannelを利用する(1) 始める側:ブラウザ var peer = new RTCPeerConnection(config); // P2P通信を始める前(シグナリング前)に、DataChannelを用意する var dataChannel = peer.createDataChannel('channelName', option); dataChannel.onopen = function () { // 接続時の処理 }; dataChannel.onmessage = function (evt) { // データ受信時の処理 var data = evt.data; }; dataChannel.onerror = function (error) { // エラー時の処理 }; dataChannel.onclose = function () { // 切断時の処理 dataChannel = null; };
  12. 12. DataChannelを利用する(2) 受ける側: Node.js var peer = new RTCPeerConnection(config); var dataChannel = null; peer.ondatachannel = function(event) { dataChannel = event.channel; // DataChannelを作るのではなく、渡されたものを使う dataChannel.onopen = function () { // 接続時の処理 }; dataChannel.onmessage = function (evt) { // データ受信時の処理 var data = evt.data; }; dataChannel.onerror = function (error) { // エラー時の処理 }; dataChannel.onclose = function () { // 切断時の処理 dataChannel = null; }; };
  13. 13. DataChannelを利用する(3) メッセージを送る: ブラウザ/Node.js • dataChannel.send( data ); – dataの型 • DOMString, Blob, ArrayBuffer, ArrayBufferView – dataChannelは双方向
  14. 14. Demo 1: Echoサーバー
  15. 15. Demo2:ターミナルソフト
  16. 16. ターミナルの全体の構成 Node.jsのアプリ側Webブラウザ側 pty.jsxterm.js DataChannelDataChannel on.('data, … ) send()onmessage() write()on.('data, … ) send() onmessage() write() ユーザー bash
  17. 17. ターミナルソフト Node.js側 • pty.js を利用 https://github.com/chjj/pty.js/ • インストール – npm install wrtc – npm install socket.io-client – npm install pty.js • 利用 var WebRTC = require('wrtc'); var IOClient = require('socket.io-client'); var pty = require('pty.js'); 参考
  18. 18. pty.jsでターミナルを準備 var ptyTerm; function setupTerminal(cols, rows) { ptyTerm = pty.spawn(process.platform === 'win32' ? 'cmd.exe' : 'bash', [], { name: 'xterm-color', cols: cols || 80, rows: rows || 24, cwd: process.env.PWD, env: process.env }); ptyTerm.on('data', function(data) { dataChannel.send(data); // ターミナルから来たデータをDataChannelに送る }); } 参考
  19. 19. DataChannel接続の処理 var dataChannel = null; peer.ondatachannel = function(event) { dataChannel = event.channel; // … 略 … dataChannel.onmessage = function (evt) { ptyTerm.write(evt.data); // ターミナルに送る }; // ターミナルを準備 setupTerminal(80, 25); }; 参考
  20. 20. ターミナルソフト ブラウザ側 • xterm.js を利用 https://github.com/sourcelair/xterm.js • 利用 <link rel="stylesheet" href="xterm.css" /> <!—CSS必須 --> <script src="xterm.js"></script> 参考
  21. 21. xterm.jsでターミナルの準備 var container = document.getElementById('containerDiv'); // <div> Var term = null; function prepareTerminal() { term = new Terminal({ cols: 80, rows: 24, convertEol: true, //useStyle: true, //screenKeys: true, cursorBlink: true }); term.on('data', function(data) { dataChannel.send(data); // ユーザの入力をデータチャネルに送る }); term.on('title', function(title) { document.title = title; }); term.open(container); // ターミナルのUIを生成 } 参考
  22. 22. xterm.jsで応答を表示 var dataChannel = peer.createDataChannel( 'channelName', dataOpt ); // … 省略 … dataChannel.onmessage = function (evt) { term.write(evt.data); // DataCannelで受け取ったデータをターミナルに表示 }; 参考
  23. 23. どうしてWebRTC DataChannelを使うの? • sshで良いんじゃない? … ブラウザで色々やりたい • WebSocketで良いんじゃない? – Node.js アプリが「外側」にあるときはOK – では、Node.jsアプリもNATの「内側」にある時は?? Node.jsのアプリ WebSocket「サーバー」 Web ブラウザ NAT Node.js アプリ Web ブラウザ NAT NAT
  24. 24. どうしてWebRTC DataChannelを使うの? • WebRTC DataChannel なら NAT越えの仕組みがある – STUNサーバー – UDP ホールパンチング • WiFiにプライバシーセパレーターがあっても通信可能 Node.js アプリ Web ブラウザ STUN サーバー 参考: • WebRTCハンズオン 概要編 - P2P通信行うまで(2-1):NAT越え https://goo.gl/FVYOkA • WebRTCの裏側にあるNATの話 - 答えの前にUDPホールパンチング https://goo.gl/P64kGX NAT NAT
  25. 25. どうしてWebRTC DataChannelを使うの? • WebRTC DataChannel なら Firewall/Proxy越えの仕組みもある – TURN, TURN over TCP • …が、いまのところNode.js アプリ側のFirewall越えが成功して ません Node.js アプリ Web ブラウザ TURN サーバー 参考: • WebRTCハンズオン 概要編 - P2P通信行うまで(3):Firewall越え https://goo.gl/MJWxR9 Fire- wall Proxy Fire- wall Proxy
  26. 26. あれ? WebSocketでもできるのでは? • WebSocketサーバーを外に立てればできる Node.js + WebSocket クライアント Web ブラウザ WebSocket サーバー Fire- wall Proxy Fire- wall Proxy WebRTC DataChannel との違い • DataChannelの場合、ネットワーク環境が許せば、P2Pで繋がる → レイテンシーが小さくなる • DataChannelの場合、End-to-End で暗号化される ⇔ WebSocketの場合、サーバで暗号解除される。悪意があれば、見たり改変したりできる
  27. 27. Part 2 webrtc-native
  28. 28. インストール方法 • Mac OS X 10.10.x 、 Xcode 7.x のケース – git clone https://github.com/vmolsa/webrtc-native – cd webrtc-native – export BUILD_WEBRTC=true – npm install • 注意 – npm install で非常に時間がかかる(数時間?) • webrtcのソース取得、ビルドを実施するため • proxyがある場合は、 ~/.boto ファイルに proxy設定が必要 • Ubuntu 16 でも同様の手順
  29. 29. インストール方法(2) • Mac OS X 10.11.x 、 Xcode 8.x のケース – git clone https://github.com/vmolsa/webrtc-native – cd webrtc-native – export BUILD_WEBRTC=true – npm install • → libwebrtc のビルドに失敗 • 原因 – QTKit (QuickTime Kit) が見つからない、というエラー – Xcode 8 から QuickTime廃止、AVFoundationを利用 – Webrtc-native は Chromium 50 ベースでQTKitに依存 • Chromium 51〜 QTKit不要になっているが… • 対策 – 最新Chromiumのソースを取得するようにビルドスクリプトを修正 • → 挫折 – Xcode 7.x でビルドした build/Release/webrtc.node をコピーしてくる • → なんとか動いた
  30. 30. 使い方 読み込み // webrtc-native をインストールしたディレクトリで var WebRTC = require('./'); var RTCPeerConnection = WebRTC.RTCPeerConnection; var RTCIceCandidate= WebRTC.RTCIceCandidate; var RTCSessionDescription = WebRTC.RTCSessionDescription; var RTCDataChannel = WebRTC.RTCDataChannel; // あとの使い方は、wrtcと同じ
  31. 31. まとめ • WebRTC は Webブラウザだけじゃない • DataChannel なら Node.js からも使える • NATの内側のNode.jsアプリにも接続できる • Node.js で P2P アプリが作れる – センサーデータの送受信? – コンテンツ配信、ファイル共有? – きっと、もっと楽しいことができるはず!
  32. 32. Thank you! @massie_g

×