Skip to content

review sample (webRTC) #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 5, 2016
Merged

review sample (webRTC) #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
99bbe84
module msgBoard
dimaspirit Dec 31, 2015
801d95b
move appjs to js folder (review sample)
dimaspirit Jan 4, 2016
49cecdf
fix poblem with 'login as' and current user
dimaspirit Jan 4, 2016
195dc36
fix bug - write all callee who accept to call
dimaspirit Jan 4, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions quickblox.min.js
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 4 additions & 9 deletions samples/webrtc/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,7 @@ <h2 class="header__title">JavaScript WebRTC Sample</h2>
</div>
</header>

<aside class="console">
<div class="fw-inner">
<p class="console__txt j-console">
</p>
</div>
</aside>
<aside class="msg_board" id="msg_board"></aside>

<main class="main j-main">
<div class="fw-inner">
Expand Down Expand Up @@ -201,7 +196,6 @@ <h4>Call from <strong class="j-ic_initiator"></strong></h4>
</li>
</script>


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

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

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

<script src="config.js"></script>
<script src="app.js"></script>
<script src="js/msgBoard.js"></script>
<script src="js/app.js"></script>
</body>
</html>
123 changes: 56 additions & 67 deletions samples/webrtc/app.js → samples/webrtc/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
var ui = {
$usersTitle: $('.j-users__title'),
$usersList: $('.j-users__list'),
$cl: $('.j-console'),

$panel: $('.j-pl'),
$callees: $('.j-callees'),
Expand Down Expand Up @@ -68,24 +67,6 @@
this.$btnHangup.removeClass('hidden');
this.$btnCall.addClass('hidden');
},
/**
* [updateMsg update massage for user]
* @param {[string]} msg_name [key for MESSAGES object / name(id) of template]
* @param {[object]} obj [additional paramets for compiled template]
*/
updateMsg: function(params) {
var msg = '';

if(MESSAGES[params.msg]) {
msg = MESSAGES[params.msg];
} else {
msg = _.template( $('#' + params.msg).html() )(params.obj);
}

this.$cl
.empty()
.append(msg);
},
toggleRemoteVideoView: function(userID, action) {
var $video = $('#remote_video_' + userID);

Expand Down Expand Up @@ -132,9 +113,9 @@

ui.createUsers(QBUsers, ui.$usersList);
ui.$usersTitle.text(MESSAGES.title_login);

if(!params.withoutUpdMsg || params.msg) {
ui.updateMsg({msg: params.msg});
qbApp.MsgBoard.update(params.msg);
}
}

Expand All @@ -159,7 +140,7 @@

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

ui.$usersList.empty();

ui.updateMsg( {msg: 'connect'} );
qbApp.MsgBoard.update('connect');

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

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

ui.$panel.removeClass('hidden');
ui.setPositionFooter();
Expand Down Expand Up @@ -240,16 +221,16 @@
};

if(!window.navigator.onLine) {
ui.updateMsg({msg: 'no_internet'});
qbApp.MsgBoard.update('no_internet');
} else {
if ( _.isEmpty(app.callees) ) {
$('#error_no_calles').modal();
} else {
ui.updateMsg( {msg: 'create_session'} );
qbApp.MsgBoard.update('create_session');
app.currentSession = QB.webrtc.createNewSession(Object.keys(app.callees), QB.webrtc.CallType.VIDEO);
app.currentSession.getUserMedia(mediaParams, function(err, stream) {
if (err || !stream.getAudioTracks().length || !stream.getVideoTracks().length) {
ui.updateMsg({msg: 'device_not_found', obj: {name: app.caller.full_name}});
qbApp.MsgBoard.update('device_not_found', {name: app.caller.full_name});
app.currentSession.stop({});
} else {
app.currentSession.call({}, function(error) {
Expand All @@ -258,7 +239,7 @@
} else {
var compiled = _.template( $('#callee_video').html() );

ui.updateMsg({msg: 'calling'});
qbApp.MsgBoard.update('calling');
document.getElementById(ui.sounds.call).play();

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

ui.updateMsg( {msg: 'login_tpl', obj: {name: app.caller.full_name}} );
qbApp.MsgBoard.update('login_tpl', {name: app.caller.full_name});
}
});

Expand All @@ -307,7 +288,7 @@

app.currentSession.getUserMedia(mediaParams, function(err, stream) {
if (err) {
ui.updateMsg({msg: 'device_not_found', obj: {name: app.caller.full_name}});
qbApp.MsgBoard.update('device_not_found', {name: app.caller.full_name});
isDeviceAccess = false;
app.currentSession.stop({});
} else {
Expand Down Expand Up @@ -338,7 +319,7 @@
});

ui.$callees.append(videoElems);
ui.updateMsg( {msg: 'during_call', obj: {name: app.caller.full_name}} );
qbApp.MsgBoard.update('during_call', {name: app.caller.full_name});
ui.setPositionFooter();

app.currentSession.accept({});
Expand Down Expand Up @@ -384,7 +365,7 @@
if( app.currentSession.peerConnections[userID].stream && !_.isEmpty( $that.attr('src')) ) {
if( $that.hasClass('active') ) {
$that.removeClass('active');

app.currentSession.detachMediaStream('main_video');
ui.changeFilter('#main_video', 'no');
app.mainVideo = 0;
Expand Down Expand Up @@ -423,7 +404,7 @@

/** Before use WebRTC checking WebRTC is avaible */
if (!QB.webrtc) {
ui.updateMsg( {msg: 'webrtc_not_avaible'} );
qbApp.MsgBoard.update('webrtc_not_avaible');
} else {
/**
* QB Event listener:
Expand Down Expand Up @@ -473,7 +454,7 @@
isDeviceAccess = true;
} else {
if(session.opponentsIDs.length > 1) {
ui.updateMsg({msg: 'call_stop', obj: {name: app.caller.full_name}});
qbApp.MsgBoard.update('call_stop', {name: app.caller.full_name});
}
}

Expand All @@ -498,17 +479,19 @@
console.log('Session: ' + session);
console.groupEnd();

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

/** It's for p2p call */
if(session.opponentsIDs.length === 1) {
ui.updateMsg({
msg: 'p2p_call_stop',
obj: {
name: userInfo.full_name,
reason: 'not answered'
}
});
qbApp.MsgBoard.update(
'p2p_call_stop',
{
name: userInfo.full_name,
currentName: currentUserInfo.full_name,
reason: 'not answered'
}
);
}

/** It's for groups call */
Expand Down Expand Up @@ -565,9 +548,9 @@

/** update list of callee who take call */
takedCallCallee.push(userInfo);

if(app.currentSession.currentUserID === app.currentSession.initiatorID) {
ui.updateMsg( {msg: 'accept_call', obj: {users: takedCallCallee }} );
qbApp.MsgBoard.update('accept_call', {users: takedCallCallee});
}
};

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

var userInfo = _.findWhere(QBUsers, {id: userId});
var userInfo = _.findWhere(QBUsers, {id: userId}),
currentUserInfo = _.findWhere(QBUsers, {id: app.currentSession.currentUserID});

/** It's for p2p call */
if(session.opponentsIDs.length === 1) {
ui.updateMsg({
msg: 'p2p_call_stop',
obj: {
name: userInfo.full_name,
reason: 'rejected the call'
}
});
qbApp.MsgBoard.update(
'p2p_call_stop',
{
name: userInfo.full_name,
currentName: currentUserInfo.full_name,
reason: 'rejected the call'
}
);
}

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

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

/** It's for p2p call */
if(session.opponentsIDs.length === 1) {
ui.updateMsg({
msg: 'p2p_call_stop',
obj: {
name: userInfo.full_name,
reason: 'hung up the call'
}
});
qbApp.MsgBoard.update(
'p2p_call_stop',
{
name: userInfo.full_name,
currentName: currentUserInfo.full_name,
reason: 'hung up the call'
}
);
}

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

app.currentSession.attachMediaStream('remote_video_' + userID, stream);

if( remoteStreamCounter === 0) {
$('#remote_video_' + userID).click();

app.mainVideo = userID;
++remoteStreamCounter;
}
Expand Down Expand Up @@ -673,7 +661,7 @@
if(connectionState === QB.webrtc.SessionConnectionState.CLOSED){
ui.toggleRemoteVideoView(userID, 'clear');
document.getElementById(ui.sounds.rington).pause();

if(app.mainVideo === userID) {
$('#remote_video_' + userID).removeClass('active');

Expand Down Expand Up @@ -703,14 +691,15 @@

if (app.currentSession.currentUserID === app.currentSession.initiatorID && !isCallEnded) {
/** get array if users without user who ends call */
takedCallCallee = _.reject(takedCallCallee, function(num){ return num.id !== +userID; });
ui.updateMsg( {msg: 'accept_call', obj: {users: takedCallCallee }} );
takedCallCallee = _.reject(takedCallCallee, function(num){ return num.id === +userID; });

qbApp.MsgBoard.update('accept_call', {users: takedCallCallee});
}

if( _.isEmpty(app.currentSession) || isCallEnded ) {
if(callTimer) {
$('#timer').addClass('hidden');

clearInterval(callTimer);
callTimer = null;
ui.callTime = 0;
Expand All @@ -720,4 +709,4 @@
};
}
});
}(window, jQuery));
}(window, jQuery));
52 changes: 52 additions & 0 deletions samples/webrtc/js/msgBoard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* Require:
* - jQuery;
* - Underscore;
* - MESSAGES (window.MESSAGES) - global const object with custom messages (from config.js);
*/
;(function(window, $, _) {
'use strict';

var msgBoard = (function() {
var msgBoardEl = document.getElementById('msg_board');

/**
* [updateMsg]
* @param {[String]} msg_title [key for MESSAGES object / id of template]
* @param {[Objetc]} params [custom params for compiled template]
*/
var updateMsg = function(msg_title, params) {
var msg = '',
msgFrag = document.createElement('div');

msgFrag.className = 'fw-inner';
/**
* In first we trying found msg in MESSAGES object
* then tpl with id like msg_title
*/
if(MESSAGES[msg_title]) {
msg = MESSAGES[msg_title];
} else if(!!document.querySelector('#' + msg_title)) {
msg = _.template( document.querySelector('#' + msg_title).innerHTML )(params);
} else {
throw new Error('[msgBoard] Not found msg with name '+ msg_title);
}

msgBoardEl.innerHTML = '';

msgFrag.innerHTML = msg;
msgBoardEl.appendChild(msgFrag);
};

return {
update: updateMsg
};
}());

/**
* Check global variable
* and add constructor MsgBoard
*/
window.qbApp = window.qbApp || {};
window.qbApp.MsgBoard = msgBoard;
}(window, jQuery, _));
Loading