Prettier and stabler video with basic support for viewing mode. For now, transition into 'large' mode is disabled.

This commit is contained in:
David Baker 2014-09-18 15:51:30 +01:00
parent e932e5237e
commit 3bd8cbc62f
4 changed files with 70 additions and 19 deletions

View File

@ -93,7 +93,13 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
};
$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);
delete roomMembers[matrixService.config().user_id];
@ -140,7 +146,19 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
} else if (oldVal == 'ringing') {
angular.element('#ringAudio')[0].pause();
} 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';
}
});

View File

@ -97,30 +97,44 @@ a:active { color: #000; }
left: 0px;
z-index: 1;
background-color: rgba(0,0,0,0.0);
pointer-events: none;
transition: background-color linear 300ms;
}
#videoBackground.large {
background-color: rgba(0,0,0,0.85);
pointer-events: auto;
}
#localVideo {
position: absolute;
#videoContainer {
max-width: 1280px;
margin: auto;
top: 32px;
left: 160px;
}
#videoContainer.large {
}
#localVideo.mini {
position: relative;
left: 120px;
width: 128px;
height: 72px;
z-index: 2;
}
#localVideo.ended {
-webkit-filter: grayscale(1);
}
#remoteVideo {
position: absolute;
top: 32px;
left: 300px;
transition: all linear 300ms;
}
#remoteVideo.mini {
position: relative;
left: 120px;
width: 128px;
height: 72px;
z-index: 2;
transition: all linear 300ms;
}
#remoteVideo.large {

View File

@ -65,7 +65,7 @@ angular.module('MatrixCall', [])
var stunServer = 'stun:stun.l.google.com:19302';
var pc;
if (window.mozRTCPeerConnection) {
pc = window.mozRTCPeerConnection({'url': stunServer});
pc = new window.mozRTCPeerConnection({'url': stunServer});
} else {
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.state = 'ringing';
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;
$timeout(function() {
if (self.state == 'ringing') {
@ -167,7 +178,10 @@ angular.module('MatrixCall', [])
MatrixCall.prototype.hangup = function(suppressEvent) {
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();
if (this.peerConn) this.peerConn.close();
@ -318,7 +332,7 @@ angular.module('MatrixCall', [])
};
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();
};
@ -411,6 +425,8 @@ angular.module('MatrixCall', [])
MatrixCall.prototype.onHangupReceived = function() {
console.log("Hangup received");
if (this.remoteVideoElement) this.remoteVideoElement.pause();
if (this.localVideoElement) this.localVideoElement.pause();
this.state = 'ended';
this.hangupParty = 'remote';
this.stopAllMedia();

View File

@ -45,7 +45,12 @@
</head>
<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">
<!-- Do not show buttons on the login page -->
@ -59,8 +64,8 @@
<br />
<span id="callState">
<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.type == 'voice'">Incoming Voice Call</span>
<span ng-show="currentCall.state == 'ringing' && currentCall && currentCall.type == 'video'">Incoming Video 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 == 'connected'">Call Connected</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" />
</audio>
</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>
&nbsp;