chrome ask multiple time to allow use of speaker and mic for incoming call in twilio - twilio

Question

I am creating a call center application ,and when a call come to twilio client on chrome browser it ask for permission to allow use of speaker and mic .When second call comes I have to allow it for two times and if third call come I have to allow three times and so on.
and in firfox browser ,when I acccept call second time it automatically disconnect and give error of mediastream.
Please suggest me where I am wrong and how to solve this problem.
Below is the javascript of twilio client,If need some more information please let me know
<script
type="text/javascript">
//var
token
=callaction();
var
connection=null;
var
content;
$(document).ready(function(){
$('#hangupcallbutton').hide();
$.post('cleanify?action=createcall',
function(data){
content=
data;
Twilio.Device.setup(content,
{
debug:
true}
);
}
);
Twilio.Device.ready(function
(device)
{
$("#log").text("Ready");
}
);
Twilio.Device.error(function
(error)
{
$("#log").text("Error:
"
+
error.message);
}
);
Twilio.Device.connect(function
(conn)
{
//alert("connect
handler");
$("#log").text("Successfully
established
call");
connection
=
conn;
}
);
Twilio.Device.disconnect(function
(conn)
{
//alert("in
disconnect");
$("#callbutton").html('Call');
$("#callbutton").removeClass("btn-danger
").addClass("btn-success");
//
$("#callbutton").toggleClass('btn-danger
btn-success');
$("#log").text("Call
ended");
$('#RejectCallButton').show();
$('#acceptcallbutton').show();
$('#hangupcallbutton').hide();
$('#myModal').modal('hide');
}
);
Twilio.Device.incoming(function
(conn)
{
//
alert("in
incomming");
connection
=
conn;
$("#log").text("aa
rahi
h
call");
$('#myModal').modal('show');
$('#incomingnumber').html(conn.parameters.From);
$('#RejectCallButton').click(function()
{
connection.reject();
}
);
$('#acceptcallbutton').click(function()
{
connection.accept();
$('#RejectCallButton').hide();
$('#acceptcallbutton').hide();
$('#hangupcallbutton').show();
}
);
$('#hangupcallbutton').click(function()
{
$('#RejectCallButton').show();
$('#acceptcallbutton').show();
$('#hangupcallbutton').hide();
connection.disconnect();
}
);
//
accept
the
incoming
connection
and
start
two-way
audio
}
);
Twilio.Device.cancel(
function
(conn)
{
//alert("in
cancel");
connection
=
conn;
$('#myModal').modal('hide');
}
);
$.each(['0','1','2','3','4','5','6','7','8','9','star','pound'],
function(index,
value)
{
$('#button'
+
value).click(function(){
//alert("hello");
if(connection)
{
if
(value=='star')
connection.sendDigits('*')
else
if
(value=='pound')
connection.sendDigits('#')
else
connection.sendDigits(value)
return
false;
}
}
);
}
);
//
Do
something
with
c
alert(content);
}
);
function
callhandle(){
if($("#callbutton").html().trim()
==
'Call'){
$("#callbutton").html('HangUp');
$("#callbutton").removeClass("btn-success").addClass("btn-danger");
//
$("#callbutton").toggleClass('btn-success
btn-danger');
call();
}
else
if($("#callbutton").html().trim()
==
'HangUp'){
hangup();
$("#callbutton").html('Call');
$("#callbutton").removeClass("btn-danger").addClass("btn-success");
//
$("#callbutton").toggleClass('btn-danger
btn-success');
}
}
function
call()
{
//
get
the
phone
number
to
connect
the
call
to
//
get
the
phone
number
to
connect
the
call
to
//
alert(
$("#selectOutgoing").val());
params
=
{"PhoneNumber":
$('.dialnumber').val(),"From":
$("#selectOutgoing").val(),"isclient":
"true"}
;
Twilio.Device.connect(params);
}
function
hangup()
{
Twilio.Device.disconnectAll();
}
</script>

Answer 1

From my experience, Chrome will only store those settings over HTTPS. Over HTPP Chrome will not store the settings thus it will prompt for the permissions every time

Answer 2

It might happen after a call before initialize twilio when you get another call . So , you must initialize first .