WIP voip support on web client

webclient/app.js

@@ -24,6 +24,8 @@ var matrixWebClient = angular.module('matrixWebClient', [
     'SettingsController',
     'UserController',
     'matrixService',
+    'matrixPhoneService',
+    'MatrixCall',
     'eventStreamService',
     'eventHandlerService',
     'infinite-scroll'

webclient/components/matrix/event-handler-service.js

@@ -93,7 +93,6 @@ angular.module('eventHandlerService', [])
         $rootScope.$broadcast(PRESENCE_EVENT, event, isLiveEvent);
     };
     
-    
     return {
         MSG_EVENT: MSG_EVENT,
         MEMBER_EVENT: MEMBER_EVENT,

webclient/components/matrix/matrix-call.js

@@ -0,0 +1,93 @@
+/*
+Copyright 2014 matrix.org
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+angular.module('MatrixCall', [])
+.factory('MatrixCall', ['matrixService', 'matrixPhoneService', function MatrixCallFactory(matrixService, matrixPhoneService) {
+    var MatrixCall = function(room_id) {
+        this.room_id = room_id;
+        this.call_id = "c" + new Date().getTime();
+    }
+
+    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+    window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
+
+    MatrixCall.prototype.placeCall = function() {
+        self = this;
+        matrixPhoneService.callPlaced(this);
+        navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMedia(s); }, function(e) { self.getUserMediaFailed(e); });
+    };
+
+    MatrixCall.prototype.gotUserMedia = function(stream) {
+        this.peerConn = new window.RTCPeerConnection({"iceServers":[{"urls":"stun:stun.l.google.com:19302"}]})
+        this.peerConn.addStream(stream);
+        self = this;
+        this.peerConn.onicecandidate = function(c) { self.gotLocalIceCandidate(c); };
+        this.peerConn.createOffer(function(d) {
+            self.gotLocalOffer(d);
+        }, function(e) {
+            self.getLocalOfferFailed(e);
+        });
+    };
+
+    MatrixCall.prototype.gotLocalIceCandidate = function(event) {
+        console.trace(event);
+        if (event.candidate) {
+            var content = {
+                msgtype: "m.call.candidate",
+                version: 0,
+                call_id: this.call_id,
+                candidate: event.candidate
+            };
+            matrixService.sendMessage(this.room_id, undefined, content).then(this.messageSent, this.messageSendFailed);
+        }
+    }
+
+    MatrixCall.prototype.gotRemoteIceCandidate = function(cand) {
+        this.peerConn.addIceCandidate(cand);
+    };
+
+    MatrixCall.prototype.gotLocalOffer = function(description) {
+        console.trace(description);
+        this.peerConn.setLocalDescription(description);
+
+        var content = {
+            msgtype: "m.call.invite",
+            version: 0,
+            call_id: this.call_id,
+            offer: description
+        };
+        matrixService.sendMessage(this.room_id, undefined, content).then(this.messageSent, this.messageSendFailed);
+    };
+
+    MatrixCall.prototype.messageSent = function() {
+    };
+    
+    MatrixCall.prototype.messageSendFailed = function(error) {
+    };
+
+    MatrixCall.prototype.getLocalOfferFailed = function(error) {
+        this.onError("Failed to start audio for call!");
+    };
+
+    MatrixCall.prototype.getUserMediaFailed = function() {
+        this.onError("Couldn't start capturing audio! Is your microphone set up?");
+    };
+    
+    return MatrixCall;
+}]);

webclient/components/matrix/matrix-phone-service.js

@@ -0,0 +1,56 @@
+/*
+Copyright 2014 matrix.org
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+angular.module('matrixPhoneService', [])
+.factory('matrixPhoneService', ['$rootScope', 'matrixService', 'MatrixCall', 'eventHandlerService', function MatrixCallFactory($rootScope, matrixService, MatrixCall, eventHandlerService) {
+    var matrixPhoneService = function() {
+    }
+
+    matrixPhoneService.CALL_EVENT = "CALL_EVENT";
+    matrixPhoneService.allCalls = {};
+
+    MatrixCall.prototype.placeCall = function() {
+        self = this;
+        navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMedia(s); }, function(e) { self.getUserMediaFailed(e); });
+    };
+    
+    matrixPhoneService.prototype.callPlaced = function(call) {
+        matrixPhoneService.allCalls[call.call_id] = call;
+    };
+
+    $rootScope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) {
+        if (!isLive) return; // until matrix supports expiring messages
+        if (event.user_id == matrixService.config().user_id) return;
+        var msg = event.content;
+        if (msg.msgtype == 'm.call.invite') {
+            var call = new MatrixCall(event.room_id);
+            call.call_id = msg.call_id;
+            $rootScope.$broadcast(matrixPhoneService.CALL_EVENT, call);
+            matrixPhoneService.allCalls[call.call_id] = call;
+        } else if (msg.msgtype == 'm.call.candidate') {
+            call = matrixPhoneService.allCalls[msg.call_id];
+            if (!call) {
+                console.trace("Got candidate for unknown call ID "+msg.call_id);
+                return;
+            }
+            call.gotRemoteIceCandidate(msg.candidate);
+        }
+    });
+    
+    return matrixPhoneService;
+}]);

webclient/index.html

@@ -26,6 +26,8 @@
     <script src="settings/settings-controller.js"></script>
     <script src="user/user-controller.js"></script>
     <script src="components/matrix/matrix-service.js"></script>
+    <script src="components/matrix/matrix-call.js"></script>
+    <script src="components/matrix/matrix-phone-service.js"></script>
     <script src="components/matrix/event-stream-service.js"></script>
     <script src="components/matrix/event-handler-service.js"></script>
     <script src="components/matrix/presence-service.js"></script>

webclient/room/room-controller.js

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities'])
-.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService', 'mFileUpload', 'mUtilities', '$rootScope',
+.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService', 'matrixPhoneService', 'mFileUpload', 'MatrixCall', 'mUtilities', '$rootScope',
-                               function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload, mUtilities, $rootScope) {
+                               function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, matrixPhoneService, mFileUpload, MatrixCall, mUtilities, $rootScope) {
    'use strict';
     var MESSAGES_PER_PAGINATION = 30;
     var THUMBNAIL_SIZE = 320;
@@ -82,6 +82,10 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities'])
     $scope.$on(eventHandlerService.PRESENCE_EVENT, function(ngEvent, event, isLive) {
         updatePresence(event);
     });
+
+    $rootScope.$on(matrixPhoneService.CALL_EVENT, function(ngEvent, call) {
+        console.trace("incoming call");
+    });
     
     $scope.paginateMore = function() {
         if ($scope.state.can_paginate) {
@@ -430,4 +434,14 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities'])
     $scope.loadMoreHistory = function() {
         paginate(MESSAGES_PER_PAGINATION);
     };
+
+    $scope.startVoiceCall = function() {
+        var call = new MatrixCall($scope.room_id);
+        call.onError = $scope.onCallError;
+        call.placeCall();
+    }
+
+    $scope.onCallError = function(errStr) {
+        $scope.feedback = errStr;
+    }
 }]);

webclient/room/room.html

@@ -98,6 +98,7 @@
                         <button ng-click="inviteUser(userIDToInvite)">Invite</button>
                 </span>
                 <button ng-click="leaveRoom()">Leave</button>
+                <button ng-click="startVoiceCall()">Voice Call</button>
             </div>
         
             {{ feedback }}