archive
This commit is contained in:
bel
258
comms/webRTC-over-websockets/js/main.js
Normal file
258
comms/webRTC-over-websockets/js/main.js
Normal file
@@ -0,0 +1,258 @@
|
||||
var socketAddress = 'ws://localhost:1337/';
|
||||
|
||||
var RTCApp = {
|
||||
name: null,
|
||||
webRTC: null,
|
||||
commChannel: null,
|
||||
message: null
|
||||
};
|
||||
|
||||
RTCApp.commChannel = signaling({webSocketAddress : socketAddress, id: RTCApp.name });
|
||||
|
||||
RTCApp.commChannel.addCallback('presence' , presenceCallback);
|
||||
RTCApp.commChannel.addCallback('s-offer', accept);
|
||||
RTCApp.commChannel.addCallback('roster', roster);
|
||||
|
||||
|
||||
RTCApp.webRTC = webrtc({sourcevid : document.getElementById('sourceSmallvid'),
|
||||
stunServer : "stun.l.google.com:19302",
|
||||
commChannel : RTCApp.commChannel,
|
||||
onremote : remoteCallback,
|
||||
constrains : 'dynamic'
|
||||
});
|
||||
|
||||
RTCApp.webRTC.startVideo();
|
||||
|
||||
var users = {};
|
||||
var caller, newUser;
|
||||
var snd = new Audio("data/ringtone.wav");
|
||||
var newUsers = {};
|
||||
|
||||
$(document).ready(function() {
|
||||
//List of people and rooms is either retrived by uncommenting lines below,
|
||||
//or after first successfull login (when the socket server send it to the logged user)
|
||||
|
||||
//loadFromJSON("data/people.json", "ajax-modal", ".people-carousel", false);
|
||||
//loadFromJSON("data/rooms.json", "ajax-room-modal", ".rooms-carousel", true);
|
||||
|
||||
$('#people_content').hide();
|
||||
$('#room_content').hide();
|
||||
$('#people').fadeIn();
|
||||
$('[id^="myCarousel"]').carousel({interval: false});
|
||||
});
|
||||
|
||||
$("#form").submit(function(event) {
|
||||
event.preventDefault();
|
||||
RTCApp.name = $("#user").val();
|
||||
RTCApp.commChannel.sendPresence(RTCApp.name, 'on');
|
||||
|
||||
$('#user').attr('readonly', true);
|
||||
$("#submit").hide();
|
||||
});
|
||||
|
||||
$('#accept').bind('click', function() {
|
||||
RTCApp.commChannel.answer(caller, 'accept');
|
||||
$('#acceptModal').modal('hide');
|
||||
});
|
||||
|
||||
$('#reject').bind('click', function() {
|
||||
RTCApp.commChannel.answer(caller, 'reject');
|
||||
$('#acceptModal').modal('hide');
|
||||
});
|
||||
|
||||
function accept(message){
|
||||
if(message.from === RTCApp.name){
|
||||
console.log("can't call yourself ");
|
||||
return;
|
||||
}
|
||||
caller = message.from;
|
||||
snd.play();
|
||||
$('#callerTitle').text('Incoming call');
|
||||
$('#caller').text('Caller id '+ message.from);
|
||||
$('#acceptModal').modal('show');
|
||||
}
|
||||
|
||||
function talkFunction(flag){
|
||||
var callback = flag === true? "hide" : "show";
|
||||
$('#people_content')[callback]();
|
||||
$('#room_content')[callback]();
|
||||
}
|
||||
|
||||
function remoteCallback(from, added, stream){
|
||||
var resource = 'resource_'+ from;
|
||||
if(added){
|
||||
if (window.webkitURL) {
|
||||
$('.inner').append('<video class="span4" id=' + resource + ' src=' +
|
||||
window.webkitURL.createObjectURL(event.stream) + ' autoplay></video>');
|
||||
} else {
|
||||
$('.inner').append('<video class="span4" id=' + resource + ' mozSrcObject=' +
|
||||
event.stream + ' autoplay></video>');
|
||||
}
|
||||
} else {
|
||||
$('#'+resource).attr('src',"");
|
||||
$('#'+resource).remove();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$('#acceptNewUser').bind('click', function() {
|
||||
delete newUsers[newUser];
|
||||
addNewUser({
|
||||
"name" : newUser,
|
||||
"id": newUser,
|
||||
"img" : "images/person.jpg"
|
||||
}, "ajax-modal", ".people-carousel");
|
||||
$('#userModal').modal('hide');
|
||||
});
|
||||
|
||||
$('#rejectNewUser').bind('click', function() {
|
||||
newUsers[newUser] = false;
|
||||
$('#userModal').modal('hide');
|
||||
});
|
||||
|
||||
function presenceCallback(message){
|
||||
roomFlag = message.room !== undefined;
|
||||
var user_id, room_id;
|
||||
if(!roomFlag){
|
||||
$(".ajax-modal").each(function(){
|
||||
user_id = $(this).attr('user-id');
|
||||
if(user_id !== undefined && user_id === message.name){
|
||||
if(message.status === 'on'){
|
||||
$(this).find('img').attr('src', 'images/online-icon.png');
|
||||
} else {
|
||||
$(this).find('img').attr('src', 'images/offline-icon.png');
|
||||
}
|
||||
}
|
||||
});
|
||||
if(users[message.name] === undefined && message.status === 'on'){
|
||||
console.log('presence received from the person that is not in the address book ' + message.name);
|
||||
if(newUsers[message.name] === undefined){
|
||||
newUsers[message.name] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
$(".ajax-room-modal").each(function(){
|
||||
room_id = $(this).attr('user-id');
|
||||
if(room_id !== undefined && room_id === message.name){
|
||||
if(message.status === 'on'){
|
||||
$(this).find('img').attr('src', 'images/online-icon.png');
|
||||
}else {
|
||||
$(this).find('img').attr('src', 'images/offline-icon.png');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$('#main').delegate('a.ajax-modal', 'click', function() {
|
||||
event.preventDefault();
|
||||
var user_id = $(this).attr('user-id');
|
||||
if(user_id !== undefined && user_id !== RTCApp.name)
|
||||
RTCApp.commChannel.callOtherParty(user_id);
|
||||
});
|
||||
|
||||
$('#main').delegate('a.ajax-room-modal', 'click', function() {
|
||||
event.preventDefault();
|
||||
var room = $(this).attr('user-id');
|
||||
RTCApp.commChannel.joinRoom(room);
|
||||
});
|
||||
|
||||
$.ajaxSetup({
|
||||
'beforeSend' : function(xhr) {
|
||||
xhr.overrideMimeType('text/html; charset=ISO-8859-1');
|
||||
},
|
||||
});
|
||||
|
||||
window.onbeforeunload = function() {
|
||||
if(RTCApp.commChannel !== null)
|
||||
RTCApp.commChannel.sendPresence(RTCApp.name, 'off');
|
||||
}
|
||||
|
||||
function addNewUser(jsonData, class_name, class_div){
|
||||
users[jsonData.id] = jsonData;
|
||||
$('.people-carousel').empty();
|
||||
var array = $.map(users, function (value, key) { return value; });
|
||||
addDataToDiv(array, class_name, class_div, false);
|
||||
}
|
||||
|
||||
function loadFromJSON(file, class_name, class_div, roomFlag){
|
||||
$.getJSON(file, function(data) {
|
||||
addDataToDiv(data, class_name, class_div, roomFlag);
|
||||
});
|
||||
}
|
||||
|
||||
function roster(message){
|
||||
addDataToDiv(message.people, "ajax-modal", ".people-carousel", false);
|
||||
addDataToDiv(message.rooms, "ajax-room-modal", ".rooms-carousel", true);
|
||||
|
||||
if(message.people.length > 0)
|
||||
$('#people_content').show();
|
||||
if(message.rooms.length > 0)
|
||||
$('#room_content').show();
|
||||
|
||||
if(users[RTCApp.name] === undefined){
|
||||
console.log('user not known by the system, create an avatar');
|
||||
addNewUser({
|
||||
"name" : RTCApp.name,
|
||||
"id": RTCApp.name,
|
||||
"img" : "images/person.jpg"
|
||||
}, "ajax-modal", ".people-carousel");
|
||||
}
|
||||
if(users[RTCApp.name].room !== undefined){
|
||||
for(var i=0; i < users[RTCApp.name].room.length; i ++)
|
||||
RTCApp.commChannel.joinRoom(users[RTCApp.name].room[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function addDataToDiv(data, class_name, class_div, roomFlag){
|
||||
var items = [];
|
||||
var i = 0;
|
||||
var groupIndex = 12;
|
||||
|
||||
$.each(data, function(key, value) {
|
||||
var name = this.name;
|
||||
var image = this.img;
|
||||
var id = this.id;
|
||||
if(!roomFlag)
|
||||
users[id] = value;
|
||||
|
||||
if(i % groupIndex === 0){
|
||||
if(i === 0)
|
||||
items.push('<div class="item active">');
|
||||
else
|
||||
items.push('<div class="item">');
|
||||
items.push('<ul class="thumbnails">');
|
||||
}
|
||||
|
||||
items.push('<li class="span1"><div class="thumbnail"><img src="' + image
|
||||
+' " alt=""></a> <h4>' + name + '</h4><p><a href="#" class="btn btn-primary ' +
|
||||
class_name + ' " user-id="' + id +
|
||||
'" >Talk<img src="images/offline-icon.png" width="24" height="24" align="left" alt=""> </a></p></div></li>');
|
||||
|
||||
if( (i % groupIndex) === (groupIndex - 1) ){
|
||||
items.push('</ul>');
|
||||
items.push('</div>');
|
||||
}
|
||||
i++;
|
||||
});
|
||||
|
||||
if(items.lenght > 0 && items[items.lenght - 1].indexOf('div') < 0 ){
|
||||
items.push('</ul>');
|
||||
items.push('</div>');
|
||||
}
|
||||
|
||||
$(items.join('')).appendTo(class_div);
|
||||
}
|
||||
|
||||
|
||||
setInterval(function(){
|
||||
for(newUser in newUsers){
|
||||
if(newUsers[newUser]){
|
||||
$('#userTitle').text('Accept a new user?');
|
||||
$('#callerUser').text('User id '+ newUser);
|
||||
$('#userModal').modal('show');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, 10000);
|
||||
Reference in New Issue
Block a user