Issue
Code backup
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user