First basic working VoIP call support

This commit is contained in:
David Baker 2014-08-28 19:03:34 +01:00
parent 7d34a1c108
commit ca7426eee0
4 changed files with 162 additions and 17 deletions

View file

@ -21,6 +21,7 @@ angular.module('MatrixCall', [])
var MatrixCall = function(room_id) { var MatrixCall = function(room_id) {
this.room_id = room_id; this.room_id = room_id;
this.call_id = "c" + new Date().getTime(); this.call_id = "c" + new Date().getTime();
this.state = 'fledgling';
} }
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
@ -30,19 +31,75 @@ angular.module('MatrixCall', [])
MatrixCall.prototype.placeCall = function() { MatrixCall.prototype.placeCall = function() {
self = this; self = this;
matrixPhoneService.callPlaced(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 = new window.RTCPeerConnection({"iceServers":[{"urls":"stun:stun.l.google.com:19302"}]})
this.peerConn.addStream(stream); self= this;
self = this; this.peerConn.oniceconnectionstatechange = function() { self.onIceConnectionStateChanged(); };
this.peerConn.onicecandidate = function(c) { self.gotLocalIceCandidate(c); }; 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) { this.peerConn.createOffer(function(d) {
self.gotLocalOffer(d); self.gotLocalOffer(d);
}, function(e) { }, function(e) {
self.getLocalOfferFailed(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) { MatrixCall.prototype.gotLocalIceCandidate = function(event) {
@ -59,11 +116,21 @@ angular.module('MatrixCall', [])
} }
MatrixCall.prototype.gotRemoteIceCandidate = function(cand) { 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) { MatrixCall.prototype.gotLocalOffer = function(description) {
console.trace(description); console.trace("Created offer: "+description);
this.peerConn.setLocalDescription(description); this.peerConn.setLocalDescription(description);
var content = { var content = {
@ -73,6 +140,20 @@ angular.module('MatrixCall', [])
offer: description offer: description
}; };
matrixService.sendMessage(this.room_id, undefined, content).then(this.messageSent, this.messageSendFailed); 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() { MatrixCall.prototype.messageSent = function() {
@ -89,5 +170,31 @@ angular.module('MatrixCall', [])
this.onError("Couldn't start capturing audio! Is your microphone set up?"); 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; return MatrixCall;
}]); }]);

View file

@ -17,19 +17,14 @@ limitations under the License.
'use strict'; 'use strict';
angular.module('matrixPhoneService', []) 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() { var matrixPhoneService = function() {
} };
matrixPhoneService.CALL_EVENT = "CALL_EVENT"; matrixPhoneService.CALL_EVENT = "CALL_EVENT";
matrixPhoneService.allCalls = {}; matrixPhoneService.allCalls = {};
MatrixCall.prototype.placeCall = function() { matrixPhoneService.callPlaced = function(call) {
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; matrixPhoneService.allCalls[call.call_id] = call;
}; };
@ -38,17 +33,34 @@ angular.module('matrixPhoneService', [])
if (event.user_id == matrixService.config().user_id) return; if (event.user_id == matrixService.config().user_id) return;
var msg = event.content; var msg = event.content;
if (msg.msgtype == 'm.call.invite') { if (msg.msgtype == 'm.call.invite') {
var MatrixCall = $injector.get('MatrixCall');
var call = new MatrixCall(event.room_id); var call = new MatrixCall(event.room_id);
call.call_id = msg.call_id; call.call_id = msg.call_id;
$rootScope.$broadcast(matrixPhoneService.CALL_EVENT, call); call.initWithInvite(msg);
matrixPhoneService.allCalls[call.call_id] = call; 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') { } else if (msg.msgtype == 'm.call.candidate') {
call = matrixPhoneService.allCalls[msg.call_id]; var call = matrixPhoneService.allCalls[msg.call_id];
if (!call) { if (!call) {
console.trace("Got candidate for unknown call ID "+msg.call_id); console.trace("Got candidate for unknown call ID "+msg.call_id);
return; return;
} }
call.gotRemoteIceCandidate(msg.candidate); 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;
} }
}); });

View file

@ -85,6 +85,9 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities'])
$rootScope.$on(matrixPhoneService.CALL_EVENT, function(ngEvent, call) { $rootScope.$on(matrixPhoneService.CALL_EVENT, function(ngEvent, call) {
console.trace("incoming call"); console.trace("incoming call");
call.onError = $scope.onCallError;
call.onHangup = $scope.onCallHangup;
$scope.currentCall = call;
}); });
$scope.paginateMore = function() { $scope.paginateMore = function() {
@ -94,6 +97,15 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities'])
} }
}; };
$scope.answerCall = function() {
$scope.currentCall.answer();
};
$scope.hangupCall = function() {
$scope.currentCall.hangup();
$scope.currentCall = undefined;
};
var paginate = function(numItems) { var paginate = function(numItems) {
// console.log("paginate " + numItems); // console.log("paginate " + numItems);
if ($scope.state.paginating || !$scope.room_id) { if ($scope.state.paginating || !$scope.room_id) {
@ -438,10 +450,17 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities'])
$scope.startVoiceCall = function() { $scope.startVoiceCall = function() {
var call = new MatrixCall($scope.room_id); var call = new MatrixCall($scope.room_id);
call.onError = $scope.onCallError; call.onError = $scope.onCallError;
call.onHangup = $scope.onCallHangup;
call.placeCall(); call.placeCall();
$scope.currentCall = call;
} }
$scope.onCallError = function(errStr) { $scope.onCallError = function(errStr) {
$scope.feedback = errStr; $scope.feedback = errStr;
} }
$scope.onCallHangup = function() {
$scope.feedback = "Call ended";
$scope.currentCall = undefined;
}
}]); }]);

View file

@ -98,13 +98,20 @@
<button ng-click="inviteUser(userIDToInvite)">Invite</button> <button ng-click="inviteUser(userIDToInvite)">Invite</button>
</span> </span>
<button ng-click="leaveRoom()">Leave</button> <button ng-click="leaveRoom()">Leave</button>
<button ng-click="startVoiceCall()">Voice Call</button> <button ng-click="startVoiceCall()" ng-show="currentCall == undefined">Voice Call</button>
<div ng-show="currentCall.state == 'ringing'">
Incoming call from {{ currentCall.user_id }}
<button ng-click="answerCall()">Answer</button>
<button ng-click="hangupCall()">Reject</button>
</div>
{{ currentCall.state }}
</div> </div>
{{ feedback }} {{ feedback }}
<div ng-hide="!state.stream_failure"> <div ng-hide="!state.stream_failure">
{{ state.stream_failure.data.error || "Connection failure" }} {{ state.stream_failure.data.error || "Connection failure" }}
</div> </div>
<audio id="remoteAudio" autoplay="autoplay"></audio>
</div> </div>
</div> </div>