Issue
Code backup
This commit is contained in:
@@ -0,0 +1,445 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<!-- an example of using the webphone library (phone API usage demonstartion) -->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>API Example</title>
|
||||
<script src="../webphone_api.js?jscodeversion=523"></script>
|
||||
<style>
|
||||
#msg_list { margin: .5em 0em .3em 0em; background: #ffffff; overflow-y: auto; overflow-x: hidden; width: 274px; height: 160px; text-align: left; border: 1px solid #ccc; border-radius: .1em;}
|
||||
#msg_list B { margin-left: .2em; font-size: .8em; }
|
||||
#msg_list P { margin-left: .6em; margin-top: 0; margin-bottom: .2em; font-size: .8em; }
|
||||
#msg_list .date { margin-top: 0; margin-bottom: .2em; margin-right: .2em; font-weight: bold; font-size: .6em; text-align: right;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>This is a simple example to demonstrate the webphone API usage.<br />
|
||||
See the source of "api_example.html" about how it is done.</div><br />
|
||||
<input type="text" placeholder="VoIP Server address" id="serveraddress" autocapitalize="off"><br />
|
||||
<input type="text" placeholder="Username" id="username" autocapitalize="off"><br />
|
||||
<input type="text" placeholder="Password" id="password" autocapitalize="off"><br />
|
||||
<button onclick="Start();">Start</button><br /><br />
|
||||
<input type="text" placeholder="Destination number" id="destnumber" autocapitalize="off"><br />
|
||||
<button id="btn_call" onclick="Call();">Call</button>
|
||||
<button id="btn_hangup" onclick="Hangup();">Hangup</button><br /><br />
|
||||
|
||||
<!--conference,transfer,mute,hold,chat-->
|
||||
<div id="callfunctions" style="width: 100%; background: #f00;">
|
||||
<button id="btn_conference" onclick="Conference();" title="Conference" style="display: none; float: left; margin-right: .3em;">Conf</button>
|
||||
<button id="btn_transfer" onclick="Transfer();" title="Call transfer" style="display: none; float: left; margin-right: .3em;">Trans</button>
|
||||
<button id="btn_mute" onclick="Mute();" title="Mute/UnMute call" style="display: none; float: left; margin-right: .3em;">Mute</button>
|
||||
<button id="btn_hold" onclick="Hold();" title="Hold/Unhold call" style="display: none; float: left; margin-right: .3em;">Hold</button>
|
||||
<button id="btn_chat" onclick="Chat();" title="Open/Close chat window" style="display: none; float: left;">Chat</button>
|
||||
</div><br /><br />
|
||||
|
||||
<div id="icoming_call_layout">
|
||||
----------------------<br />
|
||||
<button id="btn_accept" onclick="Accept();">Accept</button>
|
||||
<button id="btn_reject" onclick="Reject();">Reject</button><br />
|
||||
----------------------<br /><br />
|
||||
</div>
|
||||
<div id="chatwindow" style="margin-bottom: 1em; display: none;">
|
||||
<span>Chat:</span>
|
||||
<div id="msg_list">
|
||||
<!--<b>Me:</b><p>Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you today?</p><p class="date">Jun 05, 2014 11:59</p>-->
|
||||
</div>
|
||||
<div id="send_container">
|
||||
<input type="text" placeholder="Compose" id="message" value="" title="Enter the chat to be sent" />
|
||||
<button onclick="SendChat()" title="Send chat message">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
<iframe allow="microphone; camera; autoplay" style="display:none" height="0" width="0" id="loader"></iframe>
|
||||
<div id="events"></div>
|
||||
|
||||
<script>
|
||||
var serveraddress_input = document.getElementById('serveraddress');
|
||||
var username_input = document.getElementById('username');
|
||||
var password_input = document.getElementById('password');
|
||||
var destination_input = document.getElementById('destnumber');
|
||||
|
||||
document.getElementById('btn_hangup').disabled = true;
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
|
||||
|
||||
// waiting for "onloaded" event, meaning that the Webphone has loaded all it's modulkes and it's ready to start
|
||||
// if automatic start is required, then webphone_api.start() should be called "onLoaded" event like this:
|
||||
//webphone_api.onAppStateChange(function (state)
|
||||
//{
|
||||
// if (state === 'loaded')
|
||||
// {
|
||||
// webphone_api.start();
|
||||
// }
|
||||
//});
|
||||
webphone_api.onAppStateChange(function (state)
|
||||
{
|
||||
console.log("on onAppStateChange event: "+state);
|
||||
if (state === 'loaded')
|
||||
{
|
||||
//start using the webphone here
|
||||
var serveraddress = webphone_api.getparameter('serveraddress');
|
||||
var username = webphone_api.getparameter('username');
|
||||
var password = webphone_api.getparameter('password');
|
||||
var destination = webphone_api.getparameter('destination');
|
||||
|
||||
if (serveraddress.length > 0) { serveraddress_input.value = serveraddress; }
|
||||
if (username.length > 0) { username_input.value = username; }
|
||||
if (password.length > 0) { password_input.value = password; }
|
||||
if (destination.length > 0) { destination_input.value = destination; }
|
||||
}
|
||||
});
|
||||
|
||||
function Start()
|
||||
{
|
||||
var serveraddress = serveraddress_input.value;
|
||||
var username = username_input.value;
|
||||
var password = password_input.value;
|
||||
var destination = destination_input.value;
|
||||
|
||||
if (typeof (serveraddress) === 'undefined' || serveraddress === null || serveraddress.length < 1) { alert('Set a valid serveaddress.'); serveraddress_input.focus(); return; }
|
||||
if (typeof (username) === 'undefined' || username === null || username.length < 1) { alert('Set a valid username.'); username_input.focus(); return; }
|
||||
if (typeof (password) === 'undefined' || password === null || password.length < 1) { alert('Set a valid password.'); password_input.focus(); return; }
|
||||
|
||||
if (typeof (serveraddress) !== 'undefined' && serveraddress !== null && serveraddress.length > 0)
|
||||
{
|
||||
webphone_api.setparameter('serveraddress', serveraddress, false);
|
||||
}
|
||||
webphone_api.setparameter('username', username, false);
|
||||
webphone_api.setparameter('password', password, false);
|
||||
webphone_api.setparameter('destination', destination, false);
|
||||
|
||||
document.getElementById('events').innerHTML = 'EVENT, Initializing...';
|
||||
|
||||
webphone_api.start();
|
||||
}
|
||||
|
||||
function Call()
|
||||
{
|
||||
var destnr = document.getElementById('destnumber').value;
|
||||
document.getElementById('btn_hangup').disabled = false;
|
||||
if (typeof (destnr) === 'undefined' || destnr === null) { destnr = ''; }
|
||||
|
||||
webphone_api.setparameter('destination', destnr, false);
|
||||
webphone_api.call(destnr);
|
||||
}
|
||||
|
||||
function Hangup()
|
||||
{
|
||||
webphone_api.hangup();
|
||||
}
|
||||
|
||||
function Accept()
|
||||
{
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
webphone_api.accept();
|
||||
}
|
||||
|
||||
function Reject()
|
||||
{
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
webphone_api.reject();
|
||||
}
|
||||
|
||||
function Conference()
|
||||
{
|
||||
var destnum = prompt("Conference:\nEnter destination number", "");
|
||||
if (destnum !== null)
|
||||
{
|
||||
webphone_api.conference(destnum, true);
|
||||
}
|
||||
}
|
||||
|
||||
function Transfer()
|
||||
{
|
||||
var destnum = prompt("Transfer:\nEnter destination number", "");
|
||||
if (destnum !== null)
|
||||
{
|
||||
webphone_api.transfer(destnum);
|
||||
}
|
||||
}
|
||||
|
||||
var mutestate = true;
|
||||
function Mute()
|
||||
{
|
||||
if (mutestate === true)
|
||||
{
|
||||
webphone_api.mute(true, 0);
|
||||
mutestate = false;
|
||||
document.getElementById('btn_mute').innerHTML = 'UnMute';
|
||||
}else
|
||||
{
|
||||
webphone_api.mute(false, 0);
|
||||
mutestate = true;
|
||||
document.getElementById('btn_mute').innerHTML = 'Mute';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var holdstate = true;
|
||||
function Hold()
|
||||
{
|
||||
if (holdstate === true)
|
||||
{
|
||||
webphone_api.hold(true);
|
||||
holdstate = false;
|
||||
document.getElementById('btn_hold').innerHTML = 'UnHold';
|
||||
}else
|
||||
{
|
||||
webphone_api.hold(false);
|
||||
holdstate = true;
|
||||
document.getElementById('btn_hold').innerHTML = 'Hold';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function Chat()
|
||||
{
|
||||
var chatwindow = document.getElementById('chatwindow');
|
||||
if (chatwindow != null)
|
||||
{
|
||||
if (chatwindow.style.display === 'none')
|
||||
{
|
||||
chatwindow.style.display = 'block';
|
||||
document.getElementById('btn_chat').innerHTML = 'Close chat';
|
||||
}else
|
||||
{
|
||||
chatwindow.style.display = 'none';
|
||||
document.getElementById('btn_chat').innerHTML = 'Chat';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function SendChat()
|
||||
{
|
||||
var msgF = document.getElementById('message');
|
||||
|
||||
var to = document.getElementById('destnumber').value;
|
||||
var msg = msgF.value;
|
||||
|
||||
if (typeof (to) === 'undefined' || to === null || to.length < 1)
|
||||
{
|
||||
DisplayEvent('ERROR, Invalid destination number');
|
||||
document.getElementById('destnumber').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof (msg) === 'undefined' || msg === null || msg.length < 1)
|
||||
{
|
||||
DisplayEvent('ERROR, Enter chat message to be sent');
|
||||
msgF.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
msgF.value = '';
|
||||
|
||||
AddMessageToHistory('Me', msg);
|
||||
|
||||
webphone_api.sendchat(to, msg);
|
||||
}
|
||||
|
||||
webphone_api.onChat(function (from, msg, line)
|
||||
{
|
||||
if (typeof (from) === 'undefined' || from === null || typeof (msg) === 'undefined' || msg === null) { return; }
|
||||
|
||||
var currdest = document.getElementById('destnumber').value;
|
||||
|
||||
if (typeof (currdest) === 'undefined' || currdest === null || currdest.length < 1)
|
||||
{
|
||||
document.getElementById('destnumber').value = from;
|
||||
}
|
||||
|
||||
AddMessageToHistory(from, msg);
|
||||
});
|
||||
|
||||
function AddMessageToHistory(to, message) // show messages on the page
|
||||
{
|
||||
var sentmsgF = document.getElementById('msg_list');
|
||||
var msgconttent = sentmsgF.innerHTML;
|
||||
|
||||
if (typeof (msgconttent) === 'undefined' || msgconttent === null) { msgconttent = ''; }
|
||||
|
||||
var item = '';
|
||||
|
||||
if (typeof (to) !== 'undefined' && to !== null && to.length > 0)
|
||||
{
|
||||
item = '<b>' + to + ':</b><p>' + message + '</p>';
|
||||
}else
|
||||
{
|
||||
item = '<p>' + message + '</p>';
|
||||
}
|
||||
|
||||
msgconttent = msgconttent + item + '<br />';
|
||||
|
||||
sentmsgF.innerHTML = msgconttent;
|
||||
// scroll to bottom
|
||||
//sentmsgF.scrollTop(sentmsgF.prop("scrollHeight"));
|
||||
}
|
||||
|
||||
webphone_api.onEvent(function (type, evt)
|
||||
{
|
||||
if (type === 'event' || type === 'display')
|
||||
{
|
||||
DisplayEvent(evt);
|
||||
|
||||
//ProcessEvents(evt);
|
||||
}
|
||||
});
|
||||
|
||||
function DisplayEvent(evt)
|
||||
{
|
||||
document.getElementById('events').innerHTML = evt;
|
||||
}
|
||||
|
||||
webphone_api.onRegStateChange(function (state)
|
||||
{
|
||||
if (state === 'registered')
|
||||
{
|
||||
// display supported callfunctions
|
||||
var funcl = webphone_api.getavailablecallfunc(); // possible values: conference,transfer,numpad,mute,hold,chat
|
||||
|
||||
if (typeof (funcl) !== 'undefined' && funcl !== null && funcl.length > 0 && funcl.indexOf('ERROR') < 0)
|
||||
{
|
||||
var flist = funcl.split(',');
|
||||
for (var i = 0; i < flist.length; i++)
|
||||
{
|
||||
if (typeof (flist[i]) !== 'undefined' && flist[i] !== null && flist[i].length > 0)
|
||||
{
|
||||
document.getElementById('btn_' + flist[i]).style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
webphone_api.onCallStateChange(function (event, direction, peername, peerdisplayname, line, callid)
|
||||
{
|
||||
//console.log("recv call STATUS event: "+event + " line: "+line.toString()+" dir: "+direction.toString()+" peer: "+peername+" / "+peerdisplayname+" callid: "+callid);
|
||||
if (event === 'setup')
|
||||
{
|
||||
document.getElementById('btn_hangup').disabled = false;
|
||||
|
||||
if (direction == 1)
|
||||
{
|
||||
// means it's outgoing call
|
||||
}
|
||||
else if (direction == 2)
|
||||
{
|
||||
// means it's icoming call
|
||||
|
||||
document.getElementById('icoming_call_layout').style.display = 'block';
|
||||
}
|
||||
|
||||
document.getElementById('btn_conference').disabled = false;
|
||||
document.getElementById('btn_transfer').disabled = false;
|
||||
document.getElementById('btn_mute').disabled = false;
|
||||
document.getElementById('btn_hold').disabled = false;
|
||||
}
|
||||
|
||||
//detecting the end of a call, even if it wasn't successfull
|
||||
if (event === 'disconnected')
|
||||
{
|
||||
document.getElementById('btn_hangup').disabled = true;
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
|
||||
document.getElementById('btn_conference').disabled = true;
|
||||
document.getElementById('btn_transfer').disabled = true;
|
||||
document.getElementById('btn_mute').disabled = true;
|
||||
document.getElementById('btn_hold').disabled = true;
|
||||
|
||||
// reset to default state, after call ends
|
||||
mutestate = true;
|
||||
document.getElementById('btn_mute').innerHTML = 'Mute';
|
||||
holdstate = true;
|
||||
document.getElementById('btn_hold').innerHTML = 'Hold';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* -- Callback PARAMETERS --
|
||||
* caller: the caller party username
|
||||
* called: called party username
|
||||
* connecttime: milliseconds elapsed between call initiation and call connect
|
||||
* duration: milliseconds elapsed between call connect and hangup (0 for not connected calls. Divide by 1000 to obtain seconds.)
|
||||
* direction: 1 (outgoing), 2 (incoming)
|
||||
* peerdisplayname: is the other party display name if any
|
||||
* reason: disconnect reason as string
|
||||
* line: the CDR refers to this line
|
||||
*/
|
||||
webphone_api.onCdr(function (caller, called, connecttime, duration, direction, peerdisplayname, reason, line, callid)
|
||||
{
|
||||
console.log('CDR: caller: ' + caller + ', called: ' + called + ', connecttime: ' + connecttime+ ', duration: ' + duration + ', direction: ' + direction + ', peerdisplayname: ' + peerdisplayname + ', reason: ' + reason + ', line: ' + line + ', callid: ' + callid);
|
||||
|
||||
|
||||
/** Example of sending CDR details to your server with an HTTP POST reques */
|
||||
/*
|
||||
var method = 'POST';
|
||||
var url = 'http://YOURDOMAIN.COM/sendcdr/';
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
if ("withCredentials" in xhr) // XHR for Chrome/Firefox/Opera/Safari.
|
||||
{
|
||||
xhr.open(method, url, true);
|
||||
}
|
||||
else if (typeof XDomainRequest != "undefined") // XDomainRequest for IE.
|
||||
{
|
||||
xhr = new XDomainRequest();
|
||||
xhr.open(method, url);
|
||||
}
|
||||
|
||||
xhr.onload = function()
|
||||
{
|
||||
var asnwer = xhr.responseText;
|
||||
console.log('EVENT, SendCdr request answer: ' + asnwer);
|
||||
};
|
||||
|
||||
xhr.onerror = function(error)
|
||||
{
|
||||
console.log('ERROR, SendCdr failed: ' + error);
|
||||
};
|
||||
|
||||
xhr.timeout = 20000; // set timeout to 20 sec
|
||||
xhr.ontimeout = function (event)
|
||||
{
|
||||
console.log('ERROR, SendCdr request timed out');
|
||||
};
|
||||
|
||||
var cdrdata = caller + ',' + called + ',' + connecttime + ',' + direction + ',' + peerdisplayname + ',' + reason + ',' + line;
|
||||
xhr.send(cdrdata);
|
||||
*/
|
||||
});
|
||||
|
||||
|
||||
|
||||
/*
|
||||
function ProcessEvents(evt)
|
||||
{
|
||||
var evtarray = evt.split(',');
|
||||
|
||||
// detecting incoming and outgoing calls
|
||||
if (evtarray[0] === 'STATUS' && evtarray[2] === 'Ringing')
|
||||
{
|
||||
document.getElementById('btn_hangup').disabled = false;
|
||||
|
||||
if (evtarray[5] === '1')
|
||||
{
|
||||
// means it's outgoing call
|
||||
}
|
||||
else if (evtarray[5] === '2')
|
||||
{
|
||||
// means it's icoming call
|
||||
|
||||
document.getElementById('icoming_call_layout').style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
//detecting the end of a call, even if it wasn't successfull
|
||||
if (evtarray[0] === 'STATUS' && (evtarray[2] === 'Finished' || evtarray[2] === 'Call Finished'))
|
||||
{
|
||||
document.getElementById('btn_hangup').disabled = true;
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
}
|
||||
}*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<!-- a simple example of using the webphone library -->
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webphone Basic Example</title>
|
||||
<script src="../webphone_api.js?jscodeversion=523"></script>
|
||||
<style>input { display: inline-block; width: 13em; }</style>
|
||||
</head>
|
||||
<body style="margin: 0; font-family: Tahoma, Arial ; font-size: 16px; color:#2e3d47;">
|
||||
<div style="font-family: Segoe UI, Verdana; font-size: 20px; color:#4eaaec; text-align:center; margin-top:10px">Basic example</div><br><br>
|
||||
<div><span style="font-family: Segoe UI, Tahoma, Arial ; font-size: 16px; color:#2e3d47;">This is the simplest example to demonstrate the webphone usage without any error handling or state management.<br />
|
||||
Don't use this in production as it is not a complete implementation.<br />
|
||||
See the source of "basic_example.html" from the demo <a href="https://www.mizu-voip.com/Portals/0/Files/webphone.zip" target="_blank">webphone package</a> about how it is done.</span><br />
|
||||
</div><br /><br />
|
||||
|
||||
<div style="display: inline-block; text-align: left">
|
||||
<input type="text" placeholder="VoIP Server address" id="serveraddress" autocapitalize="off"><br />
|
||||
<input type="text" placeholder="Username" id="username" autocapitalize="off"><br />
|
||||
<input type="text" placeholder="Password" id="password" autocapitalize="off"><br />
|
||||
<button onclick="Start();">Start</button><br /><br />
|
||||
<input type="text" placeholder="Destination number" id="destnumber" autocapitalize="off"><br />
|
||||
<button id="btn_call" onclick="Call();">Call</button>
|
||||
<button id="btn_hangup" onclick="Hangup();">Hangup</button><br /><br />
|
||||
|
||||
<div id="icoming_call_layout">
|
||||
----------------------<br />
|
||||
<button id="btn_accept" onclick="Accept();">Accept</button>
|
||||
<button id="btn_reject" onclick="Reject();">Reject</button><br />
|
||||
----------------------<br /><br />
|
||||
</div>
|
||||
<iframe allow="microphone; camera; autoplay" style="display:none" height="0" width="0" id="loader"></iframe>
|
||||
<div id="events" style="width: 13em;"></div>
|
||||
</div>
|
||||
<div id="video_container" style="display: none;"></div>
|
||||
<script>
|
||||
var serveraddress_input = document.getElementById('serveraddress');
|
||||
var username_input = document.getElementById('username');
|
||||
var password_input = document.getElementById('password');
|
||||
var destination_input = document.getElementById('destnumber');
|
||||
|
||||
document.getElementById('btn_hangup').disabled = true;
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
|
||||
// Wait until the webphone is loaded, before calling any API functions
|
||||
// if automatic start is required, then webphone_api.start() can be called from the "loaded" event like this:
|
||||
//webphone_api.onAppStateChange(function (app_state)
|
||||
//{
|
||||
// if (app_state === 'loaded')
|
||||
// {
|
||||
// webphone_api.start();
|
||||
// }
|
||||
//});
|
||||
webphone_api.parameters['autostart'] = 0;
|
||||
|
||||
webphone_api.onAppStateChange(function (appState)
|
||||
{
|
||||
if (appState === 'loaded')
|
||||
{
|
||||
var serveraddress = webphone_api.getparameter('serveraddress');
|
||||
if (serveraddress.length < 1) { serveraddress = webphone_api.getparameter('serveraddress_user'); } // only for demo
|
||||
var username = webphone_api.getparameter('username');
|
||||
var password = webphone_api.getparameter('password');
|
||||
var destination = webphone_api.getparameter('destination');
|
||||
|
||||
if (serveraddress.length > 0) { serveraddress_input.value = serveraddress; }
|
||||
if (username.length > 0) { username_input.value = username; }
|
||||
if (password.length > 0) { password_input.value = password; }
|
||||
if (destination.length > 0) { destination_input.value = destination; }
|
||||
|
||||
document.getElementById('events').innerHTML = 'EVENT, Loaded';
|
||||
}
|
||||
else if (appState === 'started')
|
||||
{
|
||||
document.getElementById('events').innerHTML = 'EVENT, Started';
|
||||
}
|
||||
else if (appState === 'stopped')
|
||||
{
|
||||
document.getElementById('events').innerHTML = 'EVENT, Stopped';
|
||||
}
|
||||
});
|
||||
|
||||
webphone_api.onRegStateChange(function (regState)
|
||||
{
|
||||
if (regState === 'registered')
|
||||
{
|
||||
document.getElementById('events').innerHTML = 'EVENT, Registered.';
|
||||
}
|
||||
else if (regState === 'unregistered')
|
||||
{
|
||||
document.getElementById('events').innerHTML = 'EVENT, UnRegistered.';
|
||||
}
|
||||
else if (regState === 'failed')
|
||||
{
|
||||
document.getElementById('events').innerHTML = 'ERROR, Register failed.';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function Start()
|
||||
{
|
||||
var serveraddress = serveraddress_input.value;
|
||||
var username = username_input.value;
|
||||
var password = password_input.value;
|
||||
var destination = destination_input.value;
|
||||
|
||||
if (typeof (serveraddress) === 'undefined' || serveraddress === null || serveraddress.length < 1) { alert('Set a valid serveaddress.'); serveraddress_input.focus(); return; }
|
||||
if (typeof (username) === 'undefined' || username === null || username.length < 1) { alert('Set a valid username.'); username_input.focus(); return; }
|
||||
if (typeof (password) === 'undefined' || password === null || password.length < 1) { alert('Set a valid password.'); password_input.focus(); return; }
|
||||
|
||||
if (typeof (serveraddress) !== 'undefined' && serveraddress !== null && serveraddress.length > 0)
|
||||
{
|
||||
webphone_api.setparameter('serveraddress', serveraddress);
|
||||
}
|
||||
webphone_api.setparameter('username', username, false);
|
||||
webphone_api.setparameter('password', password, false);
|
||||
webphone_api.setparameter('destination', destination, false);
|
||||
|
||||
document.getElementById('events').innerHTML = 'EVENT, Initializing...';
|
||||
|
||||
webphone_api.start();
|
||||
}
|
||||
|
||||
function Call()
|
||||
{
|
||||
var destnr = document.getElementById('destnumber').value;
|
||||
document.getElementById('btn_hangup').disabled = false;
|
||||
if (typeof (destnr) === 'undefined' || destnr === null) { destnr = ''; }
|
||||
|
||||
webphone_api.setparameter('destination', destnr, false);
|
||||
webphone_api.call(destnr);
|
||||
}
|
||||
|
||||
function Hangup()
|
||||
{
|
||||
webphone_api.hangup();
|
||||
document.getElementById('events').innerHTML = 'EVENT, Registered.';
|
||||
}
|
||||
|
||||
function Accept()
|
||||
{
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
webphone_api.accept();
|
||||
}
|
||||
|
||||
function Reject()
|
||||
{
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
webphone_api.reject();
|
||||
}
|
||||
|
||||
webphone_api.onCallStateChange(function (event, direction, peername, peerdisplayname, line, callid)
|
||||
{
|
||||
document.getElementById('events').innerHTML = 'EVENT, Call ' + event;
|
||||
|
||||
if (event === 'setup')
|
||||
{
|
||||
document.getElementById('btn_hangup').disabled = false;
|
||||
|
||||
if (direction == 1)
|
||||
{
|
||||
// means it's outgoing call
|
||||
}
|
||||
else if (direction == 2)
|
||||
{
|
||||
// means it's icoming call
|
||||
|
||||
document.getElementById('icoming_call_layout').style.display = 'block';
|
||||
}
|
||||
|
||||
document.getElementById('events').innerHTML = 'EVENT, Call setup';
|
||||
}
|
||||
//detecting the end of a call, even if it wasn't successfull
|
||||
else if (event === 'disconnected')
|
||||
{
|
||||
document.getElementById('btn_hangup').disabled = true;
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
|
||||
document.getElementById('events').innerHTML = 'EVENT, Call disconnected';
|
||||
}
|
||||
});
|
||||
function GetTickCount() // returns the current time in milliseconds
|
||||
{
|
||||
var currDate = new Date();
|
||||
return currDate.getTime();
|
||||
}
|
||||
/*
|
||||
function ProcessEvents(evt)
|
||||
{
|
||||
var evtarray = evt.split(',');
|
||||
|
||||
// detecting incoming and outgoing calls
|
||||
if (evtarray[0] === 'STATUS' && evtarray[2] === 'Ringing')
|
||||
{
|
||||
document.getElementById('btn_hangup').disabled = false;
|
||||
|
||||
if (evtarray[5] === '1')
|
||||
{
|
||||
// means it's outgoing call
|
||||
}
|
||||
else if (evtarray[5] === '2')
|
||||
{
|
||||
// means it's icoming call
|
||||
|
||||
document.getElementById('icoming_call_layout').style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
//detecting the end of a call, even if it wasn't successfull
|
||||
if (evtarray[0] === 'STATUS' && (evtarray[2] === 'Finished' || evtarray[2] === 'Call Finished'))
|
||||
{
|
||||
document.getElementById('btn_hangup').disabled = true;
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
}
|
||||
}*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<!--
|
||||
The simplest example for the click to call functionality.
|
||||
This is good as a start point for developers, explaining the basic requirement for a click to call button.
|
||||
Check the "click2call.html" in the root folder if you are looking for a more complete click 2 call implementation.
|
||||
|
||||
You can also start click2call from an url:
|
||||
http://www.yourwebsite.com/webphonedir/samples/click2call_example.html?wp_serveraddress=YOURSIPDOMAIN&wp_username=USERNAME&wp_password=PASSWORD&wp_md5=MD5AUTH&wp_callto=CALLEDNUMBER
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Click2Call Basic Example</title>
|
||||
|
||||
<script src="../webphone_api.js?jscodeversion=523"></script>
|
||||
<script>
|
||||
/**Configuration parameters*/
|
||||
webphone_api.parameters['serveraddress'] = ''; // yoursipdomain.com your VoIP server IP address or domain name
|
||||
webphone_api.parameters['username'] = ''; // SIP account username
|
||||
webphone_api.parameters['password'] = ''; // SIP account password (see the "Parameters encryption" in the documentation)
|
||||
webphone_api.parameters['callto'] = ''; // destination number to call
|
||||
webphone_api.parameters['autoaction'] = 0; // 0=nothing (default), 1=call, 2=chat, 3=video call
|
||||
webphone_api.parameters['autostart'] = 0; // start the webphone only when button is clicked
|
||||
</script>
|
||||
</head>
|
||||
<body style="margin: 0; font-family: Segoe UI, Verdana ; font-size: 16px; color:#2e3d47;">
|
||||
<div style="font-family: Segoe UI, Verdana ; font-size: 20px; color:#4eaaec; text-align:center">Click to call</div><br><br>
|
||||
|
||||
<span id="demo_text">This is a demonstration of the simplest click to call functionality of the webphone.<br /></span><br />
|
||||
|
||||
<button id="button_click2call" style="width: 6em;">Call</button>
|
||||
<script>
|
||||
var btnc2c = document.getElementById("button_click2call");
|
||||
if(btnc2c.addEventListener){
|
||||
btnc2c.addEventListener("click", function() { ButtonOnclick(); }, false);
|
||||
}else if(btnc2c.attachEvent){
|
||||
btnc2c.attachEvent("onclick", function() { ButtonOnclick(); });
|
||||
}
|
||||
|
||||
function ButtonOnclick()
|
||||
{
|
||||
if (webphone_api.isincall() === true){
|
||||
webphone_api.hangup();
|
||||
}else{
|
||||
webphone_api.call(webphone_api.parameters['callto']);
|
||||
}
|
||||
}
|
||||
|
||||
webphone_api.onCallStateChange(function (status, direction, peername, peerdisplayname, line, callid)
|
||||
{
|
||||
if (status === 'setup')
|
||||
{
|
||||
btnc2c.innerHTML = 'Hangup';
|
||||
}
|
||||
else if (status === 'disconnected')
|
||||
{
|
||||
btnc2c.innerHTML = 'Call';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- a simple example of using handling incoming calls -->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Incoming Call Example</title>
|
||||
<script src="../webphone_api.js?jscodeversion=523"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>This is the simplest example to demonstrate how to handle an incoming call and display the caller's name.<br />Don't use this in production as it is not a complete implementation.<br /><br /><br /></div>
|
||||
|
||||
<button id="btn_hangup" onclick="Hangup()" style="display: none;">Hangup</button>
|
||||
<div id="icoming_call_layout" style="display: none;">
|
||||
----------------------<br />
|
||||
<button id="btn_accept" onclick="Accept()">Accept</button>
|
||||
<button id="btn_reject" onclick="Reject()">Reject</button><br />
|
||||
----------------------<br /><br />
|
||||
</div>
|
||||
<iframe allow="microphone; camera; autoplay" style="display:none" height="0" width="0" id="loader"></iframe>
|
||||
<div id="caller_info"></div>
|
||||
|
||||
<script>
|
||||
webphone_api.onAppStateChange(function (state)
|
||||
{
|
||||
if (state === 'loaded')
|
||||
{
|
||||
webphone_api.setparameter('serveraddress', 'YOURSIPDOMAIN.COM', false);
|
||||
webphone_api.setparameter('username', 'USERNAME', false);
|
||||
webphone_api.setparameter('password', 'PASSWORD', false);
|
||||
//webphone_api.setparameter('autoaccept', 'true', false); //set the autoaccept to true if you wish to auto-answer all calls
|
||||
|
||||
webphone_api.start();
|
||||
}
|
||||
});
|
||||
|
||||
function Hangup()
|
||||
{
|
||||
webphone_api.hangup();
|
||||
document.getElementById('btn_hangup').style.display = 'none';
|
||||
}
|
||||
|
||||
function Accept()
|
||||
{
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
document.getElementById('btn_hangup').style.display = 'block';
|
||||
webphone_api.accept();
|
||||
}
|
||||
|
||||
function Reject()
|
||||
{
|
||||
document.getElementById('icoming_call_layout').style.display = 'none';
|
||||
webphone_api.reject();
|
||||
}
|
||||
// to initiate an outgoing you would call the following API function webphone_api.call(DESTINATION_NUMBER);
|
||||
|
||||
// handling actions on call state change
|
||||
webphone_api.onCallStateChange(function (event, direction, peername, peerdisplayname, line, callid)
|
||||
{
|
||||
if (event === 'setup')
|
||||
{
|
||||
if (direction == 1)
|
||||
{
|
||||
// means it's outgoing call
|
||||
}
|
||||
else if (direction == 2)
|
||||
{
|
||||
// means it's icoming call
|
||||
document.getElementById('icoming_call_layout').style.display = 'block'; // display Accept, Reject buttons
|
||||
document.getElementById('caller_info').innerHTML = peerdisplayname + ' - ' + peername;
|
||||
//webphone_api.accept(); //you might auto-accept certain calls from here
|
||||
}
|
||||
}
|
||||
|
||||
// end of a call, even if it wasn't successfull
|
||||
if (event === 'disconnected')
|
||||
{
|
||||
document.getElementById('icoming_call_layout').style.display = 'none'; // hide Accept, Reject buttons
|
||||
document.getElementById('caller_info').innerHTML = '';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<!--
|
||||
The webphone can load its parameters also from the webpage URL, so the "linkify.js" just replaces
|
||||
all phone numbers on the web page with links which will automatically start the webphone and dial the number.
|
||||
|
||||
To use the converter on your web page, just copy the below javascript code into the <head> section of your page,
|
||||
replacing the parameters values with your own: your VoIP server IP or domain, SIP account username and password
|
||||
|
||||
<script type="text/JavaScript" src="PATH_TO_CONVERTER_JAVASCRIPT_FILE/linkify.js"></script>
|
||||
<script type="text/javascript">
|
||||
linkify.webphone_url = 'PATH_TO_WEBPHONE'; // path to the webphone's html page
|
||||
linkify.serveraddress = 'YOURSIPDOMAIN.COM'; // your VoIP server IP address or domain name
|
||||
linkify.username = 'SIP_ACCOUNT_USERNAME'; // SIP account username
|
||||
linkify.password = 'SIP_ACCOUNT_PASSWORD'; // SIP account password
|
||||
linkify.md5 = ''; //use either password or md5 (leave it empty if you set the password)
|
||||
</script>
|
||||
-->
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Click to call converter</title>
|
||||
<script type="text/JavaScript" src="../js/linkify/linkify.js"></script>
|
||||
<script type="text/javascript">
|
||||
linkify.webphone_url = 'softphone.html'; // path to the webphone's html page
|
||||
linkify.serveraddress = ''; // your VoIP server IP address or domain name
|
||||
linkify.username = ''; // SIP account username
|
||||
linkify.password = ''; // SIP account password
|
||||
linkify.md5 = '';
|
||||
</script>
|
||||
</head>
|
||||
<body style="margin: 0; font-family: Verdana ; font-size: 12px; line-height: 155%; color:#2e3d47;" spellcheck="false">
|
||||
<div style="font-family: Verdana; font-size: 20px; color:#4eaaec; text-align:center">Linkify</div><br><br>
|
||||
<span>This is a test page to demonstrate how to convert phone numbers to clickable links.</span><br /><br /><br />
|
||||
|
||||
<div>Personal phone number, tel: +(40) 123456789</div>
|
||||
<div>
|
||||
+40123456789<br />
|
||||
Mobile phone number: (888) 283-5051<br />
|
||||
another format: 888-283-5051<br />
|
||||
another format: 8882835051<br />
|
||||
another format: 40 724 123 456 some text...<br />
|
||||
</div>
|
||||
<br /><br />
|
||||
<span>See the source of this page (linkify_example.html) for details.</span>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
The shortest example of initiating an outgoing call using the webphone -->
|
||||
Replace the parameters below in upper-case with your settings and/or use any other parameters!
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Outgoing Call Example</title>
|
||||
<script src="../webphone_api.js?jscodeversion=523"></script>
|
||||
</head>
|
||||
<body spellcheck="false">
|
||||
<div>This is the simplest example to demonstrate how initiate an outgoing call.<br />Don't use this in production as it is not a complete implementation.<br /><br /><br /></div>
|
||||
|
||||
<button id="btn_call" onclick="webphone_api.call('DESTINATION')">Call</button>
|
||||
<button id="btn_hangup" onclick="webphone_api.hangup()">Hangup</button>
|
||||
<iframe allow="microphone *; camera *; autoplay *" allowfullscreen="true" style="display:none" height="0" width="0" id="loader"></iframe>
|
||||
|
||||
<script>
|
||||
webphone_api.onAppStateChange(function (state)
|
||||
{
|
||||
if (state === 'loaded')
|
||||
{
|
||||
webphone_api.setparameter('serveraddress', 'YOURSIPDOMAIN.COM', false);
|
||||
webphone_api.setparameter('username', 'USERNAME', false);
|
||||
webphone_api.setparameter('password', 'PASSWORD', false);
|
||||
|
||||
webphone_api.start();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,286 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<!-- Example for using one single webphone instances on multiple pages by passing the webphone handle between the pages -->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webphone multi page demo</title>
|
||||
<script src="../webphone_api.js?jscodeversion=523"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<H1 align="center"> Webphone multi page example </H1>
|
||||
<div>
|
||||
This is a demonstration to use the same webphone instance on multiple pages.<br />
|
||||
For example you can begin a call on page A, launch a new page (page B started from page A), see the webphone status also on page B, then hangup the call either for page A or page B<br />
|
||||
It is not limited to only 2 pages. You can launch as many pages as you wish and the same webphone instance will be shared across all pages.<br />
|
||||
Here we are just using the onEvent(callback) webphone api to display the webphone state on our "events" div, however you can implement any other functionality in the same way using the other callbacks.<br />
|
||||
For the sake of simplicity we are using the same html file also for second pages here (multipage_example.html), but you can use also different pages, just make sure to add the below multipage handling in all your pages.<br />
|
||||
For this example to work, you need to:
|
||||
<ul>
|
||||
<li> make sure that you are running this html from your webphone directory (copy this file to your webphone folder)</li>
|
||||
<li> set the serveraddress/username/password parameters to a valid value (in the webphone_config.js or add code to set these dynamically with setparameter())</li>
|
||||
<li> set the autostart parameter to 0 (in the webphone_config.js or add code to set these dynamically with setparameter())</li>
|
||||
<li> rewrite the 'testivr' callto number in this html (In this example the called numbers is is hardcoded to "testivr3", so you need to rewrite this below to a valid number to call via your SIP server or pass a valid number from your form or via API)</li>
|
||||
</ul>
|
||||
You can open any number of windows/tabs and push the Call and Hangup buttons on any page (you can add more functionality in the same way as these are implemented in this example)
|
||||
Note: the webphone will be closed if you close the "main" page (from where it was started the first time), but if needed, it will auto start again on new pages.
|
||||
</div>
|
||||
<br /> <br />
|
||||
<button onclick="newpage();">Open New Page</button><br /><br />
|
||||
<!-- <button onclick="start();">Start the webphone</button><br /><br /> -->
|
||||
<button onclick="call();">Call</button><br /><br />
|
||||
<button onclick="hangup();">Hangup</button><br /><br />
|
||||
<div id="events"></div>
|
||||
|
||||
<script>
|
||||
|
||||
//calling multipage_init() from the window.onload event (delete this and put multipage_init() on your own window.onload if you already have such a function elsewhere)
|
||||
window.onload = multipage_init;
|
||||
//you might call multipage_destory() from page unload to handle if the "main" page was closed (to be able to reinit the webphone on other pages if needed)
|
||||
window.onunload = multipage_destory;
|
||||
//store the wopener variable to be used here and also on subsequent pages (useful if we open a third page from the second and so)
|
||||
var wpwindow = window; //set to this document
|
||||
//create a reference to the webphone so we can easily access it on this page via this variable
|
||||
var wpapi = webphone_api;
|
||||
//variable to store the child window
|
||||
var childwindow = null;
|
||||
|
||||
function multipage_init()
|
||||
{
|
||||
try{
|
||||
//find the page holding the webphone ("main" window)
|
||||
if(window.opener && wpwindow != window.opener && window.opener.webphone_api)
|
||||
{
|
||||
wpwindow = window.opener; //set to parent page document
|
||||
try{ if(wpwindow.document.getElementById('events') != null && document.getElementById('events') != null) document.getElementById('events').innerHTML = wpwindow.document.getElementById('events').innerHTML; } catch (e) {}//display the webphone current status from the opener page
|
||||
}
|
||||
if(wpwindow.wpwindow && wpwindow != window && wpwindow.wpwindow.webphone_api)
|
||||
{
|
||||
wpwindow = wpwindow.wpwindow; //the parent page might also loaded from its own parent, so load it from there
|
||||
|
||||
}
|
||||
|
||||
//Initialize your webphone if not initialized yet
|
||||
var startednow = false;
|
||||
if(wpwindow && wpwindow.webphone_api)
|
||||
{
|
||||
//load the wpapi instance from the parent page in this case
|
||||
wpapi = wpwindow.webphone_api;
|
||||
|
||||
//check if already initialized
|
||||
if(wpapi.isstarted != 1)
|
||||
{
|
||||
wpapi.isstarted = 1;
|
||||
startednow = true;
|
||||
//we are staring the engine here, however you can delay the start if you wish to the point when the user actually wish to use the phone such as making a cal; wpapi.start();
|
||||
wpapi.start();
|
||||
wpapi.isstarted = 2;
|
||||
}
|
||||
//else already initialized by parent
|
||||
}
|
||||
else if(wpapi && wpapi.isstarted != 1)
|
||||
{
|
||||
//we are the first page
|
||||
wpapi.isstarted = 1;
|
||||
wpwindow = window; //set the wopener to point to this page
|
||||
startednow = true;
|
||||
//we are staring the engine here, however you can delay the start if you wish to the point when the user actually wish to use the phone such as making a cal; wpapi.start();
|
||||
wpapi.start();
|
||||
wpapi.isstarted = 2;
|
||||
}
|
||||
|
||||
if(!wpapi)
|
||||
{
|
||||
alert('cannot find the webphone (you have not included the webphone_api.js script in this page?)');
|
||||
return;
|
||||
}
|
||||
|
||||
if(startednow == true) //so we set the callbacks only on the "main" page from where the webphone was started
|
||||
{
|
||||
//wpapi.onLoaded(function ()
|
||||
wpapi.onAppStateChange(function (state)
|
||||
{
|
||||
if (state === 'loaded')
|
||||
{
|
||||
var calledfrom = [];
|
||||
calledfrom.push(window);
|
||||
webphoneloaded(calledfrom);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
wpapi.onEvent(function (type, evt)
|
||||
{
|
||||
if (type === 'event')
|
||||
{
|
||||
var calledfrom = [];
|
||||
calledfrom.push(window);
|
||||
displayevents(calledfrom, evt);
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (e)
|
||||
{
|
||||
alert("Error on multipage setup: "+e);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//clear the wpapi instance (helpful in the case when the "main" page was closed but we still wish to use the webphone)
|
||||
function multipage_destory()
|
||||
{
|
||||
try{
|
||||
if(wpapi && wpapi === window.webphone_api)
|
||||
{
|
||||
wpapi.isstarted = 0;
|
||||
wpapi = null;
|
||||
var calledfrom = [];
|
||||
calledfrom.push(window);
|
||||
multipage_destory_ex(calledfrom);
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
//propagate page close to child/parent pages if any
|
||||
function multipage_destory_ex(calledfrom)
|
||||
{
|
||||
try{
|
||||
if(wpapi)
|
||||
{
|
||||
wpapi.isstarted = 0;
|
||||
wpapi = null;
|
||||
}
|
||||
|
||||
//we send it also to other pages, so they can also display or handle the status
|
||||
if(wpwindow && wpwindow !== window && calledfrom.indexOf(wpwindow) < 0)
|
||||
{
|
||||
try{
|
||||
calledfrom.push(window);
|
||||
wpwindow.multipage_destory_ex(calledfrom);
|
||||
} catch (e) {}
|
||||
}
|
||||
if(childwindow && childwindow !== window && childwindow !== wpwindow && calledfrom.indexOf(childwindow) < 0)
|
||||
{
|
||||
try{
|
||||
calledfrom.push(window);
|
||||
if(childwindow.multipage_destory_ex) childwindow.multipage_destory_ex(calledfrom);
|
||||
} catch (e) {}
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
//handle callbacks from the webphone (you will need to handle most callback events the same way: so you need to call also the parent event handler)
|
||||
function webphoneloaded(calledfrom)
|
||||
{
|
||||
/*
|
||||
//add any code here after your needs
|
||||
|
||||
//notify also the other windows if needed
|
||||
if(wpwindow && wpwindow !== window && calledfrom.indexOf(wpwindow) < 0)
|
||||
{
|
||||
//notify also the parent page (if needed)
|
||||
try{
|
||||
calledfrom.push(window);
|
||||
wpwindow.webphoneloaded(calledfrom);
|
||||
} catch (e) {}
|
||||
}
|
||||
if(childwindow && childwindow !== window && childwindow !== wpwindow && calledfrom.indexOf(childwindow) < 0)
|
||||
{
|
||||
//notify also the child page (if needed)
|
||||
try{
|
||||
calledfrom.push(window);
|
||||
childwindow.webphoneloaded(calledfrom);
|
||||
} catch (e) {}
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
//display the webphone status on the "events" div and propagate to child and parent pages if any
|
||||
function displayevents(calledfrom, evt)
|
||||
{
|
||||
if(document && document.getElementById('events') != null) document.getElementById('events').innerHTML = evt;
|
||||
|
||||
//we send it also to other pages, so they can also display or handle the status
|
||||
if(wpwindow && wpwindow !== window && calledfrom.indexOf(wpwindow) < 0)
|
||||
{
|
||||
//display also on the parent page
|
||||
try{
|
||||
calledfrom.push(window);
|
||||
wpwindow.displayevents(calledfrom,evt);
|
||||
} catch (e) {}
|
||||
}
|
||||
if(childwindow && childwindow !== window && childwindow !== wpwindow && calledfrom.indexOf(childwindow) < 0)
|
||||
{
|
||||
//display also on the child page
|
||||
try{
|
||||
calledfrom.push(window);
|
||||
if(childwindow.displayevents) childwindow.displayevents(calledfrom,evt);
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
//called from button click (this is needed only if you don't wish to auto-start it on the first page or via first call(). remove start() from the above code if you need to start explicitely)
|
||||
function start()
|
||||
{
|
||||
if(!wpapi)
|
||||
{
|
||||
//it might be possible that the "main" page was closed meantime, so we try to reinit
|
||||
multipage_init();
|
||||
if(!wpapi)
|
||||
{
|
||||
alert('cannot find the webphone');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if(wpapi.isstarted == 2)
|
||||
{
|
||||
//alert('already started once');
|
||||
return;
|
||||
}
|
||||
wpapi.start();
|
||||
wpapi.isstarted = 2;
|
||||
}
|
||||
*/
|
||||
|
||||
//called from button click
|
||||
function newpage()
|
||||
{
|
||||
//we start the same page here as a simple example, but you can start any other page in the same way. just make sure to include the same multi-page handling code in each of your pages
|
||||
childwindow = open('multipage_example.html');
|
||||
}
|
||||
|
||||
//called from button click
|
||||
function call()
|
||||
{
|
||||
if(!wpapi)
|
||||
{
|
||||
//it might be possible that the "main" page was closed meantime, so we try to reinit
|
||||
multipage_init();
|
||||
if(!wpapi)
|
||||
{
|
||||
alert('cannot find the webphone');
|
||||
return;
|
||||
}
|
||||
}
|
||||
wpapi.call('testivr3');
|
||||
}
|
||||
|
||||
//called from button click
|
||||
function hangup()
|
||||
{
|
||||
if(!wpapi)
|
||||
{
|
||||
alert('cannot find the webphone');
|
||||
return;
|
||||
}
|
||||
wpapi.hangup();
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
This folder contains some usage examples to learn about the webphone API or to be used as a starting template for your custom project.
|
||||
These examples are useful only if you wish to do some custom development. In case if you are looking for something ready to use, then use the softphone.html or the click2call.html in the upper folder instead of these samples.
|
||||
You migh also look at the following resources to start working with the webphone:
|
||||
-Tutorial: https://www.mizu-voip.com/Support/Wiki/tabid/99/Default.aspx?topic=WebPhone+Quick+Start
|
||||
-Documentation: https://www.mizu-voip.com/Portals/0/Files/Webphone_Documentation.pdf
|
||||
|
||||
The html's listed here are not ready for production. Some of them are just for demo purpose and others doesn't have proper error handling (skipped for easier reading).
|
||||
|
||||
Sample files:
|
||||
o techdemo_example.html: a simple demo html the showcase the webphone functionalities
|
||||
o minimal_example.html: shortest implementation to make a call
|
||||
o basic_example.html: simple usage example of softphone SDK
|
||||
o api_example.html: a more detailed example for the SIP API usage
|
||||
o incoming_example.html: simple example to handle incoming call
|
||||
o click2call_example.html: a minimal click to call phone button implementation
|
||||
o linkify_example.html: will convert phone numbers on a webpage to clickable SIP URI’s for click to call
|
||||
o mobile_example.html: just a show case to remind you that the webphone also works on smartphones
|
||||
o multipage_example.html: demonstrates using the same webphone instances across multiple pages
|
||||
o softphone.html: in the parent webphone root folder: ready to use softphone skin
|
||||
o click2call.html: in the parent webphone root folder: ready to use click to call skin
|
||||
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<!--
|
||||
Webphone demo: A simple SIP client implementation to demonstrate the webphone capabilities.
|
||||
|
||||
For a ready to use dialer use the "softphone.html" instead of this.
|
||||
For more simple examples to start with, have a look at the "basic_example.html".
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
|
||||
<link rel="shortcut icon" href="favicon.ico"/>
|
||||
<title>Webphone Demo</title>
|
||||
<link rel="stylesheet" href="../css/techdemo_example/techdemo_example.css" />
|
||||
<script type="text/javascript" src="../js/techdemo_example/jquery-1.9.1.min.js"></script>
|
||||
<script type="text/javascript" src="../webphone_api.js?jscodeversion=523"></script>
|
||||
<script type="text/javascript" src="../js/techdemo_example/picoModal.js?jscodeversion=523"></script>
|
||||
<script type="text/javascript" src="../js/techdemo_example/stringres.js?jscodeversion=523"></script>
|
||||
<script type="text/javascript" src="../js/techdemo_example/techdemo_example.js?jscodeversion=523"></script>
|
||||
|
||||
<script>
|
||||
/**Configuration parameters. Better to set in the webphone_config.js*/
|
||||
//webphone_api.parameters['register'] = 0;
|
||||
webphone_api.parameters['autoaction'] = 0; // 0=nothing (default), 1=call, 2=chat, 3=video call
|
||||
webphone_api.parameters['autostart'] = 0; // start the webphone only when button is clicked
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="../css/softphone/mainlayout.css" />
|
||||
|
||||
</head>
|
||||
<body style="font-family: Segoe UI, Verdana ; font-size: 16px; color:#2e3d47;" spellcheck="false">
|
||||
<div style="font-family: Segoe UI, Verdana; font-size: 20px; color:#4eaaec; text-align:center; margin-top:10px">Tech demo</div><br><br>
|
||||
<!--<div id="header"> </div>-->
|
||||
<div id="content">
|
||||
<div style="width: 100%;">A simple webphone demo implementation:</div>
|
||||
<br />
|
||||
<div id="left_column">
|
||||
<div id="registration_box">
|
||||
<h1>Registration</h1>
|
||||
<div class="separator"><!--//--></div>
|
||||
<div id="status"> </div>
|
||||
<div class="reg_form">
|
||||
<label for="serveraddress" title="SIP server IP address or domain name">SIP Server address: </label>
|
||||
<input type="text" placeholder="SIP server address" id="serveraddress" value="" title="SIP server IP address or domain name" autocapitalize="off" />
|
||||
</div>
|
||||
<div class="reg_form">
|
||||
<label for="sipusername" title="SIP account username">Username: </label>
|
||||
<input type="text" placeholder="Username" id="sipusername" value="" title="SIP account auth username" autocapitalize="off" />
|
||||
</div>
|
||||
<div class="reg_form">
|
||||
<label for="password" title="SIP account password">Password: </label>
|
||||
<input type="password" placeholder="Password" id="password" value="" title="SIP account password" autocapitalize="off" />
|
||||
</div>
|
||||
<div id="advancedsett" class="btn_container">
|
||||
<a href="javascript:;" id="btn_advanced_sett" onclick="ShowHideAdvancedSettings();" title="Show additional configuration">Show more settings</a>
|
||||
</div>
|
||||
<div id="login" class="btn_container">
|
||||
<button class="btn" onclick="Start();" title="Login with above SIP account">Register</button>
|
||||
</div>
|
||||
<br />
|
||||
<div class="reg_form">
|
||||
<label for="destinationnr" title="SIP URI, username, extension or phone number">Destination: </label>
|
||||
<input type="text" placeholder="Call to" id="destinationnr" value="" title="SIP URI, username, extension or phone number" autocapitalize="off"/>
|
||||
</div>
|
||||
|
||||
<div id="call" class="btn_container">
|
||||
<button class="btn" onclick="Call();" title="Initiate call to destination SIP URI or number">Call</button>
|
||||
<button class="btn" onclick="Hangup();" title="Disconnect call">Hangup</button>
|
||||
<button class="btn" onclick="ShowHideChat();" title="Show/Hide chat window">Chat</button>
|
||||
</div>
|
||||
<div id="chat_box" style="display: none;">
|
||||
<div class="separator"><!--//--></div>
|
||||
<h1>Chat</h1>
|
||||
<div class="separator"><!--//--></div>
|
||||
<!--<div class="reg_form" id="chat_destination_container">
|
||||
<label for="destinationchat" title="Send chat to destination SIP URI or number">Destination: </label>
|
||||
<input type="text" placeholder="Chat to" id="destinationchat" value="" title="SIP URI, username, extension or phone number" />
|
||||
</div>-->
|
||||
<div id="msg_list">
|
||||
<!--<b>Me:</b><p>Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you today?</p><p class="date">Jun 05, 2014 11:59</p>-->
|
||||
</div>
|
||||
<div id="send_container">
|
||||
<input type="text" placeholder="Compose" id="message" value="" title="Enter the chat to be sent" autocapitalize="off" />
|
||||
<button class="btn" onclick="SendChat()" title="Send chat message">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right_column" style="display: none;">
|
||||
<h1>Other settings</h1>
|
||||
<div id="settings_list">
|
||||
</div>
|
||||
<div id="save_settings" class="btn_container">
|
||||
<div id="adv_text">There are <a href="https://www.mizu-voip.com/Portals/0/Files/Webphone_Documentation.pdf" target="_blank" title="Documentation">many more</a> configurations which can be set from "webphone_config.js"
|
||||
</div>
|
||||
<button class="btn" id="btn_save_settings" onclick="SaveSettings();" title="Save settings">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="video_container" style="display: none;"></div>
|
||||
</div>
|
||||
<iframe allow="microphone *; camera *; autoplay *" allowfullscreen="true" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" style="display:none" height="0" width="0" id="loader"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user