mirror of
https://github.com/element-hq/synapse
synced 2024-08-19 08:00:53 +00:00
Prettier and stabler video with basic support for viewing mode. For now, transition into 'large' mode is disabled.
This commit is contained in:
parent
e932e5237e
commit
3bd8cbc62f
4 changed files with 70 additions and 19 deletions
|
@ -93,7 +93,13 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
|
||||||
};
|
};
|
||||||
|
|
||||||
$rootScope.$watch('currentCall', function(newVal, oldVal) {
|
$rootScope.$watch('currentCall', function(newVal, oldVal) {
|
||||||
if (!$rootScope.currentCall) return;
|
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();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var roomMembers = angular.copy($rootScope.events.rooms[$rootScope.currentCall.room_id].members);
|
var roomMembers = angular.copy($rootScope.events.rooms[$rootScope.currentCall.room_id].members);
|
||||||
delete roomMembers[matrixService.config().user_id];
|
delete roomMembers[matrixService.config().user_id];
|
||||||
|
@ -140,7 +146,19 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
|
||||||
} else if (oldVal == 'ringing') {
|
} else if (oldVal == 'ringing') {
|
||||||
angular.element('#ringAudio')[0].pause();
|
angular.element('#ringAudio')[0].pause();
|
||||||
} else if (newVal == 'connected') {
|
} else if (newVal == 'connected') {
|
||||||
$scope.videoMode = 'large';
|
$timeout(function() {
|
||||||
|
//if ($scope.currentCall.type == 'video') $scope.videoMode = 'large';
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($rootScope.currentCall && $rootScope.currentCall.type == 'video' && $rootScope.currentCall.state != 'connected') {
|
||||||
|
$scope.videoMode = 'mini';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$rootScope.$watch('currentCall.type', function(newVal, oldVal) {
|
||||||
|
// need to listen for this too as the type of the call won't be know when it's created
|
||||||
|
if ($rootScope.currentCall && $rootScope.currentCall.type == 'video' && $rootScope.currentCall.state != 'connected') {
|
||||||
|
$scope.videoMode = 'mini';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -97,30 +97,44 @@ a:active { color: #000; }
|
||||||
left: 0px;
|
left: 0px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background-color: rgba(0,0,0,0.0);
|
background-color: rgba(0,0,0,0.0);
|
||||||
|
pointer-events: none;
|
||||||
transition: background-color linear 300ms;
|
transition: background-color linear 300ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
#videoBackground.large {
|
#videoBackground.large {
|
||||||
background-color: rgba(0,0,0,0.85);
|
background-color: rgba(0,0,0,0.85);
|
||||||
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#localVideo {
|
#videoContainer {
|
||||||
position: absolute;
|
max-width: 1280px;
|
||||||
|
margin: auto;
|
||||||
top: 32px;
|
top: 32px;
|
||||||
left: 160px;
|
}
|
||||||
|
|
||||||
|
#videoContainer.large {
|
||||||
|
}
|
||||||
|
|
||||||
|
#localVideo.mini {
|
||||||
|
position: relative;
|
||||||
|
left: 120px;
|
||||||
width: 128px;
|
width: 128px;
|
||||||
height: 72px;
|
height: 72px;
|
||||||
z-index: 2;
|
}
|
||||||
|
|
||||||
|
#localVideo.ended {
|
||||||
|
-webkit-filter: grayscale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
#remoteVideo {
|
#remoteVideo {
|
||||||
position: absolute;
|
transition: all linear 300ms;
|
||||||
top: 32px;
|
}
|
||||||
left: 300px;
|
|
||||||
|
#remoteVideo.mini {
|
||||||
|
position: relative;
|
||||||
|
left: 120px;
|
||||||
width: 128px;
|
width: 128px;
|
||||||
height: 72px;
|
height: 72px;
|
||||||
z-index: 2;
|
|
||||||
transition: all linear 300ms;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#remoteVideo.large {
|
#remoteVideo.large {
|
||||||
|
|
|
@ -65,7 +65,7 @@ angular.module('MatrixCall', [])
|
||||||
var stunServer = 'stun:stun.l.google.com:19302';
|
var stunServer = 'stun:stun.l.google.com:19302';
|
||||||
var pc;
|
var pc;
|
||||||
if (window.mozRTCPeerConnection) {
|
if (window.mozRTCPeerConnection) {
|
||||||
pc = window.mozRTCPeerConnection({'url': stunServer});
|
pc = new window.mozRTCPeerConnection({'url': stunServer});
|
||||||
} else {
|
} else {
|
||||||
pc = new window.RTCPeerConnection({"iceServers":[{"urls":"stun:stun.l.google.com:19302"}]});
|
pc = new window.RTCPeerConnection({"iceServers":[{"urls":"stun:stun.l.google.com:19302"}]});
|
||||||
}
|
}
|
||||||
|
@ -118,6 +118,17 @@ angular.module('MatrixCall', [])
|
||||||
this.peerConn.setRemoteDescription(new RTCSessionDescription(this.msg.offer), this.onSetRemoteDescriptionSuccess, this.onSetRemoteDescriptionError);
|
this.peerConn.setRemoteDescription(new RTCSessionDescription(this.msg.offer), this.onSetRemoteDescriptionSuccess, this.onSetRemoteDescriptionError);
|
||||||
this.state = 'ringing';
|
this.state = 'ringing';
|
||||||
this.direction = 'inbound';
|
this.direction = 'inbound';
|
||||||
|
|
||||||
|
if (window.mozRTCPeerConnection) {
|
||||||
|
// firefox's RTCPeerConnection doesn't add streams until it starts getting media on them
|
||||||
|
// so we need to figure out whether a video channel has been offered by ourselves.
|
||||||
|
if (this.msg.offer.sdp.indexOf('m=video') > -1) {
|
||||||
|
this.type = 'video';
|
||||||
|
} else {
|
||||||
|
this.type = 'voice';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
$timeout(function() {
|
$timeout(function() {
|
||||||
if (self.state == 'ringing') {
|
if (self.state == 'ringing') {
|
||||||
|
@ -167,7 +178,10 @@ angular.module('MatrixCall', [])
|
||||||
MatrixCall.prototype.hangup = function(suppressEvent) {
|
MatrixCall.prototype.hangup = function(suppressEvent) {
|
||||||
console.log("Ending call "+this.call_id);
|
console.log("Ending call "+this.call_id);
|
||||||
|
|
||||||
this.remoteVideoElement.pause();
|
// 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();
|
||||||
|
|
||||||
this.stopAllMedia();
|
this.stopAllMedia();
|
||||||
if (this.peerConn) this.peerConn.close();
|
if (this.peerConn) this.peerConn.close();
|
||||||
|
@ -318,7 +332,7 @@ angular.module('MatrixCall', [])
|
||||||
};
|
};
|
||||||
|
|
||||||
MatrixCall.prototype.getUserMediaFailed = function() {
|
MatrixCall.prototype.getUserMediaFailed = function() {
|
||||||
this.onError("Couldn't start capturing audio! Is your microphone set up?");
|
this.onError("Couldn't start capturing! Is your microphone set up?");
|
||||||
this.hangup();
|
this.hangup();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -411,6 +425,8 @@ angular.module('MatrixCall', [])
|
||||||
|
|
||||||
MatrixCall.prototype.onHangupReceived = function() {
|
MatrixCall.prototype.onHangupReceived = function() {
|
||||||
console.log("Hangup received");
|
console.log("Hangup received");
|
||||||
|
if (this.remoteVideoElement) this.remoteVideoElement.pause();
|
||||||
|
if (this.localVideoElement) this.localVideoElement.pause();
|
||||||
this.state = 'ended';
|
this.state = 'ended';
|
||||||
this.hangupParty = 'remote';
|
this.hangupParty = 'remote';
|
||||||
this.stopAllMedia();
|
this.stopAllMedia();
|
||||||
|
|
|
@ -45,7 +45,12 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="videoBackground" ng-class="videoMode" ng-show="videoMode == 'large' || videoMode == 'fullscreen'"></div>
|
<div id="videoBackground" ng-class="videoMode">
|
||||||
|
<div id="videoContainer" ng-class="videoMode">
|
||||||
|
<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')"></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="header">
|
<div id="header">
|
||||||
<!-- Do not show buttons on the login page -->
|
<!-- Do not show buttons on the login page -->
|
||||||
|
@ -59,8 +64,8 @@
|
||||||
<br />
|
<br />
|
||||||
<span id="callState">
|
<span id="callState">
|
||||||
<span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
|
<span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
|
||||||
<span ng-show="currentCall.state == 'ringing' && currentCall.type == 'video'">Incoming Video Call</span>
|
<span ng-show="currentCall.state == 'ringing' && currentCall && 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 == 'ringing' && currentCall && currentCall.type == 'voice'">Incoming Voice Call</span>
|
||||||
<span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
|
<span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
|
||||||
<span ng-show="currentCall.state == 'connected'">Call Connected</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>
|
<span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'remote'">Call Rejected</span>
|
||||||
|
@ -94,8 +99,6 @@
|
||||||
<source src="media/busy.mp3" type="audio/mpeg" />
|
<source src="media/busy.mp3" type="audio/mpeg" />
|
||||||
</audio>
|
</audio>
|
||||||
</div>
|
</div>
|
||||||
<video id="localVideo" ng-class="videoMode" ng-show="currentCall && currentCall.type == 'video' && (currentCall.state == 'connected' || currentCall.state == 'connecting' || currentCall.state == 'invite_sent')"></video>
|
|
||||||
<video id="remoteVideo" ng-class="[videoMode, currentCall.state]" ng-show="currentCall && currentCall.type == 'video' && currentCall.state == 'connected' || currentCall.state == 'ended'"></video>
|
|
||||||
|
|
||||||
<a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
|
<a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue