221 lines
9.6 KiB
HTML
221 lines
9.6 KiB
HTML
<!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>
|