diff --git a/syweb/webclient/app-controller.js b/syweb/webclient/app-controller.js
index 2d82a42cf8..bbcf4ab5f6 100644
--- a/syweb/webclient/app-controller.js
+++ b/syweb/webclient/app-controller.js
@@ -112,8 +112,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
if (!$rootScope.currentCall) {
// 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
- angular.element('#localVideo')[0].load();
- angular.element('#remoteVideo')[0].load();
+ if (angular.element('#localVideo')[0].load) angular.element('#localVideo')[0].load();
+ if (angular.element('#remoteVideo')[0].load) angular.element('#remoteVideo')[0].load();
return;
}
@@ -187,8 +187,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];
+ call.localVideoSelector = '#localVideo';
+ call.remoteVideoSelector = '#remoteVideo';
$rootScope.currentCall = call;
});
diff --git a/syweb/webclient/app.css b/syweb/webclient/app.css
index 5ab8e2b8fd..be2a73872d 100755
--- a/syweb/webclient/app.css
+++ b/syweb/webclient/app.css
@@ -136,17 +136,17 @@ textarea, input {
transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
}
-#localVideo.mini {
+.mini #localVideo {
top: 0px;
left: 130px;
}
-#localVideo.large {
+.large #localVideo {
top: 70px;
left: 20px;
}
-#localVideo.ended {
+.ended #localVideo {
-webkit-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;
}
-#remoteVideo.mini {
+.mini #remoteVideo {
left: 260px;
top: 0px;
width: 128px;
}
-#remoteVideo.large {
+.large #remoteVideo {
left: 0px;
top: 50px;
width: 100%;
}
-#remoteVideo.ended {
+.ended #remoteVideo {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
diff --git a/syweb/webclient/components/matrix/matrix-call.js b/syweb/webclient/components/matrix/matrix-call.js
index 0631649946..b560cf7daa 100644
--- a/syweb/webclient/components/matrix/matrix-call.js
+++ b/syweb/webclient/components/matrix/matrix-call.js
@@ -35,14 +35,14 @@ var forAllTracksOnStream = function(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', [])
.factory('MatrixCall', ['matrixService', 'matrixPhoneService', 'modelService', '$rootScope', '$timeout', function MatrixCallFactory(matrixService, matrixPhoneService, modelService, $rootScope, $timeout) {
$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);
};
@@ -57,7 +57,7 @@ angular.module('MatrixCall', [])
this.candidateSendTries = 0;
var self = this;
- $rootScope.$watch(this.remoteVideoElement, function (oldValue, newValue) {
+ $rootScope.$watch(this.getRemoteVideoElement(), function (oldValue, newValue) {
self.tryPlayRemoteStream();
});
@@ -252,8 +252,8 @@ angular.module('MatrixCall', [])
// pausing now keeps the last frame (ish) of the video call in the video element
// rather than it just turning black straight away
- if (this.remoteVideoElement) this.remoteVideoElement.pause();
- if (this.localVideoElement) this.localVideoElement.pause();
+ if (this.getRemoteVideoElement() && this.getRemoteVideoElement().pause) this.getRemoteVideoElement().pause();
+ if (this.getLocalVideoElement() && this.getLocalVideoElement().pause) this.getLocalVideoElement().pause();
this.stopAllMedia();
if (this.peerConn) this.peerConn.close();
@@ -278,11 +278,18 @@ angular.module('MatrixCall', [])
}
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];
- this.localVideoElement.src = URL.createObjectURL(stream);
- this.localVideoElement.muted = true;
- this.localVideoElement.play();
+ videoEl.autoplay = true;
+ videoEl.src = URL.createObjectURL(stream);
+ videoEl.muted = true;
+ var self = this;
+ $timeout(function() {
+ var vel = self.getLocalVideoElement();
+ if (vel.play) vel.play();
+ });
}
this.localAVStream = stream;
@@ -306,11 +313,18 @@ angular.module('MatrixCall', [])
MatrixCall.prototype.gotUserMediaForAnswer = function(stream) {
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];
- this.localVideoElement.src = URL.createObjectURL(stream);
- this.localVideoElement.muted = true;
- this.localVideoElement.play();
+ localVidEl.src = URL.createObjectURL(stream);
+ localVidEl.muted = true;
+ var self = this;
+ $timeout(function() {
+ var vel = self.getLocalVideoElement();
+ if (vel.play) vel.play();
+ });
}
this.localAVStream = stream;
@@ -339,11 +353,11 @@ angular.module('MatrixCall', [])
}
MatrixCall.prototype.gotRemoteIceCandidate = function(cand) {
- console.log("Got remote ICE "+cand.sdpMid+" candidate: "+cand.candidate);
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;
}
+ console.log("Got remote ICE "+cand.sdpMid+" candidate: "+cand.candidate);
this.peerConn.addIceCandidate(new RTCIceCandidate(cand), function() {}, function(e) {});
};
@@ -363,41 +377,46 @@ angular.module('MatrixCall', [])
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;
- $timeout(function() {
- if (self.state == 'invite_sent') {
- self.hangup('invite_timeout');
- }
- }, MatrixCall.CALL_TIMEOUT);
+ this.peerConn.setLocalDescription(description, function() {
+ var content = {
+ version: 0,
+ call_id: self.call_id,
+ // 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);
+
+ $timeout(function() {
+ if (self.state == 'invite_sent') {
+ self.hangup('invite_timeout');
+ }
+ }, MatrixCall.CALL_TIMEOUT);
- $rootScope.$apply(function() {
- self.state = 'invite_sent';
- });
+ $rootScope.$apply(function() {
+ self.state = 'invite_sent';
+ });
+ }, function() { console.log("Error setting local description!"); });
};
MatrixCall.prototype.createdAnswer = function(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;
- $rootScope.$apply(function() {
- self.state = 'connecting';
- });
+ this.peerConn.setLocalDescription(description, function() {
+ 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) {
@@ -465,10 +484,15 @@ angular.module('MatrixCall', [])
};
MatrixCall.prototype.tryPlayRemoteStream = function(event) {
- if (this.remoteVideoElement && this.remoteAVStream) {
- var player = this.remoteVideoElement;
+ if (this.getRemoteVideoElement() && this.remoteAVStream) {
+ var player = this.getRemoteVideoElement();
+ player.autoplay = true;
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) {
console.log("Hangup received");
- if (this.remoteVideoElement) this.remoteVideoElement.pause();
- if (this.localVideoElement) this.localVideoElement.pause();
+ if (this.getRemoteVideoElement() && this.getRemoteVideoElement().pause) this.getRemoteVideoElement().pause();
+ if (this.getLocalVideoElement() && this.getLocalVideoElement().pause) this.getLocalVideoElement().pause();
this.state = 'ended';
this.hangupParty = 'remote';
this.hangupReason = msg.reason;
@@ -524,8 +548,8 @@ angular.module('MatrixCall', [])
newCall.gotUserMediaForAnswer(this.localAVStream);
delete(this.localAVStream);
}
- newCall.localVideoElement = this.localVideoElement;
- newCall.remoteVideoElement = this.remoteVideoElement;
+ newCall.localVideoSelector = this.localVideoSelector;
+ newCall.remoteVideoSelector = this.remoteVideoSelector;
this.successor = newCall;
this.hangup(true);
};
@@ -601,5 +625,21 @@ angular.module('MatrixCall', [])
}, 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;
}]);
diff --git a/syweb/webclient/index.html b/syweb/webclient/index.html
index 992e8d3377..45be6c274b 100644
--- a/syweb/webclient/index.html
+++ b/syweb/webclient/index.html
@@ -53,8 +53,8 @@
<div id="videoBackground" ng-class="videoMode">
<div id="videoContainer" ng-class="videoMode">
<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>
- <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 == 'connecting' || currentCall.state == 'invite_sent' || currentCall.state == 'ended')"><video id="localVideo"></video></div>
+ <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>
diff --git a/syweb/webclient/room/room-controller.js b/syweb/webclient/room/room-controller.js
index d3fb85b9dc..b878a1f718 100644
--- a/syweb/webclient/room/room-controller.js
+++ b/syweb/webclient/room/room-controller.js
@@ -919,8 +919,8 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
var call = new MatrixCall($scope.room_id);
call.onError = $rootScope.onCallError;
call.onHangup = $rootScope.onCallHangup;
- call.localVideoElement = angular.element('#localVideo')[0];
- call.remoteVideoElement = angular.element('#remoteVideo')[0];
+ call.localVideoSelector = '#localVideo';
+ call.remoteVideoSelector = '#remoteVideo';
call.placeVideoCall();
$rootScope.currentCall = call;
};
|
