I'm trying to develop and application that allow to a medic and a patient be able to communicate using an Api called connectycube, the chat and video call work, the problem is with to mute sound and video. I have implemented the buttons to mute sound and video, all this using jQuery dialogs, the first time I mute audio or video works, but when I close the dialog finishing the session and then I open the dialog with a new session, to mute audio and video do not work anymore and the message in the console is This.localStream is null
My Source Code:
const CREDENTIALS = {
appId: 'xxxxx',
authKey: 'xxxxx',
authSecret: 'xxxxx'
};
ConnectyCube.init(CREDENTIALS);
//This is a button in a main jquery dialog, this is the beginning of all
{
text: 'VideoCall',
click: function () {
$('#dv_progess').html('<div class="dv_progress">Connecting</div>').dialog('open');
ConnectyCube.createSession().then((session) => {
$('#dv_progess').dialog('close');
signup_user();
$('#dv_videocall').dialog('option', 'position', {my: 'right top', at: 'right top', of: window}).dialog('open');
}).catch((error) => {
console.log('Error=>' + JSON.stringify(error));
$('#dv_progess').dialog('close');
$('#dv_message').html('Error=>' + JSON.stringify(error)).dialog('open');
});
}
},
function signup_user() {
var login = 'P' + $('#hd_idusr').val();
/*Buscar si existe usuario registrado en la API*/
$('#dv_progress').html('<div class="dv_progress">Connecting</div>').dialog('open');
ConnectyCube.users.get({login: login}).then((result) => {
console.log('User Exists:' + result.user.id);
$('#dv_progress').dialog('close');
chat();
}).catch((error) => {
$('#dv_progress').dialog('close');
console.log('User not exists [' + error.info.message + ']');
var password = $('#txt_birthdate').val().replace(/-/g, '') + '*';
var email = $('#hd_email').val();
email = email ? email : login + '@email.com';
const userProfile = {
login: login,
password: password,
full_name: $('#txt_names').val(),
email: email
};
$('#dv_progress').html('<div class="dv_progress">Connecting</div>').dialog('open');
ConnectyCube.users.signup(userProfile).then((data) => {
console.log('ok=>' + data.user.id);
$('#dv_progress').dialog('close');
chat();
}).catch((error) => {
console.log('Error=>' + JSON.stringify(error));
$('#dv_progress').dialog('close');
$('#dv_messages').html('Error=>' + JSON.stringify(error)).dialog('open');
});
});
}
function chat() {
$('#dv_progress').html('<div class="dv_progress">Connecting</div>').dialog('open');
var login_patient = 'P' + $('#hd_idusr').val();
ConnectyCube.users.get({login: login_patient}).then((result) => {
$('#dv_progress').dialog('close');
var id_patient = result.user.id;
$('#hd_idpatient').val(id_patient);
const userCredentials = {
login: 'S' + $('#txt_medic').attr('data-id-user'),
password: $('#txt_medic').attr('data-psw')
};
$('#dv_progress').html('<div class="dv_progress">Connecting</div>').dialog('open');
ConnectyCube.createSession(userCredentials).then((session) => {
$('#dv_progress').dialog('close');
console.log(JSON.stringify(session));
console.log('Medic Created session');
$('#dv_progress').html('<div class="dv_progress">Connecting</div>').dialog('open');
ConnectyCube.login(userCredentials).then((user) => {
var id_professional = user.id;
console.log('Medic login succesful=>' + id_professional);
$('#hd_idprofessional').val(id_professional);
const chatCredentials = {
userId: id_professional,
password: $('#txt_medic').attr('data-psw')
};
$('#dv_progress').html('<div class="dv_progress">Connecting</div>').dialog('open');
ConnectyCube.chat.connect(chatCredentials).then(() => {
$('#dv_progress').dialog('close');
console.log('Medic Connected to chat');
console.log('Id Paciente:' + id_patient);
const dialogParams = {
type: 3,
occupants_ids: [id_patient]
};
$('#dv_progress').html('<div class="dv_progress">Connecting</div>').dialog('open');
ConnectyCube.chat.dialog.create(dialogParams).then(dialog => {
$('#dv_progress').dialog('close');
console.log(JSON.stringify(dialog));
console.log('Dialog Created:' + dialog._id);
$('#hd_iddialog').val(dialog._id);
$('#dv_messagearea').prop('contenteditable', true);
$('#btn_sendmsg,#btn_startvideocall,#btn_finishvideocall').prop('disabled', false);
}).catch(error => {
console.log('Error=>' + JSON.stringify(error));
$('#dv_progress').dialog('close');
$('#dv_messages').html('Error=>' + JSON.stringify(error)).dialog('open');
});
}).catch((error) => {
console.log('Error:' + JSON.stringify(error));
$('#dv_progress').dialog('close');
$('#dv_messages').html('Error:' + JSON.stringify(error)).dialog('open');
});
}).catch((error) => {
console.log('Error:' + JSON.stringify(error));
$('#dv_progress').dialog('close');
$('#dv_messages').html('Error:' + JSON.stringify(error)).dialog('open');
});
}).catch((error) => {
console.log('Error=>' + JSON.stringify(error));
$('#dv_progress').dialog('close');
$('#dv_messages').html('Error=>' + JSON.stringify(error)).dialog('open');
});
/*Fin Login Medico*/
}).catch((error) => {
console.log('Error=>' + JSON.stringify(error));
$('#dv_progress').dialog('close');
$('#dv_messages').html('Error=>' + JSON.stringify(error)).dialog('open');
});
}
function onMessage(userId, message) {
console.log('[ConnectyCube.chat.onMessageListener] callback:', userId, message);
var dv_message = $('#dv_messageschat');
dv_message.append('<div><b>Patient:</b>' + message.body + '</div>');
dv_message.scrollTop(dv_message[0].scrollHeight);
}
function isTyPing(isTyping, userId, dialogId) {
console.log("[ConnectyCube.chat.onMessageTypingListener] callback:", isTyping, userId, dialogId);
}
function sendMessage() {
ConnectyCube.chat.sendIsStopTypingStatus($('#hd_idpatient').val());
var mensaje = $('#dv_messagearea').text();
const message = {
type: 'chat',
body: mensaje,
extension: {
save_to_history: 1,
dialog_id: $('#hd_iddialog').val()
},
markable: 1
};
message.id = ConnectyCube.chat.send($('#hd_idpatient').val(), message);
var dv_message = $('#dv_messageschat');
dv_message.append('<div><b>Yo:</b>' + mensaje + '</div>');
dv_message.scrollTop(dv_message[0].scrollHeight);
$('#dv_messagearea').html('');
}
$('#dv_messagearea').keypress(function (e) {
ConnectyCube.chat.sendIsTypingStatus($('#hd_idpatient').val());
setTimeout(function () {
ConnectyCube.chat.sendIsStopTypingStatus($('#hd_idpatient').val());
}, 1000);
if (e.keyCode == 13) {
sendMessage();
return false;
}
});
function startVideo() {
const calleesIds = [$('#hd_idprofessional').val(), $('#hd_idpatient').val()]; /*User's ids*/
const sessionType = ConnectyCube.videochat.CallType.VIDEO;
const additionalOptions = {};
const session = ConnectyCube.videochat.createNewSession(calleesIds, sessionType, additionalOptions);
const mediaParams = {
audio: true,
video: true,
options: {
muted: true,
mirror: true
}
};
session.getUserMedia(mediaParams).then((localStream) => {
console.log(JSON.stringify(localStream));
session.attachMediaStream('vd_video1', localStream);
/*Iniciar la llamada*/
const extension = {};
session.call(extension, (error) => {
console.log(JSON.stringify(error));
});
$('#btn_finishvideocall').on('click', {x: session}, finishCall);
}).catch((error) => {
console.log(JSON.stringify(error));
});
}
function finishCall(e) {
const extension = {};
e.data.x.stop(extension);
/*Clean local stream*/
var videoElem1 = document.getElementById('vd_video1'),
stream1 = videoElem1.srcObject;
if (stream1 != null) {
var tracks = stream1.getTracks();
tracks.forEach(function (track) {
track.stop();
});
videoElem1.srcObject = null;
}
/*Clean remote stream*/
var videoElem2 = document.getElementById('vd_video2'),
stream2 = videoElem2.srcObject;
if (stream2 != null) {
var tracks = stream2.getTracks();
tracks.forEach(function (track) {
track.stop();
});
videoElem2.srcObject = null;
}
}
$('#dv_controllsvideocall').find('button').prop('disabled', true);
$('#btn_mutesound,#btn_mutevideo').hide();
function setSound(e) {
const session = e.data.x;
if (e.data.y == 'mute') {
$('#btn_mutesound').show();
$('#btn_unmutesound').hide();
session.mute('audio');
console.log('muted audio');
} else {
$('#btn_mutesound').hide();
$('#btn_unmutesound').show();
session.unmute('audio');
console.log('unmuted audio');
}
}
function setVideo(e) {
const session = e.data.x;
if (e.data.y == 'mute') {
$('#btn_mutevideo').show();
$('#btn_unmutevideo').hide();
session.mute('video');
console.log('muted video');
} else {
$('#btn_mutevideo').hide();
$('#btn_unmutevideo').show();
session.unmute('video');
console.log('unmuted video');
}
}
function acceptedCall(session, userId, extension) {
console.log('Accepted call');
$('#dv_controllsvideocall').find('button').prop('disabled', false);
}
function setStream(session, userID, remoteStream) {
console.log('stream assigned');
session.attachMediaStream('vd_video2', remoteStream);
$('#btn_mutesound').on('click', {x: session, y: 'unmute'}, setSound);
$('#btn_unmutesound').on('click', {x: session, y: 'mute'}, setSound);
$('#btn_mutevideo').on('click', {x: session, y: 'unmute'}, setVideo);
$('#btn_unmutevideo').on('click', {x: session, y: 'mute'}, setVideo);
}
function onStopCall(session, userId, extension) {
console.log('Finished Call');
}
ConnectyCube.chat.onMessageListener = onMessage;
ConnectyCube.chat.onMessageTypingListener = isTyPing;
ConnectyCube.videochat.onAcceptCallListener = acceptedCall;
ConnectyCube.videochat.onRemoteStreamListener = setStream;
ConnectyCube.videochat.onStopCallListener = onStopCall;
$('#btn_sendmsg').click(function () {
sendMessage();
});
$('#btn_startvideocall').click(function () {
startVideo();
});
$('#btn_exitvideocall').click(function () {
$('#dv_videocall').dialog('close');
});
/*Dialog for video call*/
$('#dv_videocall').dialog({
autoOpen: false,
resizable: false,
height: 600,
width: 220,
modal: false,
close: function () {
$(this).find('input').val('');
$('#dv_messagearea').prop('contenteditable', false).html('');
$('#dv_messageschat').html('');
$('#btn_sendmsg,#btn_startvideocall,#btn_finishvideocall').prop('disabled', true);
$('#dv_controllsvideocall').find('button').prop('disabled', true);
if (ConnectyCube.chat.isConnected) {
$('#btn_finishvideocall').trigger('click');
ConnectyCube.chat.disconnect();
ConnectyCube.logout().catch((error) => {
console.log('logout=>' + JSON.stringify(error));
});
ConnectyCube.destroySession().catch((error) => {
console.log('destroySession=>' + JSON.stringify(error));
});
}
}
});
$(window).bind('beforeunload', function () {
if (ConnectyCube.chat.isConnected) {
$('#btn_finishvideocall').trigger('click');
ConnectyCube.chat.disconnect();
ConnectyCube.logout().catch((error) => {
console.log('logout=>' + JSON.stringify(error));
});
ConnectyCube.destroySession().catch((error) => {
console.log('destroySession=>' + JSON.stringify(error));
});
}
});
I think the problem is in the function finishCall() when I clean the video tag and I don't know if that is the right way to free the resources. Despite this the chat and video call still work.
If someone has experience please help me, becasue I didn't found any solution, thanks in advance.