starting with video sync

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;
+}
+

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()">
+            <li class="panel" ng-repeat="copayer in $root.wallet.network.connectedPeers">
-              <span ng-if="copayer === $root.wallet.getMyCopayerId()"> You </span>
+              <video class="video-small" autoplay ng-show="$root.videoSrc[copayer]" 
-              {{copayer}}
+                ng-src="{{$root.getVideoURL(copayer)}}"
-              <span>
+                id="{{copayer + '-video'}}" muted="true"></video>
-                  <i class="fi-check size-16 panel-sign right p5h br100"></i>
+              <img ng-show="!$root.videoSrc[copayer]" 
-              </span>
+                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>
 

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', []);
 

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() {
+  net.start(function() {
-    self.emit('created');
+    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);

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 || {};
+  opts = opts || {};
-  this.peerId         = opts.peerId;
+  this.peerId = opts.peerId;
-  this.apiKey         = opts.apiKey || 'lwjd5qra8257b9';
+  this.apiKey = opts.apiKey || 'lwjd5qra8257b9';
-  this.debug          = opts.debug || 3;
+  this.debug = opts.debug || 3;
-  this.maxPeers       = opts.maxPeers || 10;
+  this.maxPeers = opts.maxPeers || 10;
-  this.opts = { key: opts.key };
+  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){
@@ -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');
@@ -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);
   }

js/services/controllerUtils.js

@@ -1,80 +1,99 @@
 'use strict';
 
-angular.module('copay.controllerUtils').factory('controllerUtils', function ($rootScope, $location, Socket) {
+angular.module('copay.controllerUtils')
-  var root = {};
+  .factory('controllerUtils', function($rootScope, $sce, $location, Socket, video) {
+    var root = {};
+    $rootScope.videoSrc = {};
+    $rootScope.getVideoURL = function(copayer) {
+      return decodeURIComponent($rootScope.videoSrc[copayer]);
+    };
 
-  root.logout = function() {
+    root.logout = function() {
-    console.log('### DELETING WALLET'); //TODO
+      console.log('### DELETING WALLET'); //TODO
-    $rootScope.wallet = null;
+      $rootScope.wallet = null;
-    delete $rootScope['wallet'];
+      delete $rootScope['wallet'];
-    $rootScope.totalBalance = 0;
+      $rootScope.totalBalance = 0;
-    $location.path('signin');
+      $location.path('signin');
-  };
+    };
 
-  root.onError = function(scope) {
+    root.onError = function(scope) {
-    if (scope) scope.loading = false;
+      if (scope) scope.loading = false;
-    $rootScope.flashMessage = {type:'error', message: 'Could not connect to peer'};
+      $rootScope.flashMessage = {
-    root.logout();
+        type: 'error',
-  }
+        message: 'Could not connect to peer: ' +
-
+          scope
-  root.onErrorDigest = function(scope) {
+      };
-    root.onError(scope);
+      root.logout();
-    $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]);
     }
-console.log('[controllerUtils.js.64]'); //TODO
+
-    addrs.forEach(function(addr) {
+    root.onErrorDigest = function(scope) {
-      Socket.on(addr, function(txid) {
+      root.onError(scope);
-        console.log('Received!', txid);
+      $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;
+  });

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());