Skip to content

Commit fcdb004

Browse files
author
Igor Khomenko
committed
Merge pull request #96 from QuickBlox/develop.webrtc.bf28122015
review sample (webRTC)
2 parents 86dd7dd + 195dc36 commit fcdb004

File tree

5 files changed

+121
-102
lines changed

5 files changed

+121
-102
lines changed

‎quickblox.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/webrtc/index.html‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,7 @@ <h2 class="header__title">JavaScript WebRTC Sample</h2>
2626
</div>
2727
</header>
2828

29-
<aside class="console">
30-
<div class="fw-inner">
31-
<p class="console__txt j-console">
32-
</p>
33-
</div>
34-
</aside>
29+
<aside class="msg_board" id="msg_board"></aside>
3530

3631
<main class="main j-main">
3732
<div class="fw-inner">
@@ -201,7 +196,6 @@ <h4>Call from <strong class="j-ic_initiator"></strong></h4>
201196
</li>
202197
</script>
203198

204-
205199
<script type="text/template" id="accept_call">
206200
<% _.each(users, function(el, i, list) { %>
207201
<% if(list.length === 1){ %>
@@ -250,7 +244,7 @@ <h4>Call from <strong class="j-ic_initiator"></strong></h4>
250244

251245
<script type="text/template" id="p2p_call_stop">
252246
<%=name%> has <%=reason%>. Call is stopped.&emsp;
253-
Login&nbsp;in&nbsp;as&nbsp;<%=name%>
247+
Login&nbsp;in&nbsp;as&nbsp;<%=currentName%>
254248
<button class='fw-link j-logout'>Logout</button>
255249
</script>
256250

@@ -262,6 +256,7 @@ <h4>Call from <strong class="j-ic_initiator"></strong></h4>
262256
<script src="../../quickblox.js"></script>
263257

264258
<script src="config.js"></script>
265-
<script src="app.js"></script>
259+
<script src="js/msgBoard.js"></script>
260+
<script src="js/app.js"></script>
266261
</body>
267262
</html>

samples/webrtc/app.js renamed to samples/webrtc/js/app.js

Lines changed: 56 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
var ui = {
66
$usersTitle: $('.j-users__title'),
77
$usersList: $('.j-users__list'),
8-
$cl: $('.j-console'),
98

109
$panel: $('.j-pl'),
1110
$callees: $('.j-callees'),
@@ -68,24 +67,6 @@
6867
this.$btnHangup.removeClass('hidden');
6968
this.$btnCall.addClass('hidden');
7069
},
71-
/**
72-
* [updateMsg update massage for user]
73-
* @param {[string]} msg_name [key for MESSAGES object / name(id) of template]
74-
* @param {[object]} obj [additional paramets for compiled template]
75-
*/
76-
updateMsg: function(params) {
77-
var msg = '';
78-
79-
if(MESSAGES[params.msg]) {
80-
msg = MESSAGES[params.msg];
81-
} else {
82-
msg = _.template( $('#' + params.msg).html() )(params.obj);
83-
}
84-
85-
this.$cl
86-
.empty()
87-
.append(msg);
88-
},
8970
toggleRemoteVideoView: function(userID, action) {
9071
var $video = $('#remote_video_' + userID);
9172

@@ -132,9 +113,9 @@
132113

133114
ui.createUsers(QBUsers, ui.$usersList);
134115
ui.$usersTitle.text(MESSAGES.title_login);
135-
116+
136117
if(!params.withoutUpdMsg || params.msg) {
137-
ui.updateMsg({msg: params.msg});
118+
qbApp.MsgBoard.update(params.msg);
138119
}
139120
}
140121

@@ -159,7 +140,7 @@
159140

160141
/** if app.caller is not exist create caller, if no - add callees */
161142
if(!window.navigator.onLine) {
162-
ui.updateMsg({msg: 'no_internet'});
143+
qbApp.MsgBoard.update('no_internet');
163144
} else {
164145
if(_.isEmpty(app.caller)) {
165146
authorizationing = true;
@@ -178,7 +159,7 @@
178159

179160
ui.$usersList.empty();
180161

181-
ui.updateMsg( {msg: 'connect'} );
162+
qbApp.MsgBoard.update('connect');
182163

183164
QB.chat.connect({
184165
jid: QB.chat.helpers.getUserJid( app.caller.id, QBApp.appId ),
@@ -194,7 +175,7 @@
194175
ui.createUsers(usersWithoutCaller, ui.$usersList);
195176

196177
ui.$usersTitle.text(MESSAGES.title_callee);
197-
ui.updateMsg( {msg: 'login_tpl', obj: {name: app.caller.full_name}} );
178+
qbApp.MsgBoard.update('login_tpl', {name: app.caller.full_name});
198179

199180
ui.$panel.removeClass('hidden');
200181
ui.setPositionFooter();
@@ -240,16 +221,16 @@
240221
};
241222

242223
if(!window.navigator.onLine) {
243-
ui.updateMsg({msg: 'no_internet'});
224+
qbApp.MsgBoard.update('no_internet');
244225
} else {
245226
if ( _.isEmpty(app.callees) ) {
246227
$('#error_no_calles').modal();
247228
} else {
248-
ui.updateMsg( {msg: 'create_session'} );
229+
qbApp.MsgBoard.update('create_session');
249230
app.currentSession = QB.webrtc.createNewSession(Object.keys(app.callees), QB.webrtc.CallType.VIDEO);
250231
app.currentSession.getUserMedia(mediaParams, function(err, stream) {
251232
if (err || !stream.getAudioTracks().length || !stream.getVideoTracks().length) {
252-
ui.updateMsg({msg: 'device_not_found', obj: {name: app.caller.full_name}});
233+
qbApp.MsgBoard.update('device_not_found', {name: app.caller.full_name});
253234
app.currentSession.stop({});
254235
} else {
255236
app.currentSession.call({}, function(error) {
@@ -258,7 +239,7 @@
258239
} else {
259240
var compiled = _.template( $('#callee_video').html() );
260241

261-
ui.updateMsg({msg: 'calling'});
242+
qbApp.MsgBoard.update('calling');
262243
document.getElementById(ui.sounds.call).play();
263244

264245
/** create video elements for callees */
@@ -284,7 +265,7 @@
284265
app.currentSession.stop({});
285266
app.currentSession = {};
286267

287-
ui.updateMsg( {msg: 'login_tpl', obj: {name: app.caller.full_name}} );
268+
qbApp.MsgBoard.update('login_tpl', {name: app.caller.full_name});
288269
}
289270
});
290271

@@ -307,7 +288,7 @@
307288

308289
app.currentSession.getUserMedia(mediaParams, function(err, stream) {
309290
if (err) {
310-
ui.updateMsg({msg: 'device_not_found', obj: {name: app.caller.full_name}});
291+
qbApp.MsgBoard.update('device_not_found', {name: app.caller.full_name});
311292
isDeviceAccess = false;
312293
app.currentSession.stop({});
313294
} else {
@@ -338,7 +319,7 @@
338319
});
339320

340321
ui.$callees.append(videoElems);
341-
ui.updateMsg( {msg: 'during_call', obj: {name: app.caller.full_name}} );
322+
qbApp.MsgBoard.update('during_call', {name: app.caller.full_name});
342323
ui.setPositionFooter();
343324

344325
app.currentSession.accept({});
@@ -384,7 +365,7 @@
384365
if( app.currentSession.peerConnections[userID].stream && !_.isEmpty( $that.attr('src')) ) {
385366
if( $that.hasClass('active') ) {
386367
$that.removeClass('active');
387-
368+
388369
app.currentSession.detachMediaStream('main_video');
389370
ui.changeFilter('#main_video', 'no');
390371
app.mainVideo = 0;
@@ -423,7 +404,7 @@
423404

424405
/** Before use WebRTC checking WebRTC is avaible */
425406
if (!QB.webrtc) {
426-
ui.updateMsg( {msg: 'webrtc_not_avaible'} );
407+
qbApp.MsgBoard.update('webrtc_not_avaible');
427408
} else {
428409
/**
429410
* QB Event listener:
@@ -473,7 +454,7 @@
473454
isDeviceAccess = true;
474455
} else {
475456
if(session.opponentsIDs.length > 1) {
476-
ui.updateMsg({msg: 'call_stop', obj: {name: app.caller.full_name}});
457+
qbApp.MsgBoard.update('call_stop', {name: app.caller.full_name});
477458
}
478459
}
479460

@@ -498,17 +479,19 @@
498479
console.log('Session: ' + session);
499480
console.groupEnd();
500481

501-
var userInfo = _.findWhere(QBUsers, {id: +userId});
482+
var userInfo = _.findWhere(QBUsers, {id: +userId}),
483+
currentUserInfo = _.findWhere(QBUsers, {id: app.currentSession.currentUserID});
502484

503485
/** It's for p2p call */
504486
if(session.opponentsIDs.length === 1) {
505-
ui.updateMsg({
506-
msg: 'p2p_call_stop',
507-
obj: {
508-
name: userInfo.full_name,
509-
reason: 'not answered'
510-
}
511-
});
487+
qbApp.MsgBoard.update(
488+
'p2p_call_stop',
489+
{
490+
name: userInfo.full_name,
491+
currentName: currentUserInfo.full_name,
492+
reason: 'not answered'
493+
}
494+
);
512495
}
513496

514497
/** It's for groups call */
@@ -565,9 +548,9 @@
565548

566549
/** update list of callee who take call */
567550
takedCallCallee.push(userInfo);
568-
551+
569552
if(app.currentSession.currentUserID === app.currentSession.initiatorID) {
570-
ui.updateMsg( {msg: 'accept_call', obj: {users: takedCallCallee }} );
553+
qbApp.MsgBoard.update('accept_call', {users: takedCallCallee});
571554
}
572555
};
573556

@@ -578,17 +561,19 @@
578561
console.log('Extension: ' + JSON.stringify(extension));
579562
console.groupEnd();
580563

581-
var userInfo = _.findWhere(QBUsers, {id: userId});
564+
var userInfo = _.findWhere(QBUsers, {id: userId}),
565+
currentUserInfo = _.findWhere(QBUsers, {id: app.currentSession.currentUserID});
582566

583567
/** It's for p2p call */
584568
if(session.opponentsIDs.length === 1) {
585-
ui.updateMsg({
586-
msg: 'p2p_call_stop',
587-
obj: {
588-
name: userInfo.full_name,
589-
reason: 'rejected the call'
590-
}
591-
});
569+
qbApp.MsgBoard.update(
570+
'p2p_call_stop',
571+
{
572+
name: userInfo.full_name,
573+
currentName: currentUserInfo.full_name,
574+
reason: 'rejected the call'
575+
}
576+
);
592577
}
593578

594579
/** It's for groups call */
@@ -602,17 +587,20 @@
602587
console.log('Extension: ' + JSON.stringify(extension));
603588
console.groupEnd();
604589

605-
var userInfo = _.findWhere(QBUsers, {id: userId});
590+
/** It's for p2p call */
591+
var userInfo = _.findWhere(QBUsers, {id: userId}),
592+
currentUserInfo = _.findWhere(QBUsers, {id: app.currentSession.currentUserID});
606593

607594
/** It's for p2p call */
608595
if(session.opponentsIDs.length === 1) {
609-
ui.updateMsg({
610-
msg: 'p2p_call_stop',
611-
obj: {
612-
name: userInfo.full_name,
613-
reason: 'hung up the call'
614-
}
615-
});
596+
qbApp.MsgBoard.update(
597+
'p2p_call_stop',
598+
{
599+
name: userInfo.full_name,
600+
currentName: currentUserInfo.full_name,
601+
reason: 'hung up the call'
602+
}
603+
);
616604
}
617605

618606
/** It's for groups call */
@@ -627,10 +615,10 @@
627615
app.currentSession.peerConnections[userID].stream = stream;
628616

629617
app.currentSession.attachMediaStream('remote_video_' + userID, stream);
630-
618+
631619
if( remoteStreamCounter === 0) {
632620
$('#remote_video_' + userID).click();
633-
621+
634622
app.mainVideo = userID;
635623
++remoteStreamCounter;
636624
}
@@ -673,7 +661,7 @@
673661
if(connectionState === QB.webrtc.SessionConnectionState.CLOSED){
674662
ui.toggleRemoteVideoView(userID, 'clear');
675663
document.getElementById(ui.sounds.rington).pause();
676-
664+
677665
if(app.mainVideo === userID) {
678666
$('#remote_video_' + userID).removeClass('active');
679667

@@ -703,14 +691,15 @@
703691

704692
if (app.currentSession.currentUserID === app.currentSession.initiatorID && !isCallEnded) {
705693
/** get array if users without user who ends call */
706-
takedCallCallee = _.reject(takedCallCallee, function(num){ return num.id !== +userID; });
707-
ui.updateMsg( {msg: 'accept_call', obj: {users: takedCallCallee }} );
694+
takedCallCallee = _.reject(takedCallCallee, function(num){ return num.id === +userID; });
695+
696+
qbApp.MsgBoard.update('accept_call', {users: takedCallCallee});
708697
}
709698

710699
if( _.isEmpty(app.currentSession) || isCallEnded ) {
711700
if(callTimer) {
712701
$('#timer').addClass('hidden');
713-
702+
714703
clearInterval(callTimer);
715704
callTimer = null;
716705
ui.callTime = 0;
@@ -720,4 +709,4 @@
720709
};
721710
}
722711
});
723-
}(window, jQuery));
712+
}(window, jQuery));

‎samples/webrtc/js/msgBoard.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/**
2+
* Require:
3+
* - jQuery;
4+
* - Underscore;
5+
* - MESSAGES (window.MESSAGES) - global const object with custom messages (from config.js);
6+
*/
7+
;(function(window, $, _) {
8+
'use strict';
9+
10+
var msgBoard = (function() {
11+
var msgBoardEl = document.getElementById('msg_board');
12+
13+
/**
14+
* [updateMsg]
15+
* @param {[String]} msg_title [key for MESSAGES object / id of template]
16+
* @param {[Objetc]} params [custom params for compiled template]
17+
*/
18+
var updateMsg = function(msg_title, params) {
19+
var msg = '',
20+
msgFrag = document.createElement('div');
21+
22+
msgFrag.className = 'fw-inner';
23+
/**
24+
* In first we trying found msg in MESSAGES object
25+
* then tpl with id like msg_title
26+
*/
27+
if(MESSAGES[msg_title]) {
28+
msg = MESSAGES[msg_title];
29+
} else if(!!document.querySelector('#' + msg_title)) {
30+
msg = _.template( document.querySelector('#' + msg_title).innerHTML )(params);
31+
} else {
32+
throw new Error('[msgBoard] Not found msg with name '+ msg_title);
33+
}
34+
35+
msgBoardEl.innerHTML = '';
36+
37+
msgFrag.innerHTML = msg;
38+
msgBoardEl.appendChild(msgFrag);
39+
};
40+
41+
return {
42+
update: updateMsg
43+
};
44+
}());
45+
46+
/**
47+
* Check global variable
48+
* and add constructor MsgBoard
49+
*/
50+
window.qbApp = window.qbApp || {};
51+
window.qbApp.MsgBoard = msgBoard;
52+
}(window, jQuery, _));

0 commit comments

Comments
 (0)