Skip to content

Commit c931880

Browse files
eugen-strukoveugen-strukov
committed
Updated webrtc sample
1 parent 00cf565 commit c931880

File tree

2 files changed

+125
-88
lines changed

2 files changed

+125
-88
lines changed

‎samples/webrtc/js/app.js‎

Lines changed: 96 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,12 @@
240240
) {
241241
app.helpers.renderUsers.condition.page += 1;
242242
ui.insertOccupants(false).then(function(users) {
243-
app.users += users;
243+
var ids = users.map(function (user) {
244+
return user.id;
245+
});
246+
app.users = users.concat(app.users.filter(function (item) {
247+
return ids.indexOf(item.id) < 0;
248+
}));
244249
app.helpers.setFooterPosition();
245250
}, function() {
246251
app.helpers.setFooterPosition();
@@ -433,7 +438,6 @@
433438
video: false
434439
};
435440
document.querySelector('.j-actions[data-call="video"]').setAttribute('hidden', true);
436-
document.querySelector('.j-caller__ctrl').setAttribute('hidden', true);
437441
} else {
438442
document.querySelector('.j-actions[data-call="audio"]').setAttribute('hidden', true);
439443
}
@@ -496,7 +500,11 @@
496500
notification_type: 'push',
497501
user: {ids: pushRecipients},
498502
environment: 'development', // environment, can be 'production' as well.
499-
message: QB.pushnotifications.base64Encode(app.caller.full_name + ' is calling you')
503+
message: QB.pushnotifications.base64Encode(JSON.stringify({
504+
"message": app.caller.full_name + " is calling you",
505+
"ios_voip": "1",
506+
"VOIPCall":"1"
507+
}))
500508
};
501509
//
502510
QB.pushnotifications.events.create(params, function(err, response) {
@@ -538,7 +546,6 @@
538546
video: false
539547
};
540548
document.querySelector('.j-actions[data-call="video"]').setAttribute('hidden', true);
541-
document.querySelector('.j-caller__ctrl').setAttribute('hidden', true);
542549
} else {
543550
mediaParams = {
544551
audio: {
@@ -640,14 +647,14 @@
640647

641648
if( app.currentSession.peerConnections[userId].stream && !$that.srcObject ) {
642649
if( $that.hasClass('active') ) {
643-
$that.removeClass('active');
644-
645-
app.currentSession.detachMediaStream('main_video');
646-
app.helpers.changeFilter('#main_video', 'no');
647-
app.mainVideo = 0;
648-
remoteStreamCounter = 0;
650+
return false;
649651
} else {
650-
$('.j-callees__callee_video').removeClass('active');
652+
653+
if(recorder) {
654+
recorder.stop();
655+
}
656+
657+
$('.j-callees__callee__video').removeClass('active');
651658
$that.addClass('active');
652659

653660
app.helpers.changeFilter('#main_video', 'no');
@@ -665,49 +672,49 @@
665672
}
666673
});
667674

668-
$(document).on('click', '.j-caller__ctrl[data-target="screen"]', function(e, track) {
669-
670-
var $btn = $(this),
671-
isActive = $btn.hasClass('active'),
672-
callMethod = (isActive)?'getUserMedia':'getDisplayMedia';
675+
$(document).on('click', '.j-caller__ctrl[data-target="screen"]', function() {
673676

674-
if( _.isEmpty( app.currentSession)) {
677+
if( _.isEmpty(app.currentSession)) {
675678
return false;
676679
}
677680

678-
if(track) {
679-
680-
app.currentSession.localStream.getVideoTracks()[0].stop();
681-
var stream = app.currentSession.localStream.clone();
682-
stream.removeTrack(stream.getVideoTracks()[0]);
683-
stream.addTrack(track);
684-
app.currentSession.localStream.getAudioTracks()[0].stop();
685-
app.currentSession._replaceTracks(stream);
686-
app.currentSession.localStream = stream;
687-
688-
if(isActive) {
689-
$btn.removeClass('active');
690-
} else {
691-
$btn.addClass('active');
692-
}
681+
var $btn = $(this),
682+
isActive = $btn.hasClass('active'),
683+
runScreenSharing = function(){
684+
navigator.mediaDevices.getDisplayMedia({
685+
video: true,
686+
}).then(stream => {
687+
var videoTrack = stream.getVideoTracks()[0];
688+
videoTrack.onended = stopScreenSharing;
689+
switchMediaTrack(videoTrack);
690+
$btn.addClass('active');
691+
});
692+
},
693+
stopScreenSharing = function(){
694+
navigator.mediaDevices.getUserMedia({
695+
video: true,
696+
}).then(stream => {
697+
switchMediaTrack(stream.getVideoTracks()[0]);
698+
$btn.removeClass('active');
699+
});
700+
},
701+
switchMediaTrack = function (track) {
702+
app.currentSession.localStream.getVideoTracks()[0].stop();
703+
var stream = app.currentSession.localStream.clone();
704+
stream.removeTrack(stream.getVideoTracks()[0]);
705+
stream.addTrack(track);
706+
app.currentSession.localStream.getAudioTracks()[0].stop();
707+
app.currentSession._replaceTracks(stream);
708+
app.currentSession.localStream = stream;
709+
return true;
710+
};
693711

694-
return true;
712+
if(isActive) {
713+
stopScreenSharing();
714+
} else {
715+
runScreenSharing();
695716
}
696717

697-
navigator.mediaDevices[callMethod]({
698-
video: true,
699-
}).then(stream => {
700-
var videoTrack = stream.getVideoTracks()[0];
701-
if(callMethod == 'getDisplayMedia') {
702-
videoTrack.onended = function () {
703-
$btn.trigger("click");
704-
};
705-
}
706-
$btn.trigger("click", [videoTrack]);
707-
}).catch(function(error) {
708-
console.warn('getMediaDevices', error);
709-
});
710-
711718
});
712719

713720
$(document).on('click', '.j-caller__ctrl', function() {
@@ -738,15 +745,20 @@
738745
} else if(QBMediaRecorder.isAvailable()) {
739746
if(!isActive){
740747
var connections = app.currentSession.peerConnections,
741-
connection = connections[app.mainVideo],
742-
connectionsCount = Object.keys(connections).length;
748+
connection = connections[app.mainVideo];
743749

744-
if (!connection || connectionsCount !== 1){
750+
if (!connection){
745751
return false;
746752
}
747753

748754
recorder = new QBMediaRecorder(recorderOpts);
749-
recorder.start(connection.stream);
755+
756+
var elem = document.getElementById("main_video");
757+
758+
if (typeof elem.srcObject === 'object') {
759+
recorder.start(elem.srcObject);
760+
}
761+
750762
} else {
751763
recorder.stop();
752764
}
@@ -891,25 +903,32 @@
891903
console.groupEnd();
892904

893905
app.currentSession = session;
894-
895-
ui.insertOccupants().then(function(users) {
896-
app.users = users;
897-
var initiator = _.findWhere(app.users, {id: session.initiatorID});
898-
app.callees = {};
899-
/** close previous modal */
900-
$(ui.income_call).modal('hide');
901-
902-
$('.j-ic_initiator').text(initiator.full_name);
903-
904-
// check the current session state
905-
if (app.currentSession.state !== QB.webrtc.SessionConnectionState.CLOSED){
906-
$(ui.income_call).modal('show');
907-
document.getElementById(sounds.rington).play();
906+
QB.users.get(Number(session.initiatorID), function(error, user){
907+
if (error) {
908+
console.log(error);
909+
} else {
910+
app.users = app.users.filter(function (item) {
911+
return user.id !== item.id;
912+
});
913+
app.users.push(user);
914+
/** close previous modal */
915+
$(ui.income_call).modal('hide');
916+
$('.j-ic_initiator').text(user.full_name);
917+
// check the current session state
918+
if (app.currentSession.state !== QB.webrtc.SessionConnectionState.CLOSED){
919+
$(ui.income_call).modal('show');
920+
document.getElementById(sounds.rington).play();
921+
}
908922
}
909923
});
910924
};
911925

912926
QB.webrtc.onRejectCallListener = function onRejectCallListener(session, userId, extension) {
927+
928+
if(app.currentSession.ID !== session){
929+
return;
930+
}
931+
913932
console.group('onRejectCallListener.');
914933
console.log('UserId: ' + userId);
915934
console.log('Session: ' + session);
@@ -1059,9 +1078,17 @@
10591078

10601079
if(app.mainVideo === userId) {
10611080
$('#remote_video_' + userId).removeClass('active');
1062-
10631081
app.helpers.changeFilter('#main_video', 'no');
10641082
app.mainVideo = 0;
1083+
for(var key in app.currentSession.peerConnections){
1084+
if(key != userId
1085+
&& app.currentSession.peerConnections[key].stream !== undefined
1086+
&& app.currentSession.peerConnections[key].stream.active) {
1087+
app.currentSession.attachMediaStream('main_video', app.currentSession.peerConnections[key].stream);
1088+
app.mainVideo = key;
1089+
break;
1090+
}
1091+
}
10651092
}
10661093

10671094
if( !_.isEmpty(app.currentSession) ) {
@@ -1191,7 +1218,9 @@
11911218
}
11921219

11931220
function switchMediaTracks() {
1194-
if (!document.getElementById('localVideo').srcObject || !app.currentSession) {
1221+
1222+
var localVideo = document.getElementById('localVideo');
1223+
if ( (typeof localVideo == "object" && !localVideo.srcObject) || !app.currentSession) {
11951224
return true;
11961225
}
11971226

‎samples/webrtc/js/helpers.js‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,34 @@
22
'use strict';
33

44
/** GLOBAL */
5-
window.app = {};
5+
window.app = new Proxy({}, {
6+
set: function(obj, prop, value) {
7+
8+
if (prop === 'currentSession') {
9+
10+
if(typeof value === "object" && value.opponentsIDs && value.opponentsIDs.length > 1 ){
11+
$('.j-record').css("display", "none");
12+
}else{
13+
$('.j-record').css("display", "inline-block");
14+
}
15+
16+
if(typeof value === "object" && value.callType && value.callType === QB.webrtc.CallType.AUDIO){
17+
$('.j-caller__ctrl[data-target="screen"]').css("display", "none");
18+
$('.j-caller__ctrl[data-target="video"]').css("display", "none");
19+
}else{
20+
$('.j-caller__ctrl[data-target="screen"]').css("display", "inline-block");
21+
$('.j-caller__ctrl[data-target="video"]').css("display", "inline-block");
22+
}
23+
24+
}
25+
26+
// The default behavior to store the value
27+
obj[prop] = value;
28+
29+
// Indicate success
30+
return true;
31+
}
32+
});
633
app.helpers = {};
734
app.filter = {
835
'names': 'no _1977 inkwell moon nashville slumber toaster walden'
@@ -84,28 +111,9 @@
84111
}
85112
};
86113

87-
/**
88-
* [getUui - generate a unique id]
89-
* @return {[string]} [a unique id]
90-
*/
91-
function _getUui(identifyAppId) {
92-
var navigator_info = window.navigator;
93-
var screen_info = window.screen;
94-
var uid = navigator_info.mimeTypes.length;
95-
96-
uid += navigator_info.userAgent.replace(/\D+/g, '');
97-
uid += navigator_info.plugins.length;
98-
uid += screen_info.height || '';
99-
uid += screen_info.width || '';
100-
uid += screen_info.pixelDepth || '';
101-
uid += identifyAppId;
102-
103-
return uid;
104-
}
105-
106114
app.helpers.join = function(data) {
107115
var userRequiredParams = {
108-
'login': _getUui(data.login),
116+
'login': data.login,
109117
'password': 'quickblox'
110118
};
111119

0 commit comments

Comments
 (0)