From fbe7a341972f92ab72cf3054e8b95ac41453c1d1 Mon Sep 17 00:00:00 2001
From: Manuel Araoz <manuelaraoz@gmail.com>
Date: Wed, 23 Apr 2014 21:20:44 -0300
Subject: [PATCH] starting with video sync

---
 css/main.css                   |   6 ++
 img/satoshi.gif                | Bin 0 -> 1465 bytes
 index.html                     |  14 +--
 js/app.js                      |   2 +
 js/models/core/Wallet.js       |  11 ++-
 js/models/network/WebRTC.js    |  39 ++++----
 js/services/controllerUtils.js | 161 ++++++++++++++++++---------------
 js/services/video.js           |  52 +++++++++++
 8 files changed, 184 insertions(+), 101 deletions(-)
 create mode 100644 img/satoshi.gif
 create mode 100644 js/services/video.js

diff --git a/css/main.css b/css/main.css
index 6ab5b4587..85da6dc5f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -277,3 +277,9 @@ button.secondary:hover { background-color: #FFDF00 !important;}
   border: 2px red solid;
 }
 
+.video-small {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
diff --git a/img/satoshi.gif b/img/satoshi.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0e5292df5c6de1a0aeeb7efbf056dcaff360ff21
GIT binary patch
literal 1465
zcmV;q1xETuNk%v~VPpVg0E7SloSK}(!o;kutkl-jq^6|I&dj{JyyW8Kq@twE%FML3
zwA|j@oSvM-#>BL;wA|X<tg5Wk($u`ZyyWKO000000000000000000000000000000
z000000000000000EC2ui0Av7U000I4;31CWI87#MlB(DqFB-G-YP&UF&gTisvY)R<
z9QK4jBkZ>vGJ(yYb1F?*m$l$+m&59qu9h#HDwEG(>?~?*Ux~;#{3r~o==gE|u6Ng=
zfNFwwgE)kThKWszT8)KYV~K%Of;NtX0|gP91)2#8ohyioq?eX7eN|6SM{})5n+gE4
zw6(Jg0Ru(5yuG`2bzUXIFT-CX4-F8u%*_Y}5(5jzYt&sluSHREt*Z#l;Nb`bY;V~~
z+fu7jjE`Ci0parC0uRE~_glq_l!5t81?C9^H$dMt6APTA>!uLUxi}04N~Fc0fUk?L
zP$VQ|Y>P25A{t1LFtOw;1^@o6>9c~d<*o?dOv*&*vZlIp?g~W^5L2d12_QS}>*(<m
z#}e^;DxK9pC{d!>xcMovAmUP`3?A6bhzIJ^5)H0iC71G_79?AH$r7tnKw4j=Rv9F;
zjIGkM!oGfV8ka-@t9E5td^(g^8>!|_5D2UkXj-&*d01-!n6b%e2aTq9`>V3$i3%=4
z=2b~<I}<%WPaJGeFR|BsQAAKJn3U@siE|TKOM4=NjWr?nZ8sxn?~-Iy>NxvWj)UVS
z9lHsB>82^q(C10Wd^@jZECaHa-0uDM)Q7*sPc*PqI6hO01gIZKUiqWZ)KQR}Kd%Aj
zIfLA^+!71a#UDXkbpBV=fE=N~+kwpJ;$305A%++c;X%mEZ|(i^UQQ-p2O&@iX5qzu
zETyI)0J?BRU4XW^^WcgJac3T1j*t-6in9<Ppn|NNHysfV@W@ni9v(DGBSji%&xe`;
z#~Bh4JZGeoD8|LkcOo7*4TTgsCE0KXbjhE8Tmbotg=!f&OF{jdbAps*!S{jzZZZHy
zWFyoV3~_QbG6tSTy0zCG8|9-;Lxm_bBZLm9qR}gWo`}k6FeKn+a(<>^LyZ%F>LGe=
z%w}W)85u&VLX%aRA&&(lDgvknblRz+l9)mV3@RSTnr;0|h?ADN?nq-0qAud6q>#+Y
z=ut3KwIWJo{;04lAvKCRs*t=G>#Gvxlp}|dm8uYcnY~4TMoN)HLhQ3>AS)k#5`x-k
zs4^^jXrPTUJAtX<As}H_b9NQ&VV2ekZ&?AU7r{|Esv)Zw+v?^Ex{M_{$s25vOKd5G
zLKj*Kw^rlsn9P;}(jDIRW)DvI-gED3{^*+W1Wg|2BZ0{7F)`12e7dm76TI3RYm^|A
zBNTRUbs=deEY=$VF#B7@R36(&gVeN9d$Ng80y^}{OmM9lwae<8SIi32%r7FrE@Ad(
zH2DCW3)%Ld@ey|?tTCqf%xzg{X5_kV;ZU#Il7VMe4Reqj&sDA<f-~mz8nQz2A>4M7
zE%$N$gsUByz1Hq?bHBqzecX0<=v#2mb@Uz7-(*sJK;?lwd@0+^X}+1$E+)?SXBGjW
z?Z)B)DEY@PBw*##1@RO1*P<A{B-t$=CxC>o@t$|vyK9a70rSqsKvPE08mAhtV?lew
zFci?MdIY$>+^sPt&Mgs|8d*O>_>xoPT1Bh|U`#yd>(iF(W3xvrAOQxL--=>&xF)2n
zflG>C$lTNn0ida7{%V%O8W8~8agZ4bh+b(XRIwjKfB*+PVJ!$SnAZ`3P9G}3qhu%%
z5B_Xjx_ZD4c~}w#C_r7#s$R;5NJNv2EEo|Z1QVMG8c5hLW*gZc6@5au)3s@fOHo5W
zvd+M#185P9C2>m#{WV22%A<?$=|UUbNRMLh?rn3VBMO1>tZd{_kF_vV8iGbL75ov9
TvryyX1SNw*A`*^+2mt^)Czzi5

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 5da820527..14af669ea 100644
--- a/index.html
+++ b/index.html
@@ -210,14 +210,13 @@
           <p class="text-info" ng-show="$root.wallet.publicKeyRing.requiredCopayers >$root.wallet.network.connectedCopayers()"> <i class="fi-alert size-28"></i> 
           {{$root.wallet.publicKeyRing.requiredCopayers}} copayers needed for signing transactions
 
-
           <ul class="no-bullet">
-            <li class="panel" ng-repeat="copayer in $root.wallet.network.connectedCopayers()">
-              <span ng-if="copayer === $root.wallet.getMyCopayerId()"> You </span>
-              {{copayer}}
-              <span>
-                  <i class="fi-check size-16 panel-sign right p5h br100"></i>
-              </span>
+            <li class="panel" ng-repeat="copayer in $root.wallet.network.connectedPeers">
+              <video class="video-small" autoplay ng-show="$root.videoSrc[copayer]" 
+                ng-src="{{$root.getVideoURL(copayer)}}"
+                id="{{copayer + '-video'}}" muted="true"></video>
+              <img ng-show="!$root.videoSrc[copayer]" 
+                src="/img/satoshi.gif" title="{{copayer + (copayer == $root.wallet.network.peerId?' (You)':'')}}" />
             </li>
           </ul>
         </div>
@@ -511,6 +510,7 @@
     <script src="js/directives.js"></script>
     <script src="js/filters.js"></script>
     <script src="js/services/socket.js"></script>
+    <script src="js/services/video.js"></script>
     <script src="js/services/walletFactory.js"></script>
     <script src="js/services/controllerUtils.js"></script>
 
diff --git a/js/app.js b/js/app.js
index 37da74393..f2b50d521 100644
--- a/js/app.js
+++ b/js/app.js
@@ -15,6 +15,7 @@ var copayApp = window.copayApp = angular.module('copay',[
   'copay.controllerUtils',
   'copay.setup',
   'copay.directives'
+  'copay.video'
 ]);
 
 angular.module('copay.header', []);
@@ -28,4 +29,5 @@ angular.module('copay.signin', []);
 angular.module('copay.setup', []);
 angular.module('copay.socket', []);
 angular.module('copay.directives', []);
+angular.module('copay.video', []);
 
diff --git a/js/models/core/Wallet.js b/js/models/core/Wallet.js
index 95d0c0f98..291c7d36c 100644
--- a/js/models/core/Wallet.js
+++ b/js/models/core/Wallet.js
@@ -128,6 +128,7 @@ Wallet.prototype._handleNetworkChange = function(newCopayerId) {
     this.log('#### Setting new PEER:', newCopayerId);
     this.sendWalletId(newCopayerId);
   }
+  this.emit('peer', newPeerId);
   this.emit('refresh');
 };
 
@@ -175,8 +176,8 @@ Wallet.prototype.netStart = function() {
     signingKeyHex: self.privateKey.getSigningKey(),
   };
 
-  net.start(startOpts, function() {
-    self.emit('created');
+  net.start(function() {
+    self.emit('created', net.getPeer());
     for (var i=0; i<self.publicKeyRing.registeredCopayers(); i++) {
       var otherId = self.getCopayerId(i);
       if (otherId !== myId) {
@@ -243,7 +244,7 @@ Wallet.prototype.sendTxProposals = function(recipients) {
 Wallet.prototype.sendWalletReady = function(recipients) {
   this.log('### SENDING WalletReady TO:', recipients);
 
-  this.network.send( recipients, { 
+  this.network.send(recipients, { 
     type: 'walletReady', 
     walletId: this.id,
   });
@@ -526,4 +527,8 @@ console.log('[Wallet.js.524] DISC'); //TODO
   this.network.disconnect();
 };
 
+Wallet.prototype.getNetwork = function() {
+  return this.network;
+};
+
 module.exports = require('soop')(Wallet);
diff --git a/js/models/network/WebRTC.js b/js/models/network/WebRTC.js
index 62e0f566c..06d32e8d0 100644
--- a/js/models/network/WebRTC.js
+++ b/js/models/network/WebRTC.js
@@ -13,29 +13,32 @@ var Key         = bitcore.Key;
  *    when an unknown data type arrives
  *
  * Provides
+ *  send(toPeerIds, {data}, cb?)
  *
  */
 
 function Network(opts) {
   var self = this;
-  opts                = opts || {};
-  this.peerId         = opts.peerId;
-  this.apiKey         = opts.apiKey || 'lwjd5qra8257b9';
-  this.debug          = opts.debug || 3;
-  this.maxPeers       = opts.maxPeers || 10;
-  this.opts = { key: opts.key };
+  opts = opts || {};
+  this.peerId = opts.peerId;
+  this.apiKey = opts.apiKey || 'lwjd5qra8257b9';
+  this.debug = opts.debug || 3;
+  this.maxPeers = opts.maxPeers || 10;
+  this.opts = {
+    key: opts.key
+  };
   this.connections = {};
   this.copayerForPeer = {};
 
   // For using your own peerJs server
   ['port', 'host', 'path', 'debug'].forEach(function(k) {
-    if (opts[k]) self.opts[k]=opts[k];
+    if (opts[k]) self.opts[k] = opts[k];
   });
   this.connectedPeers = [];
   this.started = false;
 }
 
-Network.parent=EventEmitter;
+Network.parent = EventEmitter;
 
 // Array helpers
 Network._arrayDiff = function(a, b) {
@@ -71,7 +74,6 @@ Network._arrayRemove = function(el, array) {
   return array;
 };
 
-
 Network.prototype.connectedCopayers = function() {
   var ret =[];
   for(var i in this.connectedPeers){
@@ -134,7 +136,7 @@ Network.prototype._onData = function(data, isInbound, peerId) {
     payload= dataObj.payload;
 
   } catch (e) {
-    console.log('### ERROR ON DATA: "%s" ', data, isInbound, e); 
+    console.log('### ERROR ON DATA: "%s" ', data, isInbound, e);
     return;
   };
 
@@ -187,8 +189,6 @@ Network.prototype._onData = function(data, isInbound, peerId) {
   }
 };
 
-
-
 Network.prototype._checkAnyPeer = function() {
   if (!this.connectedPeers.length) {
     console.log('EMIT openError: no more peers, not even you!'); 
@@ -198,7 +198,7 @@ Network.prototype._checkAnyPeer = function() {
 }
 
 Network.prototype._setupConnectionHandlers = function(dataConn, isInbound) {
-  var self=this;
+  var self = this;
 
   dataConn.on('open', function() {
     if (!Network._inArray(dataConn.peer, self.connectedPeers)
@@ -220,7 +220,7 @@ Network.prototype._setupConnectionHandlers = function(dataConn, isInbound) {
   });
 
   dataConn.on('error', function(e) {
-    console.log('### DATA ERROR',e ); //TODO
+    console.log('### DATA ERROR', e); //TODO
     self._onClose(dataConn.peer);
     self._checkAnyPeer();
     self.emit('dataError');
@@ -229,7 +229,7 @@ Network.prototype._setupConnectionHandlers = function(dataConn, isInbound) {
   dataConn.on('close', function() {
     if (self.closing) return;
 
-    console.log('### CLOSE RECV FROM:', dataConn.peer); 
+    console.log('### CLOSE RECV FROM:', dataConn.peer);
     self._onClose(dataConn.peer);
     self._checkAnyPeer();
   });
@@ -241,7 +241,7 @@ Network.prototype._notifyNetworkChange = function(newCopayerId) {
 };
 
 Network.prototype._setupPeerHandlers = function(openCallback) {
-  var self=this;
+  var self = this;
   var p = this.peer;
 
   p.on('open', function() {
@@ -267,8 +267,7 @@ Network.prototype._setupPeerHandlers = function(openCallback) {
         console.log('###  CLOSING CONN FROM:' + dataConn.peer);
         dataConn.close();
       });
-    }
-    else {
+    } else {
       self._setupConnectionHandlers(dataConn, true);
     }
   });
@@ -284,7 +283,7 @@ Network.prototype._addCopayerMap = function(peerId, copayerId) {
 
 Network.prototype.setCopayerId = function(copayerId) {
   if (this.started) {
-    throw new Error ('network already started: can not change peerId')
+    throw new Error('network already started: can not change peerId')
   }
   this.copayerId = copayerId;
   this.copayerIdBuf = new Buffer(copayerId,'hex');
@@ -321,7 +320,7 @@ Network.prototype.start = function(opts, openCallback) {
   console.log('CREATING PEER INSTANCE:', this.peerId); //TODO
   this.peer = new Peer(this.peerId, this.opts);
   this._setupPeerHandlers(openCallback);
-  for (var i = 0; i<opts.connectedPeers.length; i++) {
+  for (var i = 0; i < opts.connectedPeers.length; i++) {
     var otherPeerId = opts.connectedPeers[i];
     this.connectTo(otherPeerId);
   }
diff --git a/js/services/controllerUtils.js b/js/services/controllerUtils.js
index 253f02ad6..da3c224dc 100644
--- a/js/services/controllerUtils.js
+++ b/js/services/controllerUtils.js
@@ -1,80 +1,99 @@
 'use strict';
 
-angular.module('copay.controllerUtils').factory('controllerUtils', function ($rootScope, $location, Socket) {
-  var root = {};
+angular.module('copay.controllerUtils')
+  .factory('controllerUtils', function($rootScope, $sce, $location, Socket, video) {
+    var root = {};
+    $rootScope.videoSrc = {};
+    $rootScope.getVideoURL = function(copayer) {
+      return decodeURIComponent($rootScope.videoSrc[copayer]);
+    };
 
-  root.logout = function() {
-    console.log('### DELETING WALLET'); //TODO
-    $rootScope.wallet = null;
-    delete $rootScope['wallet'];
-    $rootScope.totalBalance = 0;
-    $location.path('signin');
-  };
+    root.logout = function() {
+      console.log('### DELETING WALLET'); //TODO
+      $rootScope.wallet = null;
+      delete $rootScope['wallet'];
+      $rootScope.totalBalance = 0;
+      $location.path('signin');
+    };
 
-  root.onError = function(scope) {
-    if (scope) scope.loading = false;
-    $rootScope.flashMessage = {type:'error', message: 'Could not connect to peer'};
-    root.logout();
-  }
-
-  root.onErrorDigest = function(scope) {
-    root.onError(scope);
-    $rootScope.$digest();
-  }
-
-  root.setupUxHandlers =  function(w) {
-    w.on('badMessage', function(peerId) {
-      $rootScope.flashMessage = {type:'error', message: 'Received wrong message from peer id:' + peerId};
-    });
-
-    w.on('created', function() {
-      $location.path('peer');
-      $rootScope.wallet = w;
-      root.updateBalance();
-    });
-
-    w.on('refresh', function() {
-      console.log('[controllerUtils.js] Refreshing'); //TODO
-      root.updateBalance();
-    });
-
-    w.on('openError', root.onErrorDigest);
-    w.on('close', root.onErrorDigest);
-    w.netStart();
-  };
-
-  root.updateBalance = function() {
-    var w = $rootScope.wallet;
-    if (!w) return;
-
-    w.getBalance(false,function(balance, balanceByAddr) {
-      $rootScope.totalBalance = balance;
-      $rootScope.balanceByAddr = balanceByAddr;
-      console.log('New balance:', balance);
-      w.getBalance(true,function(balance) {
-        $rootScope.availableBalance = balance;
-        $rootScope.$digest();
-      });
-    });
-  };
-
-  root.setSocketHandlers = function() {
-    Socket.removeAllListeners();
-
-    var addrs = $rootScope.wallet.getAddressesStr();
-    for(var i = 0; i < addrs.length; i++) {
-      console.log('### SUBSCRIBE TO', addrs[i]);
-      Socket.emit('subscribe', addrs[i]);
+    root.onError = function(scope) {
+      if (scope) scope.loading = false;
+      $rootScope.flashMessage = {
+        type: 'error',
+        message: 'Could not connect to peer: ' +
+          scope
+      };
+      root.logout();
     }
-console.log('[controllerUtils.js.64]'); //TODO
-    addrs.forEach(function(addr) {
-      Socket.on(addr, function(txid) {
-        console.log('Received!', txid);
+
+    root.onErrorDigest = function(scope) {
+      root.onError(scope);
+      $rootScope.$digest();
+    }
+    root.setupUxHandlers = function(w) {
+      var handlePeerVideo = function(err, peerID, url) {
+        if (err) {
+          root.onErrorDigest(err);
+        }
+        $sce.trustAsResourceUrl(url);
+        $rootScope.videoSrc[peerID] = encodeURIComponent(url);
+        $rootScope.$apply();
+      };
+      w.on('badMessage', function(peerId) {
+        $rootScope.flashMessage = {
+          type: 'error',
+          message: 'Received wrong message from peer id:' + peerId
+        };
+      });
+
+      w.on('created', function(selfpeer) {
+        video.setOwnPeer(selfpeer, handlePeerVideo);
+        $location.path('peer');
+        $rootScope.wallet = w;
         root.updateBalance();
       });
-    });
-  };
+      w.on('refresh', function() {
+        console.log('[controllerUtils.js] Refreshing'); //TODO
+        root.updateBalance();
+      });
+      w.on('openError', root.onErrorDigest);
+      w.on('peer', function(peerID) {
+        video.addPeer(peerID, handlePeerVideo);
+      });
+      w.on('close', root.onErrorDigest);
+      w.netStart();
+    };
 
-  return root;
-});
+    root.updateBalance = function() {
+      var w = $rootScope.wallet;
+      if (!w) return;
+      w.getBalance(false, function(balance, balanceByAddr) {
+        $rootScope.totalBalance = balance;
+        $rootScope.balanceByAddr = balanceByAddr;
+        console.log('New balance:', balance);
+        w.getBalance(true, function(balance) {
+          $rootScope.availableBalance = balance;
+          $rootScope.$digest();
+        });
+      });
+    };
 
+    root.setSocketHandlers = function() {
+      Socket.removeAllListeners();
+
+      var addrs = $rootScope.wallet.getAddressesStr();
+      for (var i = 0; i < addrs.length; i++) {
+        console.log('### SUBSCRIBE TO', addrs[i]);
+        Socket.emit('subscribe', addrs[i]);
+      }
+      console.log('[controllerUtils.js.64]'); //TODO
+      addrs.forEach(function(addr) {
+        Socket.on(addr, function(txid) {
+          console.log('Received!', txid);
+          root.updateBalance();
+        });
+      });
+    };
+
+    return root;
+  });
diff --git a/js/services/video.js b/js/services/video.js
new file mode 100644
index 000000000..97db2fc7a
--- /dev/null
+++ b/js/services/video.js
@@ -0,0 +1,52 @@
+'use strict';
+
+var Video = function() {
+  navigator.getUserMedia = navigator.getUserMedia ||
+    navigator.webkitGetUserMedia ||
+    navigator.mozGetUserMedia;
+};
+
+Video.prototype.setOwnPeer = function(peer, cb) {
+  var self = this;
+
+  navigator.getUserMedia({
+    audio: true,
+    video: true
+  }, function(stream) {
+    // Set your video displays
+    cb(null, peer.id, URL.createObjectURL(stream));
+    window.localStream = stream;
+  }, function() {
+    cb(new Error('Failed to access the webcam and microphone.'));
+  });
+  // Receiving a call
+  peer.on('call', function(call) {
+    // Answer the call automatically (instead of prompting user) for demo purposes
+    call.answer(window.localStream);
+    self.addCall(call, cb);
+  });
+  peer.on('error', function(err) {
+    console.log('ERROR on video peer '+err);
+  });
+  this.peer = peer;
+};
+
+Video.prototype.addPeer = function(peerID, cb) {
+  var call = this.peer.call(peerID, window.localStream);
+  this.addCall(call, cb);
+};
+
+Video.prototype.addCall = function(call, cb) {
+  var peerID = call.id;
+
+  // Wait for stream on the call, then set peer video display
+  call.on('stream', function(stream) {
+    cb(null, peerID, URL.createObjectURL(stream));
+  });
+
+  call.on('close', function() {
+    // TODO: use peerID
+  });
+}
+
+angular.module('copay.video').value('video', new Video());