accept or reject video offers
This commit is contained in:
parent
089528c46d
commit
3c9d722945
7 changed files with 135 additions and 68 deletions
File diff suppressed because one or more lines are too long
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
})();
|
||||
})();
|
||||
|
|
|
@ -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;
|
||||
})();
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
};
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue