mirror of
https://mau.dev/maunium/synapse.git
synced 2024-08-28 13:11:56 +00:00
Video calling (in a tiny box at the moment)
This commit is contained in:
parent
84372cef4a
commit
1fb2c831e8
@ -150,6 +150,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
|
||||
}
|
||||
call.onError = $scope.onCallError;
|
||||
call.onHangup = $scope.onCallHangup;
|
||||
call.localVideoElement = angular.element('#localVideo')[0];
|
||||
call.remoteVideoElement = angular.element('#remoteVideo')[0];
|
||||
$rootScope.currentCall = call;
|
||||
});
|
||||
|
||||
|
@ -89,6 +89,21 @@ a:active { color: #000; }
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#localVideo {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 160px;
|
||||
width: 128px;
|
||||
height: 72px;
|
||||
}
|
||||
#remoteVideo {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 300px;
|
||||
width: 128px;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
#headerContent {
|
||||
color: #ccc;
|
||||
max-width: 1280px;
|
||||
@ -96,6 +111,7 @@ a:active { color: #000; }
|
||||
text-align: right;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#headerContent a:link,
|
||||
|
@ -51,6 +51,12 @@ angular.module('MatrixCall', [])
|
||||
// a queue for candidates waiting to go out. We try to amalgamate candidates into a single candidate message where possible
|
||||
this.candidateSendQueue = [];
|
||||
this.candidateSendTries = 0;
|
||||
|
||||
var self = this;
|
||||
$rootScope.$watch(this.remoteVideoElement, function (oldValue, newValue) {
|
||||
self.tryPlayRemoteStream();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
MatrixCall.CALL_TIMEOUT = 60000;
|
||||
@ -71,13 +77,39 @@ angular.module('MatrixCall', [])
|
||||
return pc;
|
||||
}
|
||||
|
||||
MatrixCall.prototype.placeCall = function(config) {
|
||||
MatrixCall.prototype.getUserMediaVideoContraints = function(callType) {
|
||||
switch (callType) {
|
||||
case 'voice':
|
||||
return ({audio: true, video: false});
|
||||
case 'video':
|
||||
return ({audio: true, video: {
|
||||
mandatory: {
|
||||
minWidth: 640,
|
||||
maxWidth: 640,
|
||||
minHeight: 360,
|
||||
maxHeight: 360,
|
||||
}
|
||||
}});
|
||||
}
|
||||
};
|
||||
|
||||
MatrixCall.prototype.placeVoiceCall = function() {
|
||||
this.placeCallWithConstraints(this.getUserMediaVideoContraints('voice'));
|
||||
this.type = 'voice';
|
||||
};
|
||||
|
||||
MatrixCall.prototype.placeVideoCall = function(config) {
|
||||
this.placeCallWithConstraints(this.getUserMediaVideoContraints('video'));
|
||||
this.type = 'video';
|
||||
};
|
||||
|
||||
MatrixCall.prototype.placeCallWithConstraints = function(constraints) {
|
||||
var self = this;
|
||||
matrixPhoneService.callPlaced(this);
|
||||
navigator.getUserMedia({audio: config.audio, video: config.video}, function(s) { self.gotUserMediaForInvite(s); }, function(e) { self.getUserMediaFailed(e); });
|
||||
navigator.getUserMedia(constraints, function(s) { self.gotUserMediaForInvite(s); }, function(e) { self.getUserMediaFailed(e); });
|
||||
this.state = 'wait_local_media';
|
||||
this.direction = 'outbound';
|
||||
this.config = config;
|
||||
this.config = constraints;
|
||||
};
|
||||
|
||||
MatrixCall.prototype.initWithInvite = function(event) {
|
||||
@ -110,7 +142,7 @@ angular.module('MatrixCall', [])
|
||||
console.log("Answering call "+this.call_id);
|
||||
var self = this;
|
||||
if (!this.localAVStream && !this.waitForLocalAVStream) {
|
||||
navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMediaForAnswer(s); }, function(e) { self.getUserMediaFailed(e); });
|
||||
navigator.getUserMedia(this.getUserMediaVideoContraints(this.type), function(s) { self.gotUserMediaForAnswer(s); }, function(e) { self.getUserMediaFailed(e); });
|
||||
this.state = 'wait_local_media';
|
||||
} else if (this.localAVStream) {
|
||||
this.gotUserMediaForAnswer(this.localAVStream);
|
||||
@ -156,6 +188,13 @@ angular.module('MatrixCall', [])
|
||||
}
|
||||
if (this.state == 'ended') return;
|
||||
|
||||
if (this.localVideoElement && this.type == 'video') {
|
||||
var vidTrack = stream.getVideoTracks()[0];
|
||||
this.localVideoElement.src = URL.createObjectURL(stream);
|
||||
this.localVideoElement.muted = true;
|
||||
this.localVideoElement.play();
|
||||
}
|
||||
|
||||
this.localAVStream = stream;
|
||||
var audioTracks = stream.getAudioTracks();
|
||||
for (var i = 0; i < audioTracks.length; i++) {
|
||||
@ -177,6 +216,13 @@ angular.module('MatrixCall', [])
|
||||
MatrixCall.prototype.gotUserMediaForAnswer = function(stream) {
|
||||
if (this.state == 'ended') return;
|
||||
|
||||
if (this.localVideoElement && this.type == 'video') {
|
||||
var vidTrack = stream.getVideoTracks()[0];
|
||||
this.localVideoElement.src = URL.createObjectURL(stream);
|
||||
this.localVideoElement.muted = true;
|
||||
this.localVideoElement.play();
|
||||
}
|
||||
|
||||
this.localAVStream = stream;
|
||||
var audioTracks = stream.getAudioTracks();
|
||||
for (var i = 0; i < audioTracks.length; i++) {
|
||||
@ -187,7 +233,7 @@ angular.module('MatrixCall', [])
|
||||
var constraints = {
|
||||
'mandatory': {
|
||||
'OfferToReceiveAudio': true,
|
||||
'OfferToReceiveVideo': false
|
||||
'OfferToReceiveVideo': this.type == 'video'
|
||||
},
|
||||
};
|
||||
this.peerConn.createAnswer(function(d) { self.createdAnswer(d); }, function(e) {}, constraints);
|
||||
@ -218,6 +264,7 @@ angular.module('MatrixCall', [])
|
||||
this.state = 'connecting';
|
||||
};
|
||||
|
||||
|
||||
MatrixCall.prototype.gotLocalOffer = function(description) {
|
||||
console.log("Created offer: "+description);
|
||||
|
||||
@ -305,6 +352,14 @@ angular.module('MatrixCall', [])
|
||||
|
||||
this.remoteAVStream = s;
|
||||
|
||||
if (this.direction == 'inbound') {
|
||||
if (s.getVideoTracks().length > 0) {
|
||||
this.type = 'video';
|
||||
} else {
|
||||
this.type = 'voice';
|
||||
}
|
||||
}
|
||||
|
||||
var self = this;
|
||||
forAllTracksOnStream(s, function(t) {
|
||||
// not currently implemented in chrome
|
||||
@ -314,9 +369,16 @@ angular.module('MatrixCall', [])
|
||||
event.stream.onended = function(e) { self.onRemoteStreamEnded(e); };
|
||||
// not currently implemented in chrome
|
||||
event.stream.onstarted = function(e) { self.onRemoteStreamStarted(e); };
|
||||
var player = new Audio();
|
||||
player.src = URL.createObjectURL(s);
|
||||
player.play();
|
||||
|
||||
this.tryPlayRemoteStream();
|
||||
};
|
||||
|
||||
MatrixCall.prototype.tryPlayRemoteStream = function(event) {
|
||||
if (this.remoteVideoElement && this.remoteAVStream) {
|
||||
var player = this.remoteVideoElement;
|
||||
player.src = URL.createObjectURL(this.remoteAVStream);
|
||||
player.play();
|
||||
}
|
||||
};
|
||||
|
||||
MatrixCall.prototype.onRemoteStreamStarted = function(event) {
|
||||
@ -350,7 +412,7 @@ angular.module('MatrixCall', [])
|
||||
this.state = 'ended';
|
||||
this.hangupParty = 'remote';
|
||||
this.stopAllMedia();
|
||||
if (this.peerConn.signalingState != 'closed') this.peerConn.close();
|
||||
if (this.peerConn && this.peerConn.signalingState != 'closed') this.peerConn.close();
|
||||
if (this.onHangup) this.onHangup(this);
|
||||
};
|
||||
|
||||
@ -361,13 +423,15 @@ angular.module('MatrixCall', [])
|
||||
newCall.waitForLocalAVStream = true;
|
||||
} else if (this.state == 'create_offer') {
|
||||
console.log("Handing local stream to new call");
|
||||
newCall.localAVStream = this.localAVStream;
|
||||
newCall.gotUserMediaForAnswer(this.localAVStream);
|
||||
delete(this.localAVStream);
|
||||
} else if (this.state == 'invite_sent') {
|
||||
console.log("Handing local stream to new call");
|
||||
newCall.localAVStream = this.localAVStream;
|
||||
newCall.gotUserMediaForAnswer(this.localAVStream);
|
||||
delete(this.localAVStream);
|
||||
}
|
||||
newCall.localVideoElement = this.localVideoElement;
|
||||
newCall.remoteVideoElement = this.remoteVideoElement;
|
||||
this.successor = newCall;
|
||||
this.hangup(true);
|
||||
};
|
||||
|
@ -58,7 +58,8 @@
|
||||
<br />
|
||||
<span id="callState">
|
||||
<span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
|
||||
<span ng-show="currentCall.state == 'ringing'">Incoming Call</span>
|
||||
<span ng-show="currentCall.state == 'ringing' && currentCall.type == 'video'">Incoming Video Call</span>
|
||||
<span ng-show="currentCall.state == 'ringing' && currentCall.type == 'voice'">Incoming Voice Call</span>
|
||||
<span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
|
||||
<span ng-show="currentCall.state == 'connected'">Call Connected</span>
|
||||
<span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'remote'">Call Rejected</span>
|
||||
@ -71,7 +72,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<span ng-show="currentCall.state == 'ringing'">
|
||||
<button ng-click="answerCall()">Answer</button>
|
||||
<button ng-click="answerCall()">Answer {{ currentCall.type }} call</button>
|
||||
<button ng-click="hangupCall()">Reject</button>
|
||||
</span>
|
||||
<button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button>
|
||||
@ -92,6 +93,9 @@
|
||||
<source src="media/busy.mp3" type="audio/mpeg" />
|
||||
</audio>
|
||||
</div>
|
||||
<video id="localVideo" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'connecting' || currentCall.state == 'invite_sent')"></video>
|
||||
<video id="remoteVideo" ng-show="currentCall && currentCall.type == 'video' && currentCall.state == 'connected'"></video>
|
||||
|
||||
<a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
|
||||
|
||||
<button ng-click='goToPage("/")'>Home</button>
|
||||
|
@ -837,7 +837,9 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
|
||||
var call = new MatrixCall($scope.room_id);
|
||||
call.onError = $rootScope.onCallError;
|
||||
call.onHangup = $rootScope.onCallHangup;
|
||||
call.placeCall({audio: true, video: false});
|
||||
// remote video element is used for playing audio in voice calls
|
||||
call.remoteVideoElement = angular.element('#remoteVideo')[0];
|
||||
call.placeVoiceCall();
|
||||
$rootScope.currentCall = call;
|
||||
};
|
||||
|
||||
@ -845,7 +847,9 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
|
||||
var call = new MatrixCall($scope.room_id);
|
||||
call.onError = $rootScope.onCallError;
|
||||
call.onHangup = $rootScope.onCallHangup;
|
||||
call.placeCall({audio: true, video: true});
|
||||
call.localVideoElement = angular.element('#localVideo')[0];
|
||||
call.remoteVideoElement = angular.element('#remoteVideo')[0];
|
||||
call.placeVideoCall();
|
||||
$rootScope.currentCall = call;
|
||||
};
|
||||
|
||||
|
@ -173,6 +173,7 @@
|
||||
</span>
|
||||
<button ng-click="leaveRoom()" ng-disabled="state.permission_denied">Leave</button>
|
||||
<button ng-click="startVoiceCall()" ng-show="(currentCall == undefined || currentCall.state == 'ended') && memberCount() == 2" ng-disabled="state.permission_denied">Voice Call</button>
|
||||
<button ng-click="startVideoCall()" ng-show="(currentCall == undefined || currentCall.state == 'ended') && memberCount() == 2" ng-disabled="state.permission_denied">Video Call</button>
|
||||
</div>
|
||||
|
||||
{{ feedback }}
|
||||
|
Loading…
Reference in New Issue
Block a user