mirror of
https://mau.dev/maunium/synapse.git
synced 2024-08-25 03:35:28 +00:00
Various fixes to try & make openwebrtc safari extension work (still doesn't work).
This commit is contained in:
parent
1a62f1299d
commit
7d15452c30
@ -112,8 +112,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
|
|||||||
if (!$rootScope.currentCall) {
|
if (!$rootScope.currentCall) {
|
||||||
// This causes the still frame to be flushed out of the video elements,
|
// This causes the still frame to be flushed out of the video elements,
|
||||||
// avoiding a flash of the last frame of the previous call when starting the next
|
// avoiding a flash of the last frame of the previous call when starting the next
|
||||||
angular.element('#localVideo')[0].load();
|
if (angular.element('#localVideo')[0].load) angular.element('#localVideo')[0].load();
|
||||||
angular.element('#remoteVideo')[0].load();
|
if (angular.element('#remoteVideo')[0].load) angular.element('#remoteVideo')[0].load();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -187,8 +187,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
|
|||||||
}
|
}
|
||||||
call.onError = $scope.onCallError;
|
call.onError = $scope.onCallError;
|
||||||
call.onHangup = $scope.onCallHangup;
|
call.onHangup = $scope.onCallHangup;
|
||||||
call.localVideoElement = angular.element('#localVideo')[0];
|
call.localVideoSelector = '#localVideo';
|
||||||
call.remoteVideoElement = angular.element('#remoteVideo')[0];
|
call.remoteVideoSelector = '#remoteVideo';
|
||||||
$rootScope.currentCall = call;
|
$rootScope.currentCall = call;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -136,17 +136,17 @@ textarea, input {
|
|||||||
transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
|
transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
#localVideo.mini {
|
.mini #localVideo {
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 130px;
|
left: 130px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#localVideo.large {
|
.large #localVideo {
|
||||||
top: 70px;
|
top: 70px;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#localVideo.ended {
|
.ended #localVideo {
|
||||||
-webkit-filter: grayscale(1);
|
-webkit-filter: grayscale(1);
|
||||||
filter: grayscale(1);
|
filter: grayscale(1);
|
||||||
}
|
}
|
||||||
@ -157,19 +157,19 @@ textarea, input {
|
|||||||
transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
|
transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
#remoteVideo.mini {
|
.mini #remoteVideo {
|
||||||
left: 260px;
|
left: 260px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
width: 128px;
|
width: 128px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#remoteVideo.large {
|
.large #remoteVideo {
|
||||||
left: 0px;
|
left: 0px;
|
||||||
top: 50px;
|
top: 50px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#remoteVideo.ended {
|
.ended #remoteVideo {
|
||||||
-webkit-filter: grayscale(1);
|
-webkit-filter: grayscale(1);
|
||||||
filter: grayscale(1);
|
filter: grayscale(1);
|
||||||
}
|
}
|
||||||
|
@ -35,14 +35,14 @@ var forAllTracksOnStream = function(s, f) {
|
|||||||
forAllAudioTracksOnStream(s, f);
|
forAllAudioTracksOnStream(s, f);
|
||||||
}
|
}
|
||||||
|
|
||||||
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
|
|
||||||
window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection; // but not mozRTCPeerConnection because its interface is not compatible
|
|
||||||
window.RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window.mozRTCSessionDescription;
|
|
||||||
window.RTCIceCandidate = window.RTCIceCandidate || window.webkitRTCIceCandidate || window.mozRTCIceCandidate;
|
|
||||||
|
|
||||||
angular.module('MatrixCall', [])
|
angular.module('MatrixCall', [])
|
||||||
.factory('MatrixCall', ['matrixService', 'matrixPhoneService', 'modelService', '$rootScope', '$timeout', function MatrixCallFactory(matrixService, matrixPhoneService, modelService, $rootScope, $timeout) {
|
.factory('MatrixCall', ['matrixService', 'matrixPhoneService', 'modelService', '$rootScope', '$timeout', function MatrixCallFactory(matrixService, matrixPhoneService, modelService, $rootScope, $timeout) {
|
||||||
$rootScope.isWebRTCSupported = function () {
|
$rootScope.isWebRTCSupported = function () {
|
||||||
|
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
|
||||||
|
window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection; // but not mozRTCPeerConnection because its interface is not compatible
|
||||||
|
window.RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window.mozRTCSessionDescription;
|
||||||
|
window.RTCIceCandidate = window.RTCIceCandidate || window.webkitRTCIceCandidate || window.mozRTCIceCandidate;
|
||||||
|
|
||||||
return !!(navigator.getUserMedia || window.RTCPeerConnection || window.RTCSessionDescription || window.RTCIceCandidate);
|
return !!(navigator.getUserMedia || window.RTCPeerConnection || window.RTCSessionDescription || window.RTCIceCandidate);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -57,7 +57,7 @@ angular.module('MatrixCall', [])
|
|||||||
this.candidateSendTries = 0;
|
this.candidateSendTries = 0;
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
$rootScope.$watch(this.remoteVideoElement, function (oldValue, newValue) {
|
$rootScope.$watch(this.getRemoteVideoElement(), function (oldValue, newValue) {
|
||||||
self.tryPlayRemoteStream();
|
self.tryPlayRemoteStream();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -252,8 +252,8 @@ angular.module('MatrixCall', [])
|
|||||||
|
|
||||||
// pausing now keeps the last frame (ish) of the video call in the video element
|
// pausing now keeps the last frame (ish) of the video call in the video element
|
||||||
// rather than it just turning black straight away
|
// rather than it just turning black straight away
|
||||||
if (this.remoteVideoElement) this.remoteVideoElement.pause();
|
if (this.getRemoteVideoElement() && this.getRemoteVideoElement().pause) this.getRemoteVideoElement().pause();
|
||||||
if (this.localVideoElement) this.localVideoElement.pause();
|
if (this.getLocalVideoElement() && this.getLocalVideoElement().pause) this.getLocalVideoElement().pause();
|
||||||
|
|
||||||
this.stopAllMedia();
|
this.stopAllMedia();
|
||||||
if (this.peerConn) this.peerConn.close();
|
if (this.peerConn) this.peerConn.close();
|
||||||
@ -278,11 +278,18 @@ angular.module('MatrixCall', [])
|
|||||||
}
|
}
|
||||||
if (this.state == 'ended') return;
|
if (this.state == 'ended') return;
|
||||||
|
|
||||||
if (this.localVideoElement && this.type == 'video') {
|
var videoEl = this.getLocalVideoElement();
|
||||||
|
|
||||||
|
if (videoEl && this.type == 'video') {
|
||||||
var vidTrack = stream.getVideoTracks()[0];
|
var vidTrack = stream.getVideoTracks()[0];
|
||||||
this.localVideoElement.src = URL.createObjectURL(stream);
|
videoEl.autoplay = true;
|
||||||
this.localVideoElement.muted = true;
|
videoEl.src = URL.createObjectURL(stream);
|
||||||
this.localVideoElement.play();
|
videoEl.muted = true;
|
||||||
|
var self = this;
|
||||||
|
$timeout(function() {
|
||||||
|
var vel = self.getLocalVideoElement();
|
||||||
|
if (vel.play) vel.play();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.localAVStream = stream;
|
this.localAVStream = stream;
|
||||||
@ -306,11 +313,18 @@ angular.module('MatrixCall', [])
|
|||||||
MatrixCall.prototype.gotUserMediaForAnswer = function(stream) {
|
MatrixCall.prototype.gotUserMediaForAnswer = function(stream) {
|
||||||
if (this.state == 'ended') return;
|
if (this.state == 'ended') return;
|
||||||
|
|
||||||
if (this.localVideoElement && this.type == 'video') {
|
var localVidEl = this.getLocalVideoElement();
|
||||||
|
|
||||||
|
if (localVidEl && this.type == 'video') {
|
||||||
|
localVidEl.autoplay = true;
|
||||||
var vidTrack = stream.getVideoTracks()[0];
|
var vidTrack = stream.getVideoTracks()[0];
|
||||||
this.localVideoElement.src = URL.createObjectURL(stream);
|
localVidEl.src = URL.createObjectURL(stream);
|
||||||
this.localVideoElement.muted = true;
|
localVidEl.muted = true;
|
||||||
this.localVideoElement.play();
|
var self = this;
|
||||||
|
$timeout(function() {
|
||||||
|
var vel = self.getLocalVideoElement();
|
||||||
|
if (vel.play) vel.play();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.localAVStream = stream;
|
this.localAVStream = stream;
|
||||||
@ -339,11 +353,11 @@ angular.module('MatrixCall', [])
|
|||||||
}
|
}
|
||||||
|
|
||||||
MatrixCall.prototype.gotRemoteIceCandidate = function(cand) {
|
MatrixCall.prototype.gotRemoteIceCandidate = function(cand) {
|
||||||
console.log("Got remote ICE "+cand.sdpMid+" candidate: "+cand.candidate);
|
|
||||||
if (this.state == 'ended') {
|
if (this.state == 'ended') {
|
||||||
console.log("Ignoring remote ICE candidate because call has ended");
|
//console.log("Ignoring remote ICE candidate because call has ended");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
console.log("Got remote ICE "+cand.sdpMid+" candidate: "+cand.candidate);
|
||||||
this.peerConn.addIceCandidate(new RTCIceCandidate(cand), function() {}, function(e) {});
|
this.peerConn.addIceCandidate(new RTCIceCandidate(cand), function() {}, function(e) {});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -363,41 +377,46 @@ angular.module('MatrixCall', [])
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.peerConn.setLocalDescription(description);
|
|
||||||
|
|
||||||
var content = {
|
|
||||||
version: 0,
|
|
||||||
call_id: this.call_id,
|
|
||||||
offer: description,
|
|
||||||
lifetime: MatrixCall.CALL_TIMEOUT
|
|
||||||
};
|
|
||||||
this.sendEventWithRetry('m.call.invite', content);
|
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
$timeout(function() {
|
this.peerConn.setLocalDescription(description, function() {
|
||||||
if (self.state == 'invite_sent') {
|
var content = {
|
||||||
self.hangup('invite_timeout');
|
version: 0,
|
||||||
}
|
call_id: self.call_id,
|
||||||
}, MatrixCall.CALL_TIMEOUT);
|
// OpenWebRTC appears to add extra stuff (like the DTLS fingerprint) to the description
|
||||||
|
// when setting it on the peerconnection. According to the spec it should only add ICE
|
||||||
|
// candidates. Any ICE candidates that have already been generated at this point will
|
||||||
|
// probably be sent both in the offer and separately. Ho hum.
|
||||||
|
offer: self.peerConn.localDescription,
|
||||||
|
lifetime: MatrixCall.CALL_TIMEOUT
|
||||||
|
};
|
||||||
|
self.sendEventWithRetry('m.call.invite', content);
|
||||||
|
|
||||||
$rootScope.$apply(function() {
|
$timeout(function() {
|
||||||
self.state = 'invite_sent';
|
if (self.state == 'invite_sent') {
|
||||||
});
|
self.hangup('invite_timeout');
|
||||||
|
}
|
||||||
|
}, MatrixCall.CALL_TIMEOUT);
|
||||||
|
|
||||||
|
$rootScope.$apply(function() {
|
||||||
|
self.state = 'invite_sent';
|
||||||
|
});
|
||||||
|
}, function() { console.log("Error setting local description!"); });
|
||||||
};
|
};
|
||||||
|
|
||||||
MatrixCall.prototype.createdAnswer = function(description) {
|
MatrixCall.prototype.createdAnswer = function(description) {
|
||||||
console.log("Created answer: "+description);
|
console.log("Created answer: "+description);
|
||||||
this.peerConn.setLocalDescription(description);
|
|
||||||
var content = {
|
|
||||||
version: 0,
|
|
||||||
call_id: this.call_id,
|
|
||||||
answer: description
|
|
||||||
};
|
|
||||||
this.sendEventWithRetry('m.call.answer', content);
|
|
||||||
var self = this;
|
var self = this;
|
||||||
$rootScope.$apply(function() {
|
this.peerConn.setLocalDescription(description, function() {
|
||||||
self.state = 'connecting';
|
var content = {
|
||||||
});
|
version: 0,
|
||||||
|
call_id: self.call_id,
|
||||||
|
answer: self.peerConn.localDescription
|
||||||
|
};
|
||||||
|
self.sendEventWithRetry('m.call.answer', content);
|
||||||
|
$rootScope.$apply(function() {
|
||||||
|
self.state = 'connecting';
|
||||||
|
});
|
||||||
|
}, function() { console.log("Error setting local description!"); } );
|
||||||
};
|
};
|
||||||
|
|
||||||
MatrixCall.prototype.getLocalOfferFailed = function(error) {
|
MatrixCall.prototype.getLocalOfferFailed = function(error) {
|
||||||
@ -465,10 +484,15 @@ angular.module('MatrixCall', [])
|
|||||||
};
|
};
|
||||||
|
|
||||||
MatrixCall.prototype.tryPlayRemoteStream = function(event) {
|
MatrixCall.prototype.tryPlayRemoteStream = function(event) {
|
||||||
if (this.remoteVideoElement && this.remoteAVStream) {
|
if (this.getRemoteVideoElement() && this.remoteAVStream) {
|
||||||
var player = this.remoteVideoElement;
|
var player = this.getRemoteVideoElement();
|
||||||
|
player.autoplay = true;
|
||||||
player.src = URL.createObjectURL(this.remoteAVStream);
|
player.src = URL.createObjectURL(this.remoteAVStream);
|
||||||
player.play();
|
var self = this;
|
||||||
|
$timeout(function() {
|
||||||
|
var vel = self.getRemoteVideoElement();
|
||||||
|
if (vel.play) vel.play();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -500,8 +524,8 @@ angular.module('MatrixCall', [])
|
|||||||
|
|
||||||
MatrixCall.prototype.onHangupReceived = function(msg) {
|
MatrixCall.prototype.onHangupReceived = function(msg) {
|
||||||
console.log("Hangup received");
|
console.log("Hangup received");
|
||||||
if (this.remoteVideoElement) this.remoteVideoElement.pause();
|
if (this.getRemoteVideoElement() && this.getRemoteVideoElement().pause) this.getRemoteVideoElement().pause();
|
||||||
if (this.localVideoElement) this.localVideoElement.pause();
|
if (this.getLocalVideoElement() && this.getLocalVideoElement().pause) this.getLocalVideoElement().pause();
|
||||||
this.state = 'ended';
|
this.state = 'ended';
|
||||||
this.hangupParty = 'remote';
|
this.hangupParty = 'remote';
|
||||||
this.hangupReason = msg.reason;
|
this.hangupReason = msg.reason;
|
||||||
@ -524,8 +548,8 @@ angular.module('MatrixCall', [])
|
|||||||
newCall.gotUserMediaForAnswer(this.localAVStream);
|
newCall.gotUserMediaForAnswer(this.localAVStream);
|
||||||
delete(this.localAVStream);
|
delete(this.localAVStream);
|
||||||
}
|
}
|
||||||
newCall.localVideoElement = this.localVideoElement;
|
newCall.localVideoSelector = this.localVideoSelector;
|
||||||
newCall.remoteVideoElement = this.remoteVideoElement;
|
newCall.remoteVideoSelector = this.remoteVideoSelector;
|
||||||
this.successor = newCall;
|
this.successor = newCall;
|
||||||
this.hangup(true);
|
this.hangup(true);
|
||||||
};
|
};
|
||||||
@ -601,5 +625,21 @@ angular.module('MatrixCall', [])
|
|||||||
}, delayMs);
|
}, delayMs);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
MatrixCall.prototype.getLocalVideoElement = function() {
|
||||||
|
if (this.localVideoSelector) {
|
||||||
|
var t = angular.element(this.localVideoSelector);
|
||||||
|
if (t.length) return t[0];
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
MatrixCall.prototype.getRemoteVideoElement = function() {
|
||||||
|
if (this.remoteVideoSelector) {
|
||||||
|
var t = angular.element(this.remoteVideoSelector);
|
||||||
|
if (t.length) return t[0];
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
return MatrixCall;
|
return MatrixCall;
|
||||||
}]);
|
}]);
|
||||||
|
@ -53,8 +53,8 @@
|
|||||||
<div id="videoBackground" ng-class="videoMode">
|
<div id="videoBackground" ng-class="videoMode">
|
||||||
<div id="videoContainer" ng-class="videoMode">
|
<div id="videoContainer" ng-class="videoMode">
|
||||||
<div id="videoContainerPadding"></div>
|
<div id="videoContainerPadding"></div>
|
||||||
<video id="localVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'connecting' || currentCall.state == 'invite_sent' || currentCall.state == 'ended')"></video>
|
<div ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'connecting' || currentCall.state == 'invite_sent' || currentCall.state == 'ended')"><video id="localVideo"></video></div>
|
||||||
<video id="remoteVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || (currentCall.state == 'ended' && currentCall.didConnect))"></video>
|
<div ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || (currentCall.state == 'ended' && currentCall.didConnect))"><video id="remoteVideo"></video></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -919,8 +919,8 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
|
|||||||
var call = new MatrixCall($scope.room_id);
|
var call = new MatrixCall($scope.room_id);
|
||||||
call.onError = $rootScope.onCallError;
|
call.onError = $rootScope.onCallError;
|
||||||
call.onHangup = $rootScope.onCallHangup;
|
call.onHangup = $rootScope.onCallHangup;
|
||||||
call.localVideoElement = angular.element('#localVideo')[0];
|
call.localVideoSelector = '#localVideo';
|
||||||
call.remoteVideoElement = angular.element('#remoteVideo')[0];
|
call.remoteVideoSelector = '#remoteVideo';
|
||||||
call.placeVideoCall();
|
call.placeVideoCall();
|
||||||
$rootScope.currentCall = call;
|
$rootScope.currentCall = call;
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user