magically bind src attributes to video elements as long as objects have a stream

clientapp/helpers/xmppEventHandlers.js

@@ -386,6 +386,7 @@ module.exports = function (client, app) {
     });
 
     client.on('jingle:remotestream:added', function (session) {
+        console.log('remote stream', session);
         var contact = me.getContact(session.peer);
         if (!contact) {
             contact = new Contact({jid: client.JID(session.peer).bare});

clientapp/models/call.js

@@ -8,10 +8,23 @@ var logger = require('andlog');
 
 module.exports = HumanModel.define({
     type: 'call',
+    initialize: function (attrs) {
+        this.contact.onCall = true;
+    },
     session: {
         contact: 'object',
         jingleSession: 'object',
         state: ['string', true, 'inactive'],
         multiUser: ['boolean', true, false]
+    },
+    end: function (reasonForEnding) {
+        var reason = reasonForEnding || 'success';
+        this.contact.onCall = false;
+        if (this.jingleSession) {
+            this.jingleSession.end({
+                condition: reason
+            });
+        }
+        this.collection.remove(this);
     }
 });

clientapp/models/contact.js

@@ -1,4 +1,4 @@
-/*global app, me, client*/
+/*global app, me, client, URL*/
 "use strict";
 
 var _ = require('underscore');
@@ -51,6 +51,14 @@ module.exports = HumanModel.define({
         stream: 'object'
     },
     derived: {
+        streamUrl: {
+            deps: ['stream'],
+            cache: true,
+            fn: function () {
+                if (!this.stream) return '';
+                return URL.createObjectURL(this.stream);
+            }
+        },
         displayName: {
             deps: ['name', 'jid'],
             fn: function () {
@@ -153,6 +161,11 @@ module.exports = HumanModel.define({
             fn: function () {
                 return !!this.jingleResources.length;
             }
+        },
+        callObject: {
+            fn: function () {
+                return app.calls.where('contact', this);
+            }
         }
     },
     collections: {

clientapp/models/me.js

@@ -1,7 +1,8 @@
-/*global app, client*/
+/*global app, client, URL, me*/
 "use strict";
 
 var HumanModel = require('human-model');
+var getUserMedia = require('getusermedia');
 var Contacts = require('./contacts');
 var Calls = require('./calls');
 var Contact = require('./contact');
@@ -39,13 +40,24 @@ module.exports = HumanModel.define({
         shouldAskForAlertsPermission: ['bool', true, false],
         hasFocus: ['bool', true, false],
         _activeContact: ['string', true, ''],
-        displayName: ['string', true, 'Me']
+        displayName: ['string', true, 'Me'],
+        stream: 'object'
     },
     collections: {
         contacts: Contacts,
         mucs: MUCs,
         calls: Calls
     },
+    derived: {
+        streamUrl: {
+            deps: ['stream'],
+            cache: true,
+            fn: function () {
+                if (!this.stream) return '';
+                return URL.createObjectURL(this.stream);
+            }
+        }
+    },
     setActiveContact: function (jid) {
         var prev = this.getContact(this._activeContact);
         if (prev) {
@@ -156,5 +168,20 @@ module.exports = HumanModel.define({
             rosterVer: this.rosterVer
         };
         app.storage.profiles.set(data);
+    },
+    cameraOn: function () {
+        getUserMedia(function (err, stream) {
+            if (err) {
+                console.error(err);
+            } else {
+                this.stream = stream;
+            }
+        });
+    },
+    cameraOff: function () {
+        if (this.stream) {
+            this.stream.stop();
+            this.stream = null;
+        }
     }
 });

clientapp/pages/chat.js

@@ -36,7 +36,8 @@ module.exports = BasePage.extend(chatHelpers).extend({
         'click .mute': 'handleMuteClick'
     },
     srcBindings: {
-        avatar: 'header .avatar'
+        avatar: 'header .avatar',
+        streamUrl: 'video.remote'
     },
     textBindings: {
         displayName: 'header .name',
@@ -80,6 +81,12 @@ module.exports = BasePage.extend(chatHelpers).extend({
 
         this.initializeScroll();
 
+        this.registerBindings(me, {
+            srcBindings: {
+                streamUrl: 'video.local'
+            }
+        });
+
         return this;
     },
     handlePageLoaded: function () {
@@ -221,10 +228,12 @@ module.exports = BasePage.extend(chatHelpers).extend({
     },
     handleCall: function () {
         if (this.model.onCall) {
+            /*
             attachMediaStream(me.stream, this.$('video.local')[0], {
                 mirror: true,
                 muted: true
             });
+*/
         }
     },
     handleStream: function (model, stream) {

clientapp/templates.js

@@ -169,7 +169,7 @@ exports.misc.growlMessage = function anonymous(locals) {
 exports.pages.chat = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div><button class="call">call</button><div class="activeCall"><video class="remote"></video><video class="local"></video><aside class="buttons"><button class="end">End</button><button class="mute">Mute</button><button class="unmute">Unmute</button></aside></div></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
+        buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div><button class="call">call</button><div class="activeCall"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="buttons"><button class="end">End</button><button class="mute">Mute</button><button class="unmute">Unmute</button></aside></div></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/chat.jade

@@ -6,8 +6,8 @@ section.page.chat
       .tzo
       button.call call
       .activeCall
-        video.remote
-        video.local
+        video.remote(autoplay)
+        video.local(autoplay, muted)
         aside.buttons
           button.end End
           button.mute Mute

public/css/app/chat.styl

@@ -83,6 +83,7 @@
         right: 10px
         height: 20%
         border: 2px solid $grayOutline
+        transform(scaleX(-1))
 
       .buttons
         position: absolute

public/css/otalk.css

@@ -740,6 +740,10 @@ h3 {
   right: 10px;
   height: 20%;
   border: 2px solid #e4e4e4;
+  -webkit-transform: scaleX(-1);
+  -moz-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  transform: scaleX(-1);
 }
 .conversation header .activeCall .buttons {
   position: absolute;

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1381908496411
+# 0.0.1 1381945480857
 
 CACHE:
 /app.js