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) { $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';
} }
}); });

View File

@ -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 {

View File

@ -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();

View File

@ -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>
&nbsp; &nbsp;