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

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() {
-    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) {
@@ -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,6 +13,7 @@ var Key         = bitcore.Key;
  *    when an unknown data type arrives
  *
  * Provides
+ *  send(toPeerIds, {data}, cb?)
  *
  */
 
@@ -23,7 +24,9 @@ function Network(opts) {
   this.apiKey = opts.apiKey || 'lwjd5qra8257b9';
   this.debug = opts.debug || 3;
   this.maxPeers = opts.maxPeers || 10;
-  this.opts = { key: opts.key };
+  this.opts = {
+    key: opts.key
+  };
   this.connections = {};
   this.copayerForPeer = {};
 
@@ -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!'); 
@@ -267,8 +267,7 @@ Network.prototype._setupPeerHandlers = function(openCallback) {
         console.log('###  CLOSING CONN FROM:' + dataConn.peer);
         dataConn.close();
       });
-    }
-    else {
+    } else {
       self._setupConnectionHandlers(dataConn, true);
     }
   });

js/services/controllerUtils.js

@@ -1,7 +1,12 @@
 'use strict';
 
-angular.module('copay.controllerUtils').factory('controllerUtils', function ($rootScope, $location, Socket) {
+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
@@ -13,7 +18,11 @@ angular.module('copay.controllerUtils').factory('controllerUtils', function ($ro
 
     root.onError = function(scope) {
       if (scope) scope.loading = false;
-    $rootScope.flashMessage = {type:'error', message: 'Could not connect to peer'};
+      $rootScope.flashMessage = {
+        type: 'error',
+        message: 'Could not connect to peer: ' +
+          scope
+      };
       root.logout();
     }
 
@@ -21,24 +30,36 @@ angular.module('copay.controllerUtils').factory('controllerUtils', function ($ro
       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};
+        $rootScope.flashMessage = {
+          type: 'error',
+          message: 'Received wrong message from peer id:' + peerId
+        };
       });
 
-    w.on('created', function() {
+      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();
     };
@@ -46,7 +67,6 @@ angular.module('copay.controllerUtils').factory('controllerUtils', function ($ro
     root.updateBalance = function() {
       var w = $rootScope.wallet;
       if (!w) return;
-
       w.getBalance(false, function(balance, balanceByAddr) {
         $rootScope.totalBalance = balance;
         $rootScope.balanceByAddr = balanceByAddr;
@@ -77,4 +97,3 @@ console.log('[controllerUtils.js.64]'); //TODO
 
     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());