From 7d34a1c108967ad8e5f24f979aecad97595622c8 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 27 Aug 2014 18:57:54 +0100 Subject: WIP voip support on web client --- webclient/app.js | 2 + .../components/matrix/event-handler-service.js | 1 - webclient/components/matrix/matrix-call.js | 93 ++++++++++++++++++++++ .../components/matrix/matrix-phone-service.js | 56 +++++++++++++ webclient/index.html | 2 + webclient/room/room-controller.js | 18 ++++- webclient/room/room.html | 1 + 7 files changed, 170 insertions(+), 3 deletions(-) create mode 100644 webclient/components/matrix/matrix-call.js create mode 100644 webclient/components/matrix/matrix-phone-service.js (limited to 'webclient') diff --git a/webclient/app.js b/webclient/app.js index 1d5503ebc0..b52479babe 100644 --- a/webclient/app.js +++ b/webclient/app.js @@ -24,6 +24,8 @@ var matrixWebClient = angular.module('matrixWebClient', [ 'SettingsController', 'UserController', 'matrixService', + 'matrixPhoneService', + 'MatrixCall', 'eventStreamService', 'eventHandlerService', 'infinite-scroll' diff --git a/webclient/components/matrix/event-handler-service.js b/webclient/components/matrix/event-handler-service.js index 6ea0f58bc5..7514770583 100644 --- a/webclient/components/matrix/event-handler-service.js +++ b/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, diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js new file mode 100644 index 0000000000..1bed843c44 --- /dev/null +++ b/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; +}]); diff --git a/webclient/components/matrix/matrix-phone-service.js b/webclient/components/matrix/matrix-phone-service.js new file mode 100644 index 0000000000..9e296f6939 --- /dev/null +++ b/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; +}]); diff --git a/webclient/index.html b/webclient/index.html index 16f0e8ac5f..5faf165626 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -26,6 +26,8 @@ + + diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index 6c98db269e..de3738ca0e 100644 --- a/webclient/room/room-controller.js +++ b/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', - function($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, 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; + } }]); diff --git a/webclient/room/room.html b/webclient/room/room.html index 236ca0a89b..4f5584b568 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -98,6 +98,7 @@ + {{ feedback }} -- cgit 1.5.1 From 466fbe4c4e034125b9db6f859387ce1141efe425 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Thu, 28 Aug 2014 11:14:36 +0200 Subject: Cleaned up deps --- webclient/home/home-controller.js | 4 ++-- webclient/recents/recents-controller.js | 4 ++-- webclient/room/room-controller.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) (limited to 'webclient') diff --git a/webclient/home/home-controller.js b/webclient/home/home-controller.js index 62f6ef2d95..008dff7422 100644 --- a/webclient/home/home-controller.js +++ b/webclient/home/home-controller.js @@ -17,8 +17,8 @@ limitations under the License. 'use strict'; angular.module('HomeController', ['matrixService', 'eventHandlerService', 'RecentsController']) -.controller('HomeController', ['$scope', '$location', 'matrixService', 'eventHandlerService', 'eventStreamService', - function($scope, $location, matrixService, eventHandlerService, eventStreamService) { +.controller('HomeController', ['$scope', '$location', 'matrixService', + function($scope, $location, matrixService) { $scope.config = matrixService.config(); $scope.public_rooms = []; diff --git a/webclient/recents/recents-controller.js b/webclient/recents/recents-controller.js index bf6a1b8874..e182a3ad23 100644 --- a/webclient/recents/recents-controller.js +++ b/webclient/recents/recents-controller.js @@ -17,8 +17,8 @@ 'use strict'; angular.module('RecentsController', ['matrixService', 'eventHandlerService']) -.controller('RecentsController', ['$scope', 'matrixService', 'eventHandlerService', 'eventStreamService', - function($scope, matrixService, eventHandlerService, eventStreamService) { +.controller('RecentsController', ['$scope', 'matrixService', 'eventHandlerService', + function($scope, matrixService, eventHandlerService) { $scope.rooms = {}; // $scope of the parent where the recents component is included can override this value diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index e775d88570..b30fa9541d 100644 --- a/webclient/room/room-controller.js +++ b/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', - function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload, mUtilities, $rootScope) { +.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventHandlerService', 'mFileUpload', 'mUtilities', '$rootScope', + function($scope, $http, $timeout, $routeParams, $location, matrixService, eventHandlerService, mFileUpload, mUtilities, $rootScope) { 'use strict'; var MESSAGES_PER_PAGINATION = 30; var THUMBNAIL_SIZE = 320; -- cgit 1.5.1 From 06c79a23d481c45574915fe5ae7088f156e533b3 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Thu, 28 Aug 2014 15:56:16 +0200 Subject: BF: Made member events parsing work (handleEvents expects an array of events) --- webclient/components/matrix/event-stream-service.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) (limited to 'webclient') diff --git a/webclient/components/matrix/event-stream-service.js b/webclient/components/matrix/event-stream-service.js index a1a98b2a36..dc2e359dd0 100644 --- a/webclient/components/matrix/event-stream-service.js +++ b/webclient/components/matrix/event-stream-service.js @@ -96,7 +96,7 @@ angular.module('eventStreamService', []) ); return deferred.promise; - } + }; var startEventStream = function() { settings.shouldPoll = true; @@ -110,18 +110,14 @@ angular.module('eventStreamService', []) for (var i = 0; i < rooms.length; ++i) { var room = rooms[i]; if ("state" in room) { - for (var j = 0; j < room.state.length; ++j) { - eventHandlerService.handleEvents(room.state[j], false); - } + eventHandlerService.handleEvents(room.state, false); } } var presence = response.data.presence; - for (var i = 0; i < presence.length; ++i) { - eventHandlerService.handleEvent(presence[i], false); - } + eventHandlerService.handleEvents(presence, false); - settings.from = response.data.end + settings.from = response.data.end; doEventStream(deferred); }, function(error) { -- cgit 1.5.1 From 7c99ebdbd13c2fc6ac965e939cabd61bd86956d1 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Thu, 28 Aug 2014 16:22:35 +0200 Subject: Added waitForInitialSyncCompletion so that clients can know when they can access to the data retrieved by the initialSync Request --- .../components/matrix/event-handler-service.js | 30 +++++++++++++++------- .../components/matrix/event-stream-service.js | 3 +++ 2 files changed, 24 insertions(+), 9 deletions(-) (limited to 'webclient') diff --git a/webclient/components/matrix/event-handler-service.js b/webclient/components/matrix/event-handler-service.js index 6ea0f58bc5..df61429db5 100644 --- a/webclient/components/matrix/event-handler-service.js +++ b/webclient/components/matrix/event-handler-service.js @@ -27,13 +27,15 @@ Typically, this service will store events or broadcast them to any listeners if typically all the $on method would do is update its own $scope. */ angular.module('eventHandlerService', []) -.factory('eventHandlerService', ['matrixService', '$rootScope', function(matrixService, $rootScope) { +.factory('eventHandlerService', ['matrixService', '$rootScope', '$q', function(matrixService, $rootScope, $q) { var MSG_EVENT = "MSG_EVENT"; var MEMBER_EVENT = "MEMBER_EVENT"; var PRESENCE_EVENT = "PRESENCE_EVENT"; + + var InitialSyncDeferred = $q.defer(); $rootScope.events = { - rooms: {}, // will contain roomId: { messages:[], members:{userid1: event} } + rooms: {} // will contain roomId: { messages:[], members:{userid1: event} } }; $rootScope.presence = {}; @@ -47,11 +49,11 @@ angular.module('eventHandlerService', []) } } - var reInitRoom = function(room_id) { - $rootScope.events.rooms[room_id] = {}; - $rootScope.events.rooms[room_id].messages = []; - $rootScope.events.rooms[room_id].members = {}; - } + var resetRoomMessages = function(room_id) { + if ($rootScope.events.rooms[room_id]) { + $rootScope.events.rooms[room_id].messages = []; + } + }; var handleMessage = function(event, isLiveEvent) { initRoom(event.room_id); @@ -125,8 +127,18 @@ angular.module('eventHandlerService', []) } }, - reInitRoom: function(room_id) { - reInitRoom(room_id); + handleInitialSyncDone: function() { + console.log("# handleInitialSyncDone"); + InitialSyncDeferred.resolve($rootScope.events, $rootScope.presence); }, + + // Returns a promise that resolves when the initialSync request has been processed + waitForInitialSyncCompletion: function() { + return InitialSyncDeferred.promise; + }, + + resetRoomMessages: function(room_id) { + resetRoomMessages(room_id); + } }; }]); diff --git a/webclient/components/matrix/event-stream-service.js b/webclient/components/matrix/event-stream-service.js index dc2e359dd0..4cc2bf4c4e 100644 --- a/webclient/components/matrix/event-stream-service.js +++ b/webclient/components/matrix/event-stream-service.js @@ -117,6 +117,9 @@ angular.module('eventStreamService', []) var presence = response.data.presence; eventHandlerService.handleEvents(presence, false); + // Initial sync is done + eventHandlerService.handleInitialSyncDone(); + settings.from = response.data.end; doEventStream(deferred); }, -- cgit 1.5.1 From c44293db2ff0e40dd46a0f8a6ea6d6fa6ccc7a6a Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Thu, 28 Aug 2014 16:23:20 +0200 Subject: When opening this page, do not join a room already joined --- webclient/room/room-controller.js | 77 ++++++++++++++++++++++++++------------- 1 file changed, 51 insertions(+), 26 deletions(-) (limited to 'webclient') diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index b30fa9541d..910168754c 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -282,7 +282,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities']) } if (room_id_or_alias && '!' === room_id_or_alias[0]) { - // Yes. We can start right now + // Yes. We can go on right now $scope.room_id = room_id_or_alias; $scope.room_alias = matrixService.getRoomIdToAliasMapping($scope.room_id); onInit2(); @@ -313,7 +313,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities']) $scope.room_id = response.data.room_id; console.log(" -> Room ID: " + $scope.room_id); - // Now, we can start + // Now, we can go on onInit2(); }, function () { @@ -323,36 +323,61 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities']) }); } }; - + var onInit2 = function() { - eventHandlerService.reInitRoom($scope.room_id); - - // Make recents highlight the current room - $scope.recentsSelectedRoomID = $scope.room_id; - - // Join the room - matrixService.join($scope.room_id).then( + console.log("onInit2"); + + // Make sure the initialSync has been before going further + eventHandlerService.waitForInitialSyncCompletion().then( function() { - console.log("Joined room "+$scope.room_id); + var needsToJoin = true; + + // The room members is available in the data fetched by initialSync + if ($rootScope.events.rooms[$scope.room_id]) { + var members = $rootScope.events.rooms[$scope.room_id].members; + + // Update the member list + for (var i in members) { + var member = members[i]; + updateMemberList(member); + } - // Get the current member list - matrixService.getMemberList($scope.room_id).then( - function(response) { - for (var i = 0; i < response.data.chunk.length; i++) { - var chunk = response.data.chunk[i]; - updateMemberList(chunk); + // Check if the user has already join the room + if ($scope.state.user_id in members) { + if ("join" === members[$scope.state.user_id].membership) { + needsToJoin = false; } - }, - function(error) { - $scope.feedback = "Failed get member list: " + error.data.error; } - ); + } - paginate(MESSAGES_PER_PAGINATION); - }, - function(reason) { - $scope.feedback = "Can't join room: " + reason; - }); + // Do we to join the room before starting? + if (needsToJoin) { + matrixService.join($scope.room_id).then( + function() { + console.log("Joined room "+$scope.room_id); + onInit3(); + }, + function(reason) { + $scope.feedback = "Can't join room: " + reason; + }); + } + else { + onInit3(); + } + } + ); + }; + + var onInit3 = function() { + console.log("onInit3"); + + // TODO: We should be able to keep them + eventHandlerService.resetRoomMessages($scope.room_id); + + // Make recents highlight the current room + $scope.recentsSelectedRoomID = $scope.room_id; + + paginate(MESSAGES_PER_PAGINATION); }; $scope.inviteUser = function(user_id) { -- cgit 1.5.1 From b09e531159c56a8f08c5ead81dbba40f923db822 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Thu, 28 Aug 2014 16:38:00 +0200 Subject: Do a smart update of the recents from the events stream rather than hammering initialSync each time --- webclient/recents/recents-controller.js | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) (limited to 'webclient') diff --git a/webclient/recents/recents-controller.js b/webclient/recents/recents-controller.js index e182a3ad23..803ab420f9 100644 --- a/webclient/recents/recents-controller.js +++ b/webclient/recents/recents-controller.js @@ -25,13 +25,24 @@ angular.module('RecentsController', ['matrixService', 'eventHandlerService']) // in order to highlight a specific room in the list $scope.recentsSelectedRoomID; - // Refresh the list on matrix invitation and message event - $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) { - refresh(); - }); - $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) { - refresh(); - }); + var listenToEventStream = function() { + // Refresh the list on matrix invitation and message event + $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) { + var config = matrixService.config(); + if (event.state_key === config.user_id && event.content.membership === "invite") { + console.log("Invited to room " + event.room_id); + // FIXME push membership to top level key to match /im/sync + event.membership = event.content.membership; + // FIXME bodge a nicer name than the room ID for this invite. + event.room_display_name = event.user_id + "'s room"; + $scope.rooms[event.room_id] = event; + } + }); + $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) { + $scope.rooms[event.room_id].lastMsg = event; + }); + }; + var refresh = function() { // List all rooms joined or been invited to @@ -56,6 +67,9 @@ angular.module('RecentsController', ['matrixService', 'eventHandlerService']) for (var i = 0; i < presence.length; ++i) { eventHandlerService.handleEvent(presence[i], false); } + + // From now, update recents from the stream + listenToEventStream(); }, function(error) { $scope.feedback = "Failure: " + error.data; -- cgit 1.5.1 From ca7426eee0f1d421815ff1921bfd2a5cd03c960f Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 28 Aug 2014 19:03:34 +0100 Subject: First basic working VoIP call support --- webclient/components/matrix/matrix-call.js | 117 ++++++++++++++++++++- .../components/matrix/matrix-phone-service.js | 32 ++++-- webclient/room/room-controller.js | 19 ++++ webclient/room/room.html | 9 +- 4 files changed, 161 insertions(+), 16 deletions(-) (limited to 'webclient') diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js index 1bed843c44..a5f2529b87 100644 --- a/webclient/components/matrix/matrix-call.js +++ b/webclient/components/matrix/matrix-call.js @@ -21,6 +21,7 @@ angular.module('MatrixCall', []) var MatrixCall = function(room_id) { this.room_id = room_id; this.call_id = "c" + new Date().getTime(); + this.state = 'fledgling'; } navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; @@ -30,19 +31,75 @@ angular.module('MatrixCall', []) 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); }); + navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMediaForInvite(s); }, function(e) { self.getUserMediaFailed(e); }); + self.state = 'wait_local_media'; }; - MatrixCall.prototype.gotUserMedia = function(stream) { + MatrixCall.prototype.initWithInvite = function(msg) { + this.msg = msg; this.peerConn = new window.RTCPeerConnection({"iceServers":[{"urls":"stun:stun.l.google.com:19302"}]}) - this.peerConn.addStream(stream); + self= this; + this.peerConn.oniceconnectionstatechange = function() { self.onIceConnectionStateChanged(); }; + this.peerConn.onicecandidate = function(c) { self.gotLocalIceCandidate(c); }; + this.peerConn.onsignalingstatechange = function() { self.onSignallingStateChanged(); }; + this.peerConn.onaddstream = function(s) { self.onAddStream(s); }; + this.peerConn.setRemoteDescription(new RTCSessionDescription(this.msg.offer), self.onSetRemoteDescriptionSuccess, self.onSetRemoteDescriptionError); + this.state = 'ringing'; + }; + + MatrixCall.prototype.answer = function() { + console.trace("Answering call "+this.call_id); self = this; + navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMediaForAnswer(s); }, function(e) { self.getUserMediaFailed(e); }); + this.state = 'wait_local_media'; + }; + + MatrixCall.prototype.hangup = function() { + console.trace("Rejecting call "+this.call_id); + var content = { + msgtype: "m.call.hangup", + version: 0, + call_id: this.call_id, + }; + matrixService.sendMessage(this.room_id, undefined, content).then(this.messageSent, this.messageSendFailed); + this.state = 'ended'; + }; + + MatrixCall.prototype.gotUserMediaForInvite = function(stream) { + var audioTracks = stream.getAudioTracks(); + for (var i = 0; i < audioTracks.length; i++) { + audioTracks[i].enabled = true; + } + this.peerConn = new window.RTCPeerConnection({"iceServers":[{"urls":"stun:stun.l.google.com:19302"}]}) + self = this; + this.peerConn.oniceconnectionstatechange = function() { self.onIceConnectionStateChanged(); }; + this.peerConn.onsignalingstatechange = function() { self.onSignallingStateChanged(); }; this.peerConn.onicecandidate = function(c) { self.gotLocalIceCandidate(c); }; + this.peerConn.onaddstream = function(s) { self.onAddStream(s); }; + this.peerConn.addStream(stream); this.peerConn.createOffer(function(d) { self.gotLocalOffer(d); }, function(e) { self.getLocalOfferFailed(e); }); + this.state = 'create_offer'; + }; + + MatrixCall.prototype.gotUserMediaForAnswer = function(stream) { + var audioTracks = stream.getAudioTracks(); + for (var i = 0; i < audioTracks.length; i++) { + audioTracks[i].enabled = true; + } + this.peerConn.addStream(stream); + self = this; + var constraints = { + 'mandatory': { + 'OfferToReceiveAudio': true, + 'OfferToReceiveVideo': false + }, + }; + this.peerConn.createAnswer(function(d) { self.createdAnswer(d); }, function(e) {}, constraints); + this.state = 'create_answer'; }; MatrixCall.prototype.gotLocalIceCandidate = function(event) { @@ -59,11 +116,21 @@ angular.module('MatrixCall', []) } MatrixCall.prototype.gotRemoteIceCandidate = function(cand) { - this.peerConn.addIceCandidate(cand); + console.trace("Got ICE candidate from remote: "+cand); + var candidateObject = new RTCIceCandidate({ + sdpMLineIndex: cand.label, + candidate: cand.candidate + }); + this.peerConn.addIceCandidate(candidateObject, function() {}, function(e) {}); + }; + + MatrixCall.prototype.receivedAnswer = function(msg) { + this.peerConn.setRemoteDescription(new RTCSessionDescription(msg.answer), self.onSetRemoteDescriptionSuccess, self.onSetRemoteDescriptionError); + this.state = 'connecting'; }; MatrixCall.prototype.gotLocalOffer = function(description) { - console.trace(description); + console.trace("Created offer: "+description); this.peerConn.setLocalDescription(description); var content = { @@ -73,6 +140,20 @@ angular.module('MatrixCall', []) offer: description }; matrixService.sendMessage(this.room_id, undefined, content).then(this.messageSent, this.messageSendFailed); + this.state = 'invite_sent'; + }; + + MatrixCall.prototype.createdAnswer = function(description) { + console.trace("Created answer: "+description); + this.peerConn.setLocalDescription(description); + var content = { + msgtype: "m.call.answer", + version: 0, + call_id: this.call_id, + answer: description + }; + matrixService.sendMessage(this.room_id, undefined, content).then(this.messageSent, this.messageSendFailed); + this.state = 'connecting'; }; MatrixCall.prototype.messageSent = function() { @@ -88,6 +169,32 @@ angular.module('MatrixCall', []) MatrixCall.prototype.getUserMediaFailed = function() { this.onError("Couldn't start capturing audio! Is your microphone set up?"); }; + + MatrixCall.prototype.onIceConnectionStateChanged = function() { + console.trace("Ice connection state changed to: "+this.peerConn.iceConnectionState); + if (this.peerConn.iceConnectionState == 'completed') { + this.state = 'connected'; + } + }; + + MatrixCall.prototype.onSignallingStateChanged = function() { + console.trace("Signalling state changed to: "+this.peerConn.signalingState); + }; + + MatrixCall.prototype.onSetRemoteDescriptionSuccess = function() { + console.trace("Set remote description"); + }; + MatrixCall.prototype.onSetRemoteDescriptionError = function(e) { + console.trace("Failed to set remote description"+e); + }; + + MatrixCall.prototype.onAddStream = function(event) { + console.trace("Stream added"+event); + var player = new Audio(); + player.src = URL.createObjectURL(event.stream); + player.play(); + }; + return MatrixCall; }]); diff --git a/webclient/components/matrix/matrix-phone-service.js b/webclient/components/matrix/matrix-phone-service.js index 9e296f6939..6f96875103 100644 --- a/webclient/components/matrix/matrix-phone-service.js +++ b/webclient/components/matrix/matrix-phone-service.js @@ -17,19 +17,14 @@ limitations under the License. 'use strict'; angular.module('matrixPhoneService', []) -.factory('matrixPhoneService', ['$rootScope', 'matrixService', 'MatrixCall', 'eventHandlerService', function MatrixCallFactory($rootScope, matrixService, MatrixCall, eventHandlerService) { +.factory('matrixPhoneService', ['$rootScope', '$injector', 'matrixService', 'eventHandlerService', function MatrixPhoneService($rootScope, $injector, matrixService, 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.callPlaced = function(call) { matrixPhoneService.allCalls[call.call_id] = call; }; @@ -38,17 +33,34 @@ angular.module('matrixPhoneService', []) if (event.user_id == matrixService.config().user_id) return; var msg = event.content; if (msg.msgtype == 'm.call.invite') { + var MatrixCall = $injector.get('MatrixCall'); var call = new MatrixCall(event.room_id); call.call_id = msg.call_id; - $rootScope.$broadcast(matrixPhoneService.CALL_EVENT, call); + call.initWithInvite(msg); matrixPhoneService.allCalls[call.call_id] = call; + $rootScope.$broadcast(matrixPhoneService.CALL_EVENT, call); + } else if (msg.msgtype == 'm.call.answer') { + var call = matrixPhoneService.allCalls[msg.call_id]; + if (!call) { + console.trace("Got answer for unknown call ID "+msg.call_id); + return; + } + call.receivedAnswer(msg); } else if (msg.msgtype == 'm.call.candidate') { - call = matrixPhoneService.allCalls[msg.call_id]; + var call = matrixPhoneService.allCalls[msg.call_id]; if (!call) { console.trace("Got candidate for unknown call ID "+msg.call_id); return; } call.gotRemoteIceCandidate(msg.candidate); + } else if (msg.msgtype == 'm.call.hangup') { + var call = matrixPhoneService.allCalls[msg.call_id]; + if (!call) { + console.trace("Got hangup for unknown call ID "+msg.call_id); + return; + } + call.onHangup(); + matrixPhoneService.allCalls[msg.call_id] = undefined; } }); diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index de3738ca0e..c596af820c 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -85,6 +85,9 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities']) $rootScope.$on(matrixPhoneService.CALL_EVENT, function(ngEvent, call) { console.trace("incoming call"); + call.onError = $scope.onCallError; + call.onHangup = $scope.onCallHangup; + $scope.currentCall = call; }); $scope.paginateMore = function() { @@ -93,6 +96,15 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities']) paginate(MESSAGES_PER_PAGINATION); } }; + + $scope.answerCall = function() { + $scope.currentCall.answer(); + }; + + $scope.hangupCall = function() { + $scope.currentCall.hangup(); + $scope.currentCall = undefined; + }; var paginate = function(numItems) { // console.log("paginate " + numItems); @@ -438,10 +450,17 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities']) $scope.startVoiceCall = function() { var call = new MatrixCall($scope.room_id); call.onError = $scope.onCallError; + call.onHangup = $scope.onCallHangup; call.placeCall(); + $scope.currentCall = call; } $scope.onCallError = function(errStr) { $scope.feedback = errStr; } + + $scope.onCallHangup = function() { + $scope.feedback = "Call ended"; + $scope.currentCall = undefined; + } }]); diff --git a/webclient/room/room.html b/webclient/room/room.html index 4f5584b568..dceb7322f5 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -98,13 +98,20 @@ - + +
+ Incoming call from {{ currentCall.user_id }} + + +
+ {{ currentCall.state }} {{ feedback }}
{{ state.stream_failure.data.error || "Connection failure" }}
+ -- cgit 1.5.1 From 246b2a3c3e039bd1eef447cf1e7b5f78bcce20a3 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Thu, 28 Aug 2014 17:48:55 +0200 Subject: Renamed matrixService.assignRoomAliases into getRoomAliasAndDisplayName --- webclient/components/matrix/matrix-service.js | 56 ++++++++++++++------------- webclient/home/home-controller.js | 8 +++- webclient/recents/recents-controller.js | 13 ++++--- 3 files changed, 45 insertions(+), 32 deletions(-) (limited to 'webclient') diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js index 2feddac5d8..9fde5496ee 100644 --- a/webclient/components/matrix/matrix-service.js +++ b/webclient/components/matrix/matrix-service.js @@ -420,34 +420,38 @@ angular.module('matrixService', []) /****** Room aliases management ******/ /** - * Enhance data returned by rooms() and publicRooms() by adding room_alias - * & room_display_name which are computed from data already retrieved from the server. - * @param {Array} data the response of rooms() and publicRooms() - * @returns {Array} the same array with enriched objects + * Get the room_alias & room_display_name which are computed from data + * already retrieved from the server. + * @param {Room object} room one element of the array returned by the response + * of rooms() and publicRooms() + * @returns {Object} {room_alias: "...", room_display_name: "..."} */ - assignRoomAliases: function(data) { - for (var i=0; i Date: Thu, 28 Aug 2014 18:14:39 +0200 Subject: ng-show exists. So, for clarity, avoid to use ng-hide and double negation test. --- webclient/room/room.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'webclient') diff --git a/webclient/room/room.html b/webclient/room/room.html index 236ca0a89b..7443b2f77b 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -45,13 +45,13 @@
- + {{ members[msg.user_id].displayname || msg.user_id }} {{ {"join": "joined", "leave": "left", "invite": "invited"}[msg.content.membership] }} {{ msg.content.membership === "invite" ? (msg.state_key || '') : '' }} - - + +
@@ -101,7 +101,7 @@
{{ feedback }} -
+
{{ state.stream_failure.data.error || "Connection failure" }}
-- cgit 1.5.1 From 9b2cb41dcf71590eab75774bc2fe1c42f9de4db1 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Fri, 29 Aug 2014 09:49:03 +0200 Subject: Display emotes in the recents list --- webclient/recents/recents.html | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'webclient') diff --git a/webclient/recents/recents.html b/webclient/recents/recents.html index 6fda6c5c6b..3f025a98d8 100644 --- a/webclient/recents/recents.html +++ b/webclient/recents/recents.html @@ -39,6 +39,11 @@ {{ room.lastMsg.user_id }} sent an image
+
+ + +
+
{{ room.lastMsg.content }}
-- cgit 1.5.1 From 089d1b1b78f4d98afbe1eee070da5e4ad20d6664 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Fri, 29 Aug 2014 09:55:47 +0200 Subject: Recents update: do not care of events coming from the past (they are fired when doing pagination of room messages in the past) --- webclient/recents/recents-controller.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'webclient') diff --git a/webclient/recents/recents-controller.js b/webclient/recents/recents-controller.js index 1ead08cae8..d33d41a922 100644 --- a/webclient/recents/recents-controller.js +++ b/webclient/recents/recents-controller.js @@ -29,7 +29,7 @@ angular.module('RecentsController', ['matrixService', 'eventHandlerService']) // Refresh the list on matrix invitation and message event $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) { var config = matrixService.config(); - if (event.state_key === config.user_id && event.content.membership === "invite") { + if (isLive && event.state_key === config.user_id && event.content.membership === "invite") { console.log("Invited to room " + event.room_id); // FIXME push membership to top level key to match /im/sync event.membership = event.content.membership; @@ -39,7 +39,9 @@ angular.module('RecentsController', ['matrixService', 'eventHandlerService']) } }); $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) { - $scope.rooms[event.room_id].lastMsg = event; + if (isLive) { + $scope.rooms[event.room_id].lastMsg = event; + } }); }; -- cgit 1.5.1 From ee079cd2505e5ef6d66f317f973aec3c2bae9359 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Fri, 29 Aug 2014 11:31:03 +0200 Subject: Added a timeout(40s) to $http stream requests (/events) in order to be notified by an error when there is a network issue. Thus, we can retry with a new request. --- .../components/matrix/event-stream-service.js | 7 ++--- webclient/components/matrix/matrix-service.js | 30 +++++++++++++++++----- 2 files changed, 27 insertions(+), 10 deletions(-) (limited to 'webclient') diff --git a/webclient/components/matrix/event-stream-service.js b/webclient/components/matrix/event-stream-service.js index 4cc2bf4c4e..441148670e 100644 --- a/webclient/components/matrix/event-stream-service.js +++ b/webclient/components/matrix/event-stream-service.js @@ -25,7 +25,8 @@ the eventHandlerService. angular.module('eventStreamService', []) .factory('eventStreamService', ['$q', '$timeout', 'matrixService', 'eventHandlerService', function($q, $timeout, matrixService, eventHandlerService) { var END = "END"; - var TIMEOUT_MS = 30000; + var SERVER_TIMEOUT_MS = 30000; + var CLIENT_TIMEOUT_MS = 40000; var ERR_TIMEOUT_MS = 5000; var settings = { @@ -55,7 +56,7 @@ angular.module('eventStreamService', []) deferred = deferred || $q.defer(); // run the stream from the latest token - matrixService.getEventStream(settings.from, TIMEOUT_MS).then( + matrixService.getEventStream(settings.from, SERVER_TIMEOUT_MS, CLIENT_TIMEOUT_MS).then( function(response) { if (!settings.isActive) { console.log("[EventStream] Got response but now inactive. Dropping data."); @@ -80,7 +81,7 @@ angular.module('eventStreamService', []) } }, function(error) { - if (error.status == 403) { + if (error.status === 403) { settings.shouldPoll = false; } diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js index 9fde5496ee..b56eef6af5 100644 --- a/webclient/components/matrix/matrix-service.js +++ b/webclient/components/matrix/matrix-service.js @@ -41,7 +41,7 @@ angular.module('matrixService', []) var prefixPath = "/matrix/client/api/v1"; var MAPPING_PREFIX = "alias_for_"; - var doRequest = function(method, path, params, data) { + var doRequest = function(method, path, params, data, $httpParams) { if (!config) { console.warn("No config exists. Cannot perform request to "+path); return; @@ -58,7 +58,7 @@ angular.module('matrixService', []) path = prefixPath + path; } - return doBaseRequest(config.homeserver, method, path, params, data, undefined); + return doBaseRequest(config.homeserver, method, path, params, data, undefined, $httpParams); }; var doBaseRequest = function(baseUrl, method, path, params, data, headers, $httpParams) { @@ -343,15 +343,31 @@ angular.module('matrixService', []) return doBaseRequest(config.homeserver, "POST", path, params, file, headers, $httpParams); }, - - // start listening on /events - getEventStream: function(from, timeout) { + + /** + * Start listening on /events + * @param {String} from the token from which to listen events to + * @param {Integer} serverTimeout the time in ms the server will hold open the connection + * @param {Integer} clientTimeout the timeout in ms used at the client HTTP request level + * @returns a promise + */ + getEventStream: function(from, serverTimeout, clientTimeout) { var path = "/events"; var params = { from: from, - timeout: timeout + timeout: serverTimeout }; - return doRequest("GET", path, params); + + var $httpParams; + if (clientTimeout) { + // If the Internet connection is lost, this timeout is used to be able to + // cancel the current request and notify the client so that it can retry with a new request. + $httpParams = { + timeout: clientTimeout + }; + } + + return doRequest("GET", path, params, undefined, $httpParams); }, // Indicates if user authentications details are stored in cache -- cgit 1.5.1 From 1abc93d65c810578b017954bc8cf4adae33446fc Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Fri, 29 Aug 2014 11:58:35 +0200 Subject: Cleaned up ng deps. By convention, angular modules must be listed at first --- webclient/room/room-controller.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'webclient') diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index 910168754c..71b6720604 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -14,9 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities']) -.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventHandlerService', 'mFileUpload', 'mUtilities', '$rootScope', - function($scope, $http, $timeout, $routeParams, $location, matrixService, eventHandlerService, mFileUpload, mUtilities, $rootScope) { +angular.module('RoomController', ['ngSanitize', 'mFileInput']) +.controller('RoomController', ['$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'eventHandlerService', 'mFileUpload', + function($scope, $timeout, $routeParams, $location, $rootScope, matrixService, eventHandlerService, mFileUpload) { 'use strict'; var MESSAGES_PER_PAGINATION = 30; var THUMBNAIL_SIZE = 320; -- cgit 1.5.1 From 41d02ab6742643c755f37665c31afa94c0cc8af5 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 29 Aug 2014 11:29:36 +0100 Subject: More basic functionality for voip calls (like hanging up) --- webclient/components/matrix/matrix-call.js | 70 +++++++++++++++++++++- .../components/matrix/matrix-phone-service.js | 2 +- webclient/room/room.html | 2 +- 3 files changed, 69 insertions(+), 5 deletions(-) (limited to 'webclient') diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js index a5f2529b87..3aab6413fc 100644 --- a/webclient/components/matrix/matrix-call.js +++ b/webclient/components/matrix/matrix-call.js @@ -16,6 +16,25 @@ limitations under the License. 'use strict'; +var forAllVideoTracksOnStream = function(s, f) { + var tracks = s.getVideoTracks(); + for (var i = 0; i < tracks.length; i++) { + f(tracks[i]); + } +} + +var forAllAudioTracksOnStream = function(s, f) { + var tracks = s.getAudioTracks(); + for (var i = 0; i < tracks.length; i++) { + f(tracks[i]); + } +} + +var forAllTracksOnStream = function(s, f) { + forAllVideoTracksOnStream(s, f); + forAllAudioTracksOnStream(s, f); +} + angular.module('MatrixCall', []) .factory('MatrixCall', ['matrixService', 'matrixPhoneService', function MatrixCallFactory(matrixService, matrixPhoneService) { var MatrixCall = function(room_id) { @@ -55,7 +74,15 @@ angular.module('MatrixCall', []) }; MatrixCall.prototype.hangup = function() { - console.trace("Rejecting call "+this.call_id); + console.trace("Ending call "+this.call_id); + + forAllTracksOnStream(this.localAVStream, function(t) { + t.stop(); + }); + forAllTracksOnStream(this.remoteAVStream, function(t) { + t.stop(); + }); + var content = { msgtype: "m.call.hangup", version: 0, @@ -66,6 +93,7 @@ angular.module('MatrixCall', []) }; MatrixCall.prototype.gotUserMediaForInvite = function(stream) { + this.localAVStream = stream; var audioTracks = stream.getAudioTracks(); for (var i = 0; i < audioTracks.length; i++) { audioTracks[i].enabled = true; @@ -86,6 +114,7 @@ angular.module('MatrixCall', []) }; MatrixCall.prototype.gotUserMediaForAnswer = function(stream) { + this.localAVStream = stream; var audioTracks = stream.getAudioTracks(); for (var i = 0; i < audioTracks.length; i++) { audioTracks[i].enabled = true; @@ -172,7 +201,8 @@ angular.module('MatrixCall', []) MatrixCall.prototype.onIceConnectionStateChanged = function() { console.trace("Ice connection state changed to: "+this.peerConn.iceConnectionState); - if (this.peerConn.iceConnectionState == 'completed') { + // ideally we'd consider the call to be connected when we get media but chrome doesn't implement nay of the 'onstarted' events yet + if (this.peerConn.iceConnectionState == 'completed' || this.peerConn.iceConnectionState == 'connected') { this.state = 'connected'; } }; @@ -191,10 +221,44 @@ angular.module('MatrixCall', []) MatrixCall.prototype.onAddStream = function(event) { console.trace("Stream added"+event); + + var s = event.stream; + + this.remoteAVStream = s; + + var self = this; + forAllTracksOnStream(s, function(t) { + // not currently implemented in chrome + t.onstarted = self.onRemoteStreamTrackStarted; + }); + + // not currently implemented in chrome + event.stream.onstarted = this.onRemoteStreamStarted; var player = new Audio(); - player.src = URL.createObjectURL(event.stream); + player.src = URL.createObjectURL(s); player.play(); }; + MatrixCall.prototype.onRemoteStreamStarted = function(event) { + this.state = 'connected'; + }; + + MatrixCall.prototype.onRemoteStreamTrackStarted = function(event) { + this.state = 'connected'; + }; + + MatrixCall.prototype.onHangupReceived = function() { + this.state = 'ended'; + + forAllTracksOnStream(this.localAVStream, function(t) { + t.stop(); + }); + forAllTracksOnStream(this.remoteAVStream, function(t) { + t.stop(); + }); + + this.onHangup(); + }; + return MatrixCall; }]); diff --git a/webclient/components/matrix/matrix-phone-service.js b/webclient/components/matrix/matrix-phone-service.js index 6f96875103..7f1ff531c4 100644 --- a/webclient/components/matrix/matrix-phone-service.js +++ b/webclient/components/matrix/matrix-phone-service.js @@ -59,7 +59,7 @@ angular.module('matrixPhoneService', []) console.trace("Got hangup for unknown call ID "+msg.call_id); return; } - call.onHangup(); + call.onHangupReceived(); matrixPhoneService.allCalls[msg.call_id] = undefined; } }); diff --git a/webclient/room/room.html b/webclient/room/room.html index dceb7322f5..bc3eefaf34 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -104,6 +104,7 @@
+ {{ currentCall.state }} @@ -111,7 +112,6 @@
{{ state.stream_failure.data.error || "Connection failure" }}
- -- cgit 1.5.1 From eab463fda595e9e43b749b731f42043024f702e3 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Fri, 29 Aug 2014 13:30:20 +0200 Subject: Show notifications only when the user is detected as idle --- webclient/room/room-controller.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) (limited to 'webclient') diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index 15710d2ba3..33d896161f 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -15,8 +15,8 @@ limitations under the License. */ angular.module('RoomController', ['ngSanitize', 'mFileInput']) -.controller('RoomController', ['$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'eventHandlerService', 'mFileUpload', 'matrixPhoneService', 'MatrixCall', - function($scope, $timeout, $routeParams, $location, $rootScope, matrixService, eventHandlerService, mFileUpload, matrixPhoneService, MatrixCall) { +.controller('RoomController', ['$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'eventHandlerService', 'mFileUpload', 'mPresence', 'matrixPhoneService', 'MatrixCall', + function($scope, $timeout, $routeParams, $location, $rootScope, matrixService, eventHandlerService, mFileUpload, mPresence, matrixPhoneService, MatrixCall) { 'use strict'; var MESSAGES_PER_PAGINATION = 30; var THUMBNAIL_SIZE = 320; @@ -57,15 +57,14 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) scrollToBottom(); if (window.Notification) { - // FIXME: we should also notify based on a timer or other heuristics - // rather than the window being minimised - if (document.hidden) { + // Show notification when the user is idle + if (matrixService.presence.offline === mPresence.getState()) { var notification = new window.Notification( ($scope.members[event.user_id].displayname || event.user_id) + " (" + ($scope.room_alias || $scope.room_id) + ")", // FIXME: don't leak room_ids here { "body": event.content.body, - "icon": $scope.members[event.user_id].avatar_url, + "icon": $scope.members[event.user_id].avatar_url }); $timeout(function() { notification.close(); @@ -230,7 +229,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) var member = $scope.members[target_user_id]; member.content.membership = chunk.content.membership; } - } + }; var updatePresence = function(chunk) { if (!(chunk.content.user_id in $scope.members)) { @@ -257,10 +256,10 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) if ("avatar_url" in chunk.content) { member.avatar_url = chunk.content.avatar_url; } - } + }; $scope.send = function() { - if ($scope.textInput == "") { + if ($scope.textInput === "") { return; } @@ -269,7 +268,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) // Send the text message var promise; // FIXME: handle other commands too - if ($scope.textInput.indexOf("/me") == 0) { + if ($scope.textInput.indexOf("/me") === 0) { promise = matrixService.sendEmoteMessage($scope.room_id, $scope.textInput.substr(4)); } else { -- cgit 1.5.1 From 5308e3026a088be2c0c0edc406053fe192e827c2 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 29 Aug 2014 13:23:01 +0100 Subject: Change call signalling messages to be their own types of room events rather than room messages with different msgtypes: room messages should be things that the client can display as a unit message to the user. --- webclient/components/matrix/event-handler-service.js | 9 +++++++++ webclient/components/matrix/matrix-call.js | 12 ++++-------- webclient/components/matrix/matrix-phone-service.js | 14 +++++++------- webclient/components/matrix/matrix-service.js | 8 ++++++-- webclient/room/room-controller.js | 2 +- 5 files changed, 27 insertions(+), 18 deletions(-) (limited to 'webclient') diff --git a/webclient/components/matrix/event-handler-service.js b/webclient/components/matrix/event-handler-service.js index 2f7580d682..b6e5c2eaac 100644 --- a/webclient/components/matrix/event-handler-service.js +++ b/webclient/components/matrix/event-handler-service.js @@ -31,6 +31,7 @@ angular.module('eventHandlerService', []) var MSG_EVENT = "MSG_EVENT"; var MEMBER_EVENT = "MEMBER_EVENT"; var PRESENCE_EVENT = "PRESENCE_EVENT"; + var CALL_EVENT = "CALL_EVENT"; var InitialSyncDeferred = $q.defer(); @@ -94,11 +95,16 @@ angular.module('eventHandlerService', []) $rootScope.presence[event.content.user_id] = event; $rootScope.$broadcast(PRESENCE_EVENT, event, isLiveEvent); }; + + var handleCallEvent = function(event, isLiveEvent) { + $rootScope.$broadcast(CALL_EVENT, event, isLiveEvent); + }; return { MSG_EVENT: MSG_EVENT, MEMBER_EVENT: MEMBER_EVENT, PRESENCE_EVENT: PRESENCE_EVENT, + CALL_EVENT: CALL_EVENT, handleEvent: function(event, isLiveEvent) { @@ -116,6 +122,9 @@ angular.module('eventHandlerService', []) console.log("Unable to handle event type " + event.type); break; } + if (event.type.indexOf('m.call.') == 0) { + handleCallEvent(event, isLiveEvent); + } }, // isLiveEvents determines whether notifications should be shown, whether diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js index 3aab6413fc..b66c914d7b 100644 --- a/webclient/components/matrix/matrix-call.js +++ b/webclient/components/matrix/matrix-call.js @@ -84,11 +84,10 @@ angular.module('MatrixCall', []) }); var content = { - msgtype: "m.call.hangup", version: 0, call_id: this.call_id, }; - matrixService.sendMessage(this.room_id, undefined, content).then(this.messageSent, this.messageSendFailed); + matrixService.sendEvent(this.room_id, 'm.call.hangup', undefined, content).then(this.messageSent, this.messageSendFailed); this.state = 'ended'; }; @@ -135,12 +134,11 @@ angular.module('MatrixCall', []) 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); + matrixService.sendEvent(this.room_id, 'm.call.candidate', undefined, content).then(this.messageSent, this.messageSendFailed); } } @@ -163,12 +161,11 @@ angular.module('MatrixCall', []) 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); + matrixService.sendEvent(this.room_id, 'm.call.invite', undefined, content).then(this.messageSent, this.messageSendFailed); this.state = 'invite_sent'; }; @@ -176,12 +173,11 @@ angular.module('MatrixCall', []) console.trace("Created answer: "+description); this.peerConn.setLocalDescription(description); var content = { - msgtype: "m.call.answer", version: 0, call_id: this.call_id, answer: description }; - matrixService.sendMessage(this.room_id, undefined, content).then(this.messageSent, this.messageSendFailed); + matrixService.sendEvent(this.room_id, 'm.call.answer', undefined, content).then(this.messageSent, this.messageSendFailed); this.state = 'connecting'; }; diff --git a/webclient/components/matrix/matrix-phone-service.js b/webclient/components/matrix/matrix-phone-service.js index 7f1ff531c4..d9e2e8baa3 100644 --- a/webclient/components/matrix/matrix-phone-service.js +++ b/webclient/components/matrix/matrix-phone-service.js @@ -21,39 +21,39 @@ angular.module('matrixPhoneService', []) var matrixPhoneService = function() { }; - matrixPhoneService.CALL_EVENT = "CALL_EVENT"; + matrixPhoneService.INCOMING_CALL_EVENT = "INCOMING_CALL_EVENT"; matrixPhoneService.allCalls = {}; matrixPhoneService.callPlaced = function(call) { matrixPhoneService.allCalls[call.call_id] = call; }; - $rootScope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) { + $rootScope.$on(eventHandlerService.CALL_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') { + if (event.type == 'm.call.invite') { var MatrixCall = $injector.get('MatrixCall'); var call = new MatrixCall(event.room_id); call.call_id = msg.call_id; call.initWithInvite(msg); matrixPhoneService.allCalls[call.call_id] = call; - $rootScope.$broadcast(matrixPhoneService.CALL_EVENT, call); - } else if (msg.msgtype == 'm.call.answer') { + $rootScope.$broadcast(matrixPhoneService.INCOMING_CALL_EVENT, call); + } else if (event.type == 'm.call.answer') { var call = matrixPhoneService.allCalls[msg.call_id]; if (!call) { console.trace("Got answer for unknown call ID "+msg.call_id); return; } call.receivedAnswer(msg); - } else if (msg.msgtype == 'm.call.candidate') { + } else if (event.type == 'm.call.candidate') { var call = matrixPhoneService.allCalls[msg.call_id]; if (!call) { console.trace("Got candidate for unknown call ID "+msg.call_id); return; } call.gotRemoteIceCandidate(msg.candidate); - } else if (msg.msgtype == 'm.call.hangup') { + } else if (event.type == 'm.call.hangup') { var call = matrixPhoneService.allCalls[msg.call_id]; if (!call) { console.trace("Got hangup for unknown call ID "+msg.call_id); diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js index b56eef6af5..06f920b15d 100644 --- a/webclient/components/matrix/matrix-service.js +++ b/webclient/components/matrix/matrix-service.js @@ -172,9 +172,9 @@ angular.module('matrixService', []) return doRequest("GET", path, undefined, {}); }, - sendMessage: function(room_id, txn_id, content) { + sendEvent: function(room_id, eventType, txn_id, content) { // The REST path spec - var path = "/rooms/$room_id/send/m.room.message/$txn_id"; + var path = "/rooms/$room_id/send/"+eventType+"/$txn_id"; if (!txn_id) { txn_id = "m" + new Date().getTime(); @@ -190,6 +190,10 @@ angular.module('matrixService', []) return doRequest("PUT", path, undefined, content); }, + sendMessage: function(room_id, txn_id, content) { + return self.sendObject(room_id, 'm.room.message', txn_id, content); + }, + // Send a text message sendTextMessage: function(room_id, body, msg_id) { var content = { diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index 15710d2ba3..8bb48b3692 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -83,7 +83,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) updatePresence(event); }); - $rootScope.$on(matrixPhoneService.CALL_EVENT, function(ngEvent, call) { + $rootScope.$on(matrixPhoneService.INCOMING_CALL_EVENT, function(ngEvent, call) { console.trace("incoming call"); call.onError = $scope.onCallError; call.onHangup = $scope.onCallHangup; -- cgit 1.5.1 From cc413be4461ee58c6ada8828b61b22a403d5d65d Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 29 Aug 2014 13:28:04 +0100 Subject: Don't break if the call ends before it connects --- webclient/components/matrix/matrix-call.js | 32 +++++++++++++++++++----------- 1 file changed, 20 insertions(+), 12 deletions(-) (limited to 'webclient') diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js index b66c914d7b..45d00ee792 100644 --- a/webclient/components/matrix/matrix-call.js +++ b/webclient/components/matrix/matrix-call.js @@ -76,12 +76,16 @@ angular.module('MatrixCall', []) MatrixCall.prototype.hangup = function() { console.trace("Ending call "+this.call_id); - forAllTracksOnStream(this.localAVStream, function(t) { - t.stop(); - }); - forAllTracksOnStream(this.remoteAVStream, function(t) { - t.stop(); - }); + if (this.localAVStream) { + forAllTracksOnStream(this.localAVStream, function(t) { + t.stop(); + }); + } + if (this.remoteAVStream) { + forAllTracksOnStream(this.remoteAVStream, function(t) { + t.stop(); + }); + } var content = { version: 0, @@ -246,12 +250,16 @@ angular.module('MatrixCall', []) MatrixCall.prototype.onHangupReceived = function() { this.state = 'ended'; - forAllTracksOnStream(this.localAVStream, function(t) { - t.stop(); - }); - forAllTracksOnStream(this.remoteAVStream, function(t) { - t.stop(); - }); + if (this.localAVStream) { + forAllTracksOnStream(this.localAVStream, function(t) { + t.stop(); + }); + } + if (this.remoteAVStream) { + forAllTracksOnStream(this.remoteAVStream, function(t) { + t.stop(); + }); + } this.onHangup(); }; -- cgit 1.5.1 From 073bec48308faa404d3a66779aedb6c61447be58 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 29 Aug 2014 13:45:15 +0100 Subject: Oops, forgot a s/sendObject/sendEvent/ - make messages work again! --- webclient/components/matrix/matrix-service.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webclient') diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js index 06f920b15d..8543491dca 100644 --- a/webclient/components/matrix/matrix-service.js +++ b/webclient/components/matrix/matrix-service.js @@ -191,7 +191,7 @@ angular.module('matrixService', []) }, sendMessage: function(room_id, txn_id, content) { - return self.sendObject(room_id, 'm.room.message', txn_id, content); + return this.sendEvent(room_id, 'm.room.message', txn_id, content); }, // Send a text message -- cgit 1.5.1 From 4b7f6dd7fcd274d362a28182754f9b077b9c8232 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 29 Aug 2014 14:00:20 +0100 Subject: Only show voice call button if there are exactly 2 members in the room. Also hide the somewhat user unfriendly call state. --- webclient/room/room-controller.js | 6 +++++- webclient/room/room.html | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) (limited to 'webclient') diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index 6232ce8ed3..09dac85d26 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -51,7 +51,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) objDiv.scrollTop = objDiv.scrollHeight; }, 0); }; - + $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) { if (isLive && event.room_id === $scope.room_id) { scrollToBottom(); @@ -88,6 +88,10 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) call.onHangup = $scope.onCallHangup; $scope.currentCall = call; }); + + $scope.memberCount = function() { + return Object.keys($scope.members).length; + }; $scope.paginateMore = function() { if ($scope.state.can_paginate) { diff --git a/webclient/room/room.html b/webclient/room/room.html index 572c52e64e..a3514c3a91 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -98,14 +98,14 @@ - +
Incoming call from {{ currentCall.user_id }}
- {{ currentCall.state }} + {{ currentCall.state }} {{ feedback }} -- cgit 1.5.1