accept or reject video offers

This commit is contained in:
Connor Turland 2015-12-11 17:29:17 -05:00
parent 089528c46d
commit 3c9d722945
7 changed files with 135 additions and 68 deletions

File diff suppressed because one or more lines are too long

View file

@ -1962,7 +1962,8 @@ Metamaps.Realtime = {
media: {
video: true,
audio: true
}
},
nick: Metamaps.Active.Mapper.id
});
self.webrtc.on('readyToCall', function () {
console.log('readyToCall');
@ -1972,7 +1973,8 @@ Metamaps.Realtime = {
$('#wrapper').append(self.localVideo.view.$container);
}
self.socket.emit('videoAdded', {
avatar: Metamaps.Active.Mapper.get('image')
avatar: Metamaps.Active.Mapper.get('image'),
username: Metamaps.Active.Mapper.get('name')
});
self.webrtc.webrtc.peers.forEach(function (p) {
p.pc.addStream(self.webrtc.webrtc.localStream);
@ -2061,6 +2063,9 @@ Metamaps.Realtime = {
for (id in roomDesc.avatars) {
self.webrtc.webrtc.peers.find(function(p) { return p.id === id; }).avatar = roomDesc.avatars[id];
}
for (id in roomDesc.usernames) {
self.webrtc.webrtc.peers.find(function(p) { return p.id === id; }).username = roomDesc.usernames[id];
}
function addVideo(v) {
// random position for now

View file

@ -67,6 +67,10 @@ Metamaps.Views.room = (function () {
this.webrtc.webrtc.off('peerStreamAdded');
this.webrtc.webrtc.off('peerStreamRemoved');
this.webrtc.on('peerStreamAdded', function (peer) {
var mapper = Metamaps.Realtime.mappersOnMap[peer.nick];
peer.avatar = mapper.image;
peer.username = mapper.name;
console.log(peer);
if (self.isActiveRoom) {
self.addVideo(peer);
}
@ -119,10 +123,12 @@ Metamaps.Views.room = (function () {
}
}
});
console.log(data);
peer.avatar = data.avatar;
peer.username = data.username;
self.webrtc.emit('createdPeer', peer);
peer.start();
// the rest will happen automatically through the 'peerStreamAdded' event and associated event handlers
}
});
@ -141,7 +147,10 @@ Metamaps.Views.room = (function () {
var
id = this.webrtc.getDomId(peer),
video = attachMediaStream(peer.stream);
v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar });
$(video).prop('muted', true); // until the viewer accepts the viewing
var
v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar, username: peer.username });
if (this._videoAdded) this._videoAdded(v);
this.videos[peer.id] = v;
@ -150,8 +159,10 @@ Metamaps.Views.room = (function () {
room.prototype.removeVideo = function (peer) {
console.log('removeVideo', peer);
var id = typeof peer == 'string' ? peer : peer.id;
this.videos[id].remove();
delete this.videos[id];
if (this.videos[id]) {
this.videos[id].remove();
delete this.videos[id];
}
}
room.prototype.sendChatMessage = function (data) {
@ -183,4 +194,4 @@ Metamaps.Views.room = (function () {
};
return room;
})();
})();

View file

@ -26,7 +26,7 @@ Metamaps.Views.videoView = (function () {
this.mouseIsDown = false;
if (this.hasMoved) {
}
$(document).trigger(videoView.events.dragEnd);
@ -97,6 +97,14 @@ Metamaps.Views.videoView = (function () {
}
this.videoStatus = !this.videoStatus;
$(document).trigger(videoView.events.videoControlClick, [this]);
},
yesReceiveClick: function () {
this.$receiveContainer.hide();
this.$avatar.hide();
$(this.video).prop('muted', false);
},
noReceiveClick: function () {
this.$container.hide();
}
};
@ -121,12 +129,23 @@ Metamaps.Views.videoView = (function () {
this.$container = $('<div></div>');
this.$container.addClass('collaborator-video' + (isMyself ? ' my-video' : ''));
this.$container.attr('id', 'container_' + id);
var $vidContainer = $('<div></div>');
$vidContainer.addClass('video-cutoff');
$vidContainer.append(this.video);
if (!isMyself) {
this.$receiveContainer = $('<div class="video-receive"><div class="video-statement">' + config.username + ' is sharing their audio and video. Do you wish to receive it?</div><div class="btn-group"><button type="button" class="button btn-yes">Yes</button><button type="button" class="button btn-no">No</button></div></div>');
this.$container.append(this.$receiveContainer);
this.$container.find('.btn-yes').on('click', function (event) {
Handlers.yesReceiveClick.call(self, event);
});
this.$container.find('.btn-no').on('click', function (event) {
Handlers.noReceiveClick.call(self, event);
});
}
this.avatar = config.avatar;
this.$avatar = $('<img draggable="false" class="collaborator-video-avatar" src="' + config.avatar + '" width="150" height="150" />');
$vidContainer.append(this.$avatar);
@ -137,14 +156,17 @@ Metamaps.Views.videoView = (function () {
Handlers.mousedown.call(self, event);
});
if (isMyself) Private.addControls.call(this);
if (isMyself) {
this.$avatar.hide();
Private.addControls.call(this);
}
// suppress contextmenu
this.video.oncontextmenu = function () { return false; };
if (this.$parent) this.setParent(this.$parent);
};
videoView.prototype.setParent = function($parent) {
var self = this;
this.$parent = $parent;
@ -184,5 +206,3 @@ Metamaps.Views.videoView = (function () {
return videoView;
})();

View file

@ -6,6 +6,29 @@
cursor: default;
color: #FFF;
}
.collaborator-video .video-receive {
position: absolute;
width: 160px;
padding: 20px 20px 20px 170px;
background: #424242;
height: 110px;
border-top-left-radius: 75px;
border-bottom-left-radius: 75px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.collaborator-video .video-receive .video-statement {
margin-bottom: 10px;
}
.collaborator-video .video-receive .btn-group .btn-yes {
margin-right: 10px;
}
.collaborator-video .video-receive .btn-group .btn-no {
background-color: #c04f4f;
}
.collaborator-video .video-receive .btn-group .btn-no:hover {
background-color: #A54242;
}
.collaborator-video .video-cutoff {
width: 150px;
height: 150px;
@ -31,7 +54,6 @@
-o-user-select: none;
user-select: none;
-webkit-user-drag: none;
display: none;
}
.collaborator-video .video-audio {
position: absolute;

View file

@ -7,7 +7,7 @@ class User < ActiveRecord::Base
has_many :maps
has_many :mappings
before_create :generate_code
after_create :generate_code
devise :database_authenticatable, :recoverable, :rememberable, :trackable, :registerable

View file

@ -10,11 +10,13 @@ module.exports = function(io, stunservers) {
var clients = io.sockets.clients(name);
var result = {
clients: {},
avatars: {}
avatars: {},
usernames: {}
};
clients.forEach(function (client) {
result.clients[client.id] = client.resources;
result.avatars[client.id] = client.avatar;
result.usernames[client.id] = client.username;
});
return result;
}
@ -71,9 +73,10 @@ module.exports = function(io, stunservers) {
var socketsInRoom = io.sockets.clients(client.room);
client.resources.video = true;
client.avatar = data.avatar;
client.username = data.username;
socketsInRoom.forEach(function(socket) {
if (socket.id !== client.id) {
socket.emit('addVideo', { id: client.id, avatar: data.avatar });
socket.emit('addVideo', { id: client.id, avatar: data.avatar, username: data.username });
}
});
}
@ -189,4 +192,4 @@ module.exports = function(io, stunservers) {
if (socket.id !== client.id && socket.profile) client.emit('presence', socket.profile);
});
});
};
};