2022

Mizu WebPhone
Cross-Platform SIP for browsers
Mizu-WebSIPPhone is a standard based VoIP client running from browsers as a ready to
use softphone or usable as a JavaScript library. Based on the industry standard SIP
protocol, it is compatible with all common VoIP devices.

One software for all OS and all browsers

The ultimate Browser to SIP solution

Version 3.6
Mizutech
6/2/2022
Contents
About .............................................................................................................................................................................................................................3
Usage .............................................................................................................................................................................................................................3
Steps.......................................................................................................................................................................................................................3
Web Softphone ......................................................................................................................................................................................................4
Click-to-call.............................................................................................................................................................................................................5
Developers .............................................................................................................................................................................................................5
Designers................................................................................................................................................................................................................5
Features, technology and licensing ................................................................................................................................................................................5
Feature list .............................................................................................................................................................................................................5
Requirements .........................................................................................................................................................................................................6
Technical details.....................................................................................................................................................................................................6
Licensing ................................................................................................................................................................................................................8
Integration and customization.......................................................................................................................................................................................9
Concepts.................................................................................................................................................................................................................9
User interface Skin/Design ...................................................................................................................................................................................10
Web Dialer/Softphone .........................................................................................................................................................................................11
Click to call ...........................................................................................................................................................................................................16
Custom solutions ..................................................................................................................................................................................................19
Integration with Web server side applications or scripts .....................................................................................................................................19
Integration with SIP server side applications or scripts .......................................................................................................................................21
Development ........................................................................................................................................................................................................21
Parameters ..................................................................................................................................................................................................................24
SIP account settings .............................................................................................................................................................................................25
Engine related settings ........................................................................................................................................................................................27
Call divert and other settings ...............................................................................................................................................................................44
User interface related settings .............................................................................................................................................................................52
Parameter security ...............................................................................................................................................................................................59
JavaScript API ...............................................................................................................................................................................................................59
About .......................................................................................................................................................................................................................59
Basic example ..........................................................................................................................................................................................................60
Functions ..................................................................................................................................................................................................................60
Events .......................................................................................................................................................................................................................71
FAQ ..............................................................................................................................................................................................................................78
Resources ...................................................................................................................................................................................................................132
About
The Mizu WebPhone is a universal SIP client to provide VoIP capability for all browsers using a variety of technologies compatible with most OS/browsers. Since
it is based on the open standard SIP and RTP protocols, it can inter-operate with any other SIP-based network, allowing people to make true VoIP calls directly
from their browsers. Compatible with all SIP softphones (X-Lite, Bria, Jitsi others), devices (gateways, ATA’s, IP Phones, others), proxies (SER, OpenSIPS, others),
PBX (Asterisk, FreeSWITCH, FreePBX, Elastix, Avaya, FusionPBX, 3CX, Broadsoft, Alcatel, NEC, others), VoIP servers (Mizu, Voipswitch, Cisco, Huawei, Kamailio,
others), service providers (Vonage and others) and any SIP capable endpoint (UAC, UAS, proxy, others).

The Mizu WebPhone is truly cross-platform, running from both desktop and mobile browsers, offering the best browser to SIP phone functionality in all
circumstances, using a variety of built-in technologies referred as “engines”:
 NS (Native Service/Plugin)
 WebRTC
 Java applet
 Flash
 App
 P2P/Callback
 Native Dial

The engine to use is automatically selected by default based on OS, browser and server availability (It can be also set manually from the configuration or
priorities can be changed). This multi-engine capability has considerable benefits over other naive implementations.
The webphone can be used with the provided user interface (as a ready to use softphone or click to call button) or as a JavaScript library via its API.
The provided user interfaces are implemented as simple HTML/CSS and can be fully customized, modified, extended or removed/replaced.

Usage
The webphone is an all-in-one VoIP client module which can be used as-is (as a ready to use softphone or click to call) or as a JavaScript library (to implement any
custom VoIP client or add VoIP call capabilities to existing applications). You can create custom VoIP solutions from scratch with some JavaScript knowledge or
use it as a turn-key solution if you don’t have any programming skills as the webphone is highly customizable by just changing its numerous settings.

Setup

In short:
Download the webphone.zip and extract it to your web server (or test it from your local file system by just launching it from your desktop for example).
Open the webphone_config.js file and configure at least the serveraddress parameter.
Launch any of the example html included with the webphone, for example the index.html as from there you can access most examples.
Enter your SIP username/password (if you haven’t preconfigured it in the webphone_config.js) and call any account/extension/phone number.

A quick tutorial can be found here and/or you might follow the below step by step detailed instructions:

1. Download
The package can be downloaded from here: webphone download.
It includes everything you need for a browser to SIP solution: the engines, the JavaScript API, the skins and also a few usage examples.
This public downloadable version has some demo limitations, but you can use it for any tests or integration work before to purchase your license.
If you already have a webphone license, then use the webphone package sent to you by Mizutech instead of the above link.

2. Deploy
You can find the requirements here, which needs to be fulfilled to be able to use the webphone.
There is no any web server related requirements. You can host the webphone on any web server the exact same way as you host a static page or a png images.
Unzip and copy the webphone folder into your webserver and refer it from your html (for example from your main page) or open one of the included html in
your browsers by specifying its exact URL.
For example: http://192.168.1.44/webphone/samples/techdemo_example.html or https://yourdomain.com/webphone/softphone.html .

Notes:
 You might have to enable the .jar, .exe, .zip, .swf, .dll, .so, .pkg, .dmg and .dylib mime types in your webserver if not enabled by default (these files might be used in some
circumstances depending on the client OS/browser).
 If you wish to use (also) the WebRTC engine then your site should be secured (HTTPS with a valid SSL certificate). Modern browsers requires secure connection for both your
website (HTTPS) and websocket (WSS). If your website doesn’t have an SSL certificate then we can host the webphone for you for free or you can install a cheap or free
certificate.
 More details can be found here
 Alternatives:
o You can also test it without a webserver by launching the html files from your desktop (launch from local file system)
 o You can also test it by using the online demo hosted by Mizutech website, but in this case you will not be able to change the configuration (you can still set any parameters
from the user interface or from URL)

3. Settings
The webphone has a long list of parameters which you can set to customize it after your needs.
You can set these parameters multiple ways (in the webphone_config.js file, pass by URL parameter or via the setparameter() API).
If you are using the webphone with a SIP server (not peer to peer) then you must set at least the “serveraddress” parameter. For more details read here.
The easiest way to start is to just enter the required parameters (serveraddress, username, password and any other you might wish) in the webphone_config.js
file.

4. Integrate
The webphone can be used as a turn-key ready to use solution (just refer to it from your HTML) or as a Java-Script library to develop custom software.
There are multiple ways to use it:
o Use one of the supplied templates (the “softphone” or the “click to call”) and customize it after your needs. You can place one of them as an iframe or
div to your website
o Integrate the webphone with your webpage, website or web application
o Integrate the webphone with your server side application (if you are a server side developer)
o Create your custom solution by using the webphone as a JavaScript library (if you are a JavaScript developer)

5. Design
If you are a designer then you might create your own design or modify the existing HTML/CSS. For simple design changes you don’t need to be a designer.
Colors, branding, logo and others can be specified by the settings for the supplied “softphone” and “click to call” skins.
Mizutech can also supply a ready to use pre-customized build of the softphone skin with your settings and branding for no extra cost (ask for it).
Please note that the webphone also works without any GUI.

6. Launch
Launch one of the examples (the html files in the webphone folder) or your own html (from desktop by double clicking on it or from browser by entering the
URL). You might launch the “index.html” to see the included templates.
At first start the webphone might offer to enable or download a native plugin if no other suitable engine are supported and enabled by default in your browser.
It will also ask for a SIP username/password if you use the default GUI and these are not preset.
On init, the webphone will register (connect) to your VoIP server (this can be disabled if not needed by setting the register parameter to 0).
Then you should be able to make calls to other UA (any webphone or SIP endpoint such as X-Lite or other softphone) or to pstn numbers (mobile/landline) if
outbound call service is enabled by your server or VoIP provider.

Examples and ready to use solutions (found in the webphone folder):

 index.html: just an index page with direct links to the below examples for your convenience
 minimal_example.html: shortest example capable to make a call
 basic_example.html: a basic usage example
 techdemo_example.html: a simple tech demo. You might make any tests by using this html or change/extend it to fit your needs
 softphone.html: a full featured, ready to use browser softphone. You can use it as is on your website as a web dialer. For example you can include it in
an iframe or div on your website. Change the parameters in the webphone_config.js). You can further customize it by changing the parameters or
changing its design.
 softphone_launch.html: a simple launcher for the above to look better when launched directly (since the softphone.html is used usually in a DIV or
iFrame)
 click2call.html: a ready to use browser to SIP click to call solution. You might further customize after your needs
 custom: you can easily create any custom browser VoIP solution by using the webphone java script library

More details:
 Webphone file list
 Customization
 How it works?
 Quick webphone tutorial

Web Softphone
The webphone package contains a ready to use web softphone.

Just copy the webphone folder to your webserver and change the “serveraddress” setting in the in webphone_config.js file to your SIP server IP or domain to
have a fully featured softphone presented on your website. You can just simply include (refer to) the softphone.html via an iframe (this way you can even preset
the webphone parameters in the iframe URL) div or on demand.
Note: you might have to enable the following mime types in your web server if not enabled by default: .jar, .swf, .dll, .dylib, .so, .pkg, .dmg, .exe
The web softphone can be configured via URL parameters or in the " webphone_config.js" file, which can be found in the root directory of the package. The most
important configuration is the “serveraddress” parameter which should be set to your SIP server IP address or domain name. More details about the parameters
can be found below in this documentation in the “Parameters” section.

We can also send you a build with all your branding and settings pre-set: contact us.
Check here for more options.

Click-to-call
The webphone package contains a ready to use click to call solution.

Just copy the whole webphone folder to your website, set the parameters in the webphone_config.js file and use it from the click2call.html.
Rewrite or modify after your needs with your custom button image or you can just use it via a simple URI or link such as:
http://www.yourwebsite.com/webphonedir/click2call.html?wp_serveraddress=YOURSIPDOMAIN&wp_username=USERNAME&wp_password=PASSWORD&wp_
callto=CALLEDNUMBER&wp_autoaction=1
You can find more details and customization options in the click to call section.

Developers
Developers can use the webphone as a JavaScript library to create any custom VoIP solution integrated in any webpage or web application.
Just include the " webphone_config.js" to your project or html and start using the webphone API.

See the development section for the details.

Note: You can adjust the webphone behavior also without any development knowledge by just modifying its settings described in “parameters” section.

Designers
If you are a designer, you can modify all the included HTML/CSS/images or create your own design from scratch using any technology that can bind to JS such as
HML5/CSS, Flash or others.

For simple design changes you don’t need to be a designer. Colors, branding, logo and others can be set by the settings.
See the “User Interface Skin/Design” section for more details.

Note: If you are using the built-in softphone or click2call skins, then you can adjust them also without any designer knowledge by just setting/modifying the user
interface related settings in the webphone_config.js file.

Features, technology and licensing

The WebPhone is a cross-platform SIP client running entirely in clients browsers compatible with all browsers and all SIP servers, IP-PBX or softswitch. The
webphone is completely self-hosted without any cloud dependencies, completely owned and controlled by you (just copy the files to your Web server).

Feature list
 Standard SIP voice calls (in/out), video, chat, conference and others (Session Initiation Protocol)
 Maximum browsers compatibility. Runs in all browsers with Java, WebRTC or native plugin support (WebView, Chrome, Firefox, IE, Edge, Safari, Opera)
 Includes several different technologies to make phone calls (engines): WebRTC, NS (Native Service or Plugin), Java applet, Flash, App, Native and server
assisted conference rooms, calls through IVR, P2P and callback
 SIP and RTP stack compatible with all standard VoIP servers and devices like Cisco, Voipswitch, Asterisk, softphones, ATA, IP phones and others
 Transport protocols: IPv4/IPv6, UDP, TCP, HTTP, RTMP, websocket (uses UDP for media whenever possible)
 Encryption: SIPS, TLS, DTLS, SRTP and end to end encryption for webphone to webphone calls even if TLS/DTLS/SRTP is not supported
 NAT/Firewall support: auto detect transport method (UDP/TCP/HTTP), stable SIP and RTP ports, keep-alive, rport support, proxy traversal, auto
tunneling when necessary, ICE/STUN/TURN protocols and auto configuration, firewall traversal for corporate networks, VoIP over HTTP/TCP when
firewalls blocks the UDP ports with full support for ICE TCP candidates
 Works over the internet and also on local LAN’s (perfectly fine to be used with your own internal company PBX)
 RFC’s: 2543, 3261, 7118, 2976, 3892, 2778, 2779, 3428, 3265, 3515, 3311, 3911, 3581, 3842, 1889, 2327, 3550, 3960, 4028, 3824, 3966, 2663, 6544,
5245 and others
 Supported methods: REGISTER, INVITE, re-INVITE, ACK,PRACK, BYE, CANCEL, UPDATE, MESSAGE, INFO, OPTIONS, SUBSCRIBE, NOTIFY, REFER
 Audio Codec: G.711 (PCMU, PCMA), G.729, GSM, iLBC, SPEEX, OPUS (including wide-band HD audio)
 Video codec: H.263, H.264 and VP8 for WebRTC only
 SIP compatible codec auto negotiation and adjustment (for example OPUS – G.711, G.729 - wideband or RTC G.711 to G.729 transcoding if needed)
 Video calls and Screen-sharing (for WebRTC enabled browsers)
  Call divert: rewrite, redial, mute, hold, transfer, forward, conference and other PBX features
 Call park and pickup, auto-answer, barge-in
 Voice call recording
 IM/Chat (RFC 3428), SMS, file transfer, DTMF, voicemail (MWI)
 Multi-line support
 Multi account support
 Contacts: management, synchronization, flags, favorites, block, auto prioritization
 Presence (DND/online/offline/others) via standard SIP PUBLISH/SUBSCIBE/NOTIFY
 BLF (Busy Lamp Field)
 Balance display, call timer, inbound/outbound calls, caller-id display
 High level JavaScript API: web developers can easily build any custom VoIP functionality using the webphone as a JS library
 Stable API: new releases are always backward compatible so you can always upgrade to new versions with no changes in your code
 Integration with any website or application including simple static pages, apps with client side code only (like a simple static page) or any server side
stack such as PHP, .NET, java servlet, J2EE, Node.js and others (sign-up, CRM, callcenter, payments and others)
 Phone API accessible from any JavaScript framework (such as AngularJS, React, jQuery and others) or from plain/vanilla JS or not use the JS API at all
 Branding and customization: customizable user interface with your own brand, skins and languages (with ready to use, modifiable themes)
 Flexibility: all parameters/behavior can be changed/controlled by URL parameters, preconfigured parameters, from javascript or from server side

The webphone is in continuous development with multiple new releases every year.
Only the major releases are published on the software homepage as a demo (usually once per year), but new customers always receive the latest stable release.
All versions are fully backward/forward compatible, thus upgrades doesn’t require any change in existing configurations and code.
For the major new versions you can find the change list here.

Requirements
Server side:
 Any web hosting for the webphone files (any webserver is fine: IIS, nginx, Apache, NodeJS, Java, others; any OS: Windows, Linux, others).
Chrome and Opera requires secure connection for WebRTC engine to work (otherwise this engine will be automatically skipped). We can also host the
webphone for free if you wish on secure http. Note that the web phone itself doesn’t require any framework, just host it as static files (no PHP, .NET,
JEE, NodeJS or similar server side scripting is required to be supported by your webserver, however you are free to integrate the webphone with any
such server side stacks if you need so)
 At least one SIP account at any VoIP service provider or your own SIP server or IP-PBX (such as Asterisk, Voipswitch, 3CX, FreePBX, Trixbox, Elastix, SER,
Cisco and others)
 Optional: WebRTC capable SIP server or SIP to WebRTC gateway (Mizutech free WebRTC to SIP service is enabled by default. The webphone can be
used and works fine also without WebRTC, however if you prefer this technology then free software is available and Mizutech also offers WebRTC to
SIP gateway (free with the Advanced license) and free service tier. Common VoIP servers also has built-in WebRTC support nowadays)

Client side:
 Any browser supporting WebRTC OR Java OR native plugins with JavaScript enabled (most browsers are supported)
 Audio device: headset or microphone/speakers

Compatibility:
 OS: Windows (XP,Vista,7,8,10) , Linux, MAC OSX, Android, iOS, BlackBerry, Chromium OS and others
 Browsers: Firefox, Chrome, IE (6+), Edge, Safari, Opera and others
 Different OS/browser might have different compatibility level depending on the usable engines. For example the rarely used Flash engine doesn’t
implement all the functionalities of the WebRTC/Java/NS engines (these differences are handled automatically by the webphone API)

If you don't have an IP-PBX or VoIP account yet, you can use or test with our SIP VoIP service.
 Server address: voip.mizu-voip.com
 Account: create free VoIP account from here or use the following username/passwords: webphonetest1/webphonetest1,
webphonetest2/webphonetest2 (other people might also use these public accounts so calls might be misrouted)

Some more details can be found here.

Technical details
The goal of this project is to implement a VoIP client compatible with all SIP servers, running in all browsers under all OS with the same user interface and API. At
this moment no technology exists to implement a VoIP engine to fulfill these requirements due to browser/OS fragmentation. Also different technologies have
some benefits over others. We have achieved this goal by implementing different “VoIP engines” targeting each OS/browser segment. This also has the
advantage of just barely run a VoIP call, but to offer the best possible quality for all environments (client OS/browser). All these engines are covered by a single,
easy to use unified API accessible from JavaScript. To ease the usage, we also created a few different user interfaces in HTML/JS/CSS addressing the most
common needs such as a VoIP dialer and a click to call user interface.

More details about how it works can be found here.

Each engine has its advantages and disadvantages. The sip webphone will automatically choose the “best” engine based on your preferences, OS/Browser/server
side support and the enduser preferences (this can be overridden by settings if you have some special requirements): VoIP availability in browsers.

Engines

NS
Native VoIP engine implemented as a service or browser plugin. The engine works like a usual SIP client, connecting directly from client PC to your SIP server, but it is fully controlled
from web (the client browser will communicate in the background with the native engine installed on the client pc/mobile device, thus using this natively installed sip/media stack
for VoIP).
Available for: ALL browsers on Windows, Linux and macOS
Pros:
 All features all supported, native performance
Cons
 Requires install (one click installer)

WebRTC
A new technology for media streaming in modern browsers supporting common VoIP
features. WebRTC is a built-in module in modern browsers which can be used to
implement VoIP. Signaling goes via websocket (unencrypted or TLS) and media via
encrypted UDP (DTLS-SRTP). These are then converted to normal SIP/RTP by the VoIP
server or by a gateway.
Available for: all modern browsers.
Pros:
 Comfortable usage in browsers with WebRTC support because it is has no
dependencies on plugins
Cons:
 It is a black-box in the browser with a restrictive API
 Lack of popular VoIP codec such as G.729 (this can be solved by CPU intensive
server side transcoding)
 A WebRTC to SIP gateway may be required if your VoIP server don’t have built-
in support for WebRTC (there are free software for this and we also provide a
free service tier, included by default)

Flash
A browser plugin technology developed by Adobe with its proprietary streaming protocol
called RTMP.
Available for: old browsers.
Pros:
 In some old/special browsers only Flash is available as a single option to
implement VoIP
Cons:
 Requires server side Flash to SIP gateway to convert between flash RTMP and
SIP/RTP (we provide free service tier)
 Basic feature set

Java Applet
Based on our powerful JVoIP SDK, compatible with all JRE enabled browsers. Using the Java Applet technology you can make SIP calls from browsers the very same way as a native
dialer, connecting directly from client browser to SIP server without any intermediary service (SIP over UDP/TCP and RTP over UDP).
Available for: java enabled browsers such as IE and old Firefox/Chome.
Pros:
 All SIP/media features are supported, all codecs including G.729, wideband and custom extra modules such as call recording
 Works exactly as a native softphone or ip phone connecting directly from the user browser to your SIP capable VoIP server or PBX (but with your user interface)
Cons:
 Java is getting deprecated by modern browsers (handled automatically by the webphone by just choosing another available engine)
 Some browsers may ask for user permission to activate the Java plugin

App
Some platforms don’t have any suitable technology to enable VoIP in browsers (a minor percentage, most notably old iOS/Safari). In these cases the webphone can offer to the user
to install a native softphone application. The apps are capable to fully auto-provision itself based on the settings you provide in your web application so once the user installs the app
from the app store, then on first launch it will magically auto-provision itself with most of your settings/branding/customization/user interface as you defined for the webphone
itself.
Available for: old browsers with no any built-in or plugin based VoIP support.
Pros:
 Covering platforms with lack of VoIP support in browsers (most notable old iOS Safari)
Cons:
 No API support. Not the exactly same HTML user interface (although highly customized based on the settings you provided for the webphone)

P2P and callback

These are just “virtual” engines with no real client VoIP stack.
 P2P means server initiated phone to phone call initiated by an API call into your VoIP server. Then the server will first call you (on your regular mobile/landline phone) and
once you pick it up it will dial the other number and you can start talking (Just set the “p2p” setting to point to your VoIP server API for this to work)
 Callback is a method to make cheap international calls triggering a callback from the VoIP server by dialing its callback access number. It might be used only as a
secondary engine if you set a callback access number (Just set the “callback” setting to point to your VoIP server API for this to work)

These are treated as a secondary (failback) engines and used only if no other engines are available just to be able to cover all uncommon/ancient devices with lack of support for all
the above engines which is very rare. However it might be possible that these fits into your business offer and in that case you might increase their priority to be used more
frequently. Alternatively it might be used also to initiate native call under low quality network conditions.

Native Dial
This means native calls from mobile using your mobile carrier network. This is a secondary “engine” to failback to if no any VoIP capabilities were found on the target platform or
there is no network connection. In these circumstances the webphone is capable to simply trigger a phone call from the user smartphone if this option is enabled in the settings.
Rarely used if any.

The most important engines are: NS, WebRTC and Java. The other engines are to provide support for exotic or ancient browsers maximizing the coverage for all OS/browser
combinations ensuring that endusers always has call capabilities regardless of the circumstances.

API
All the above engines are covered with an easy to use unified Java Script API, hiding all the differences between the engines as described below in the “JavaScript API” section.

GUI
The webphone can be used with or without a user interface.
The user interface can be built using any technology with JS binding. The most convenient is HTML/CSS, but you can also use any others such as Flash.
The webphone package comes with a few prebuilt feature rich responsive user interfaces covering the most common usage such as a full featured softphone user interface and a
click to call implementation. You are free to use these as is, modify them after your needs or create your own from scratch. For more details check the “User interface Skin/Design”
section.

Licensing
The webphone is sold with life-time unlimited client license (Advanced and Gold) or restricted number of licenses (Basic and Standard). You can use it with any
VoIP server(s) on your own and you can deploy it on any webpage(s) which belongs to you or your company. Your VoIP server(s) address (IP or domain name)
and optionally your website(s) address will be hardcoded into the software to protect the licensing. You can find the licensing possibilities on the pricing page.
After successful tests please ask for your final version at [email protected]. Mizutech will deliver your webphone build within one workday after your
purchase.
Release versions does not have any limitations (mentioned below in the “Demo version” section) and are customized for your domain(s). All “mizu” and
“mizutech” words and links are removed so you can brand it after your needs (with your company name, brand-name or domain name), customize and skin (we
also provide a few skin which can be freely used or modified).
Your final build must be used only for you company needs (including your direct sip endusers, service customers or integrated in your software).
Title, ownership rights, and intellectual property rights in the Software shall remain with MizuTech.
The webphone is licensed per server. Already licensed servers cannot be removed or changed, however, you can use domain names, thus allowing changing your
server or its IP address any time later without any implications regarding the webphone license. The exception for the server limitations is the Gold license which
has a more flexible licensing, allowing also unlimited servers.
The agreement and the license granted hereunder will terminate automatically if you fail to comply with the limitations described herein. Upon termination, you
must destroy all copies of the Software. The software is provided "as is" without any warranty of any kind. You must accept the software SLA before to use the
webphone.
You may:
 Use the webphone on any number of computers, depending on your license
 Give the access to the webphone for your customers or use within your company
 Offer your VoIP services via the webphone
 Integrate the webphone to your website or web application (or native applications usually via a webview)
 Use the webphone on multiple webpage’s and with multiple VoIP servers (after the agreement with Mizutech). All the VoIP servers must be
owned by you or your company. Otherwise please contact our support to check the possibilities
You may not:
 Resell the webphone as is
  Sell “webphone” services for third party VoIP providers and other companies usable with any third-party VoIP servers (except if coupled with
your own VoIP servers)
 Resell the webphone or any derivative work which might compete with the Mizutech “webphone” software offer
 Create competition for Mizutech by reselling the webphone in similar way (not tied to your servers or apps, but as a general browser VoIP
client)
 Reverse engineer, decompile or disassemble or modify the software in any way except modifying the settings and the HTML/CSS skins or the
included JavaScript examples

Note: It is perfectly fine to sell or promote it as a “webphone service” if that is tied to your own SIP servers. But if you sell it as webphone software which can be used with any server
than you are actually selling the same as Mizutech and this is not allowed by the license.

There are the following legal ways to use the webphone:

 you have your own SIP server(s) and the webphone will be used with these server(s) (your customers can integrate the webphone into any application or website but they
will use the webphone via your VoIP server)
 you are building some application or website (such as a CRM, portal or game), so the webphone will be tightly integrated with your solution
 both of the above (webphone used via your own SIP server from within your own website or application)
 click to call for your webpage (or click to call service for others via your SIP server)
 your call center or contact center
 call center software offered to other companies if the webphone is deeply integrated in your callcenter software or uses your own SIP server for call termination/reception
 you are a VoIP service provider and wish to allow your customers to make calls from your website (without the need to install a native client)

Contact us if you wish to use the webphone in some other way which is not covered by this license or you are in doubt with the usage: [email protected]

Demo version
The downloadable demo version can be used to try and test before any purchase. The demo version has all features enabled but with some restrictions to
prevent commercial usage. The limitations are the followings:
 commercial usage not allowed
 maximum ~10 simultaneous webphone instances at the same time (depending on the engine used)
 might be restricted to up to ~5 or ~10 simultaneous calls (depending on the engine used)
 will expire after several months of usage (around 2 - 5 months)
 maximum ~100 sec call duration restriction
 maximum ~10 calls / session limitation. (After ~10 calls you will have to restart your browser)
 will work maximum ~20 minutes after that you have to restart it or restart the browser
 can be blocked from Mizutech license service

The demo version can be used for all kind of tests or development, but it can’t be used for production. It can be used by up to 5 developers to make short calls
(below 100 seconds) and the browser have to be restarted after 10 calls or 20 minutes, otherwise a “Trial” or “License” error will be displayed or printed to the
browser console.

Note: for the first few calls and in some circumstances the limitations might be weaker than described above, with fewer restrictions.
On request we can also provide an one month trial without the above demo limitations.

See the pricing and order your licensed copy from here.

Integration and customization

The webphone is a flexible VoIP web client which can be used for various purposes such as a dialer on your website, a click to call button for contacts or
integrated with your web application (contact center, CRM, social media or any other application which requires VoIP calls).

Concepts
The webphone can be customized by its numerous settings, webphone API’s and by changing its HTML/CSS.

Deploy:
The webphone can be deployed as a static page (just copy the webphone file to your website), as a dynamic page (with dynamically generated settings) or used
as a JavaScript VoIP library by web developers. You can embed the webphone to your website in a div, in an iFrame or on demand, as a module or as a separate
page. The webphone settings can be set also by URL parameters so you can just launch it from a link with all the required settings specified.

VoIP platform:
All you need to use the webphone is a SIP account at any VoIP service provider or your own softswitch/IP-PBX.
Free SIP accounts can be obtained from numerous VoIP service providers or you can use our service. (Note that free accounts are free only for VoIP to VoIP calls.
For outbound pstn/mobile you will need to top-up your account).
If you wish to host it yourself then you can use any SIP server software. For example FreePBX for linux or the advanced / free VoIP server for windows by
Mizutech. We can also provide our WebRTC to SIP gateway (for free with the Advanced or Gold license) if your softswitch don’t have support for WebRTC and
you need a self-hosted solution.

Settings:
The webphone settings can be passed multiple ways as described at the beginning of the parameters chapter.
The most important parameter that you will need to set is the “serveraddress” which have to be set to the domain or IP:port of your SIP server.
Other important parameters are listed here.
More details regarding the configuration with your SIP server can be found here.

Integration:
You can integrate the webphone with your web-site or web-application:
-using your own web server API
-and/or using the webphone client side JavaScript API to insert any business logic or AJAX call to your server API
The webphone library doesn’t depend on any framework (as it is a pure client side library) but you can integrate it with any server side framework if you wish
(PHP, .NET, NodeJS, J2EE or any server side scripting language) or work with it only from client side (from your JavaScript).
On the client side you can use the webphone API from any JavaScript framework (such as AngularJS, React, Vue, Electron, WordPress and others) or from
plain/vanilla JS or not use the JS API at all.

You can tightly integrate the web phone with your SIP server using the methods described here.

Design
You can completely change any of the included skins (click to call button, softphone), or change the softphone colors or create your user interface from scratch
with your favorite tool and call the webphone API from there.

Custom application:
For deep changes or to create your unique VoIP client or custom application you will need to use the JavaScript API.
See the development section for more details.

Branding:
Since the webphone is usually used within your website context, your website is already your brand and no additional branding is required inside the webphone
application itself. However the softphone skin (if you are using this turn-key GUI) has its own branding options which can be set after your requirements.
Additionally you can change the webphone HTML/CSS design after your needs if more modifications are required.

On request, we can send your webphone build already preconfigured with your preferences.
For this just answer the points from the voip client customization page (as many as possible) and send to us by email. Then we will generate and send your
webphone build within one work-day. All the preconfigured parameters can be further changed by you via the webphone settings.

Of course, this is relevant only if you are using a skin shipped with the webphone, such as the softphone.html. Otherwise you can create your custom solution
using the webphone library with your unique user interface or integrate into your existing website.

User interface Skin/Design

You can use the webphone with or without a user interface.

The webphone is shipped with a few ready to use open source user interfaces such as a softphone and click to call skins. Both of
these can be fully customized or you can modify their source to match your needs. You can also create any custom user interface
using any technique such as HTML/CSS and bind it to the web phone javascript API.

The default user interface for the softphone and other included apps can be easily changed by modifying parameters or changing
the html/css. For simple design changes you don’t need to be a designer. Colors, branding, logo and others can be set by the
settings parameters.
Also you can easily create your own app user interface from scratch with any tool (HTML/CSS or others) and call the webphone
Java Script API from your code.

In short, there are two ways to achieve your own (any kind of) custom user interface:
A. Use one of the skins provided by the webphone
Here you also have two possibilities:
o Quick customization changing the webphone built-in user-interface related settings (you can change the colors, behaviors and others)
o If you are a web developer, then have a look at the html and JavaScript source code and modify it after your needs (we provide all the source code
for these; it can be found also in the downloadable demo)
B. Create your own user web VoIP user interface and use the webphone as a JavaScript library from there.
The webphone has an easy to use API which can be easily integrated with any user interface. For example from your “Call” button, just call the webphone
webphone_api.js.call(number) function. Have a look at the samples folder: “minimal_example.html”, “basic_example.html” or “techdemo_example.html”
(You can also use the provided samples as a template to start with and modify/extend it after your needs)
Quick/Basic skin change
Just use the “colortheme” parameter to make quick and wide changes.
Then have a look at the “User interface related” parameters (described in the “Parameters” section) and change them after your needs (set logo, branding,
translate and others).

We can also send you a web softphone with your preferred skin. For this just set your customization on the online designer form and send us the parameters.
We can also send you fully customized and branded web softphone with your preferences. For this just send us the customization details.
Read below if you need more customizations.

Advanced skinning
Web developers/designers can easily modify the existing skins or create their own.
For the softphone application all the HTML source code can be found in "softphone.html" file as a single-page application model.
There are a few possibilities to change the skins:
 Change the user interface related parameters as already discussed above (for example the “colortheme” and other parameters)
 You can manually edit the html and css file with your favorite editor to change it after your needs
 Or just create your design with your favorite tools and call the web sip phone API from there
 If you wish to customize the softphone skin (softphone.html), it is discussed in details here

Note: If you are using the webphone as a javascript library then you can customize the “choose engine” popup in "css\pmodal.css".

The webphone can be positioned on your webpage after your needs. You can put it in a DIV or iFrame control and define any position from HTML of CSS. For
example you can make it floating as described here.

If you have different needs or don’t like the default skins, just create your own from scratch and call the webphone JavaScript API from your code. Using the API
you can easily add VoIP call capabilities also to existing website or project with a few function calls as described in the “Java Script API” section below.

For specific needs, look at the following sections:

 Dialer skin
 Click to call skin
 Custom solution
 Floating skin
 Multi-line

Web Dialer/Softphone
With the Mizu webphone you can create a web based softphone which looks like and works like a native desktop softphone application (such as X-Lite). A web
based solution has a big advantage since it is always available for endusers without the need to download and install an application and also it is much more
flexible than a traditional softphone (tons of parameters, easy to build user interface with HTML/CSS and easy integration with your backend).
The webphone includes a turn-key ready softphone skin (softphone.html) which you can start using in production as-is or change it after your needs.

Possibilities
You can create any HTML/CSS web design (with call controls, contact lists, etc) and call out to the WebPhone API to add the VoIP functionality.
You can start with any custom design from scratch or you might extend the “api_example.html” to reach your goals.
More details can be found here.
There are two possibilities to create your web dialer:
 Create your web softphone or dialer from scratch
You can create any HTML/CSS web design (with call controls, contact lists, etc) and call out to the WebPhone API to add the VoIP functionality.
Start with any custom design from scratch or you might extend the “api_example.html” (or any other from the samples folder) to reach your goals.
Basically the purpose of the webphone library is to create any web based SIP client solution and most of this documentation is about describing this
process.
Jump here to begin the development.
 Modify the existing softphone skin
In this chapter below we will explore the possibilities of customizing and extending the softphone skin (softphone.html)

Softphone skin basic customization

An easier solution is to use the turn-key softphone skin shipped with the webphone (softphone.html and related css and js files). This can be used as-is (it is a
ready to use turn-key solution) or further modifying after your needs.
No any development knowledge is required to deploy the web softphone on your website and you can also customize it easily via webphone parameters.
Note: You can quickly test this also from the online demo if you haven’t downloaded the webphone demo package yet:
https://www.webvoipphone.com/webphone_online_demo/softphone_launch.html (this will launch the very same “softphone.html” included in the download
package).

If you are a JavaScript developer then you might implement even more modifications by changing the HTML, CSS or JS files (softphone.html, js\softphone files).
We can also ship the webphone with ready to use customized softphone skin (with your branding and settings). For this, just answer the points on this page on
your order and send the answers by email.

Here is the whole process step by step:

1) Order your webphone from Mizutech with branding (send as many customization details as you can by answering these points).
At this point you already have a turn-key ready to use solution which can be deployed and used as-is on your website/page/application, without the
need of any technical or developer knowledge.
2) Customize your softphone by adjusting the technical parameters after your needs
This can be easily done by just modifying or adding more parameters in the webphone_config.js. At least the “serveraddress” parameter must be set.
3) Modify the user interface related parameters after your needs
For example you can set the “colortheme” parameter to make quick and wide change about the skin appearance.
4) Optionally further customize your softphone by making more user interface changes as described here and here.
This optional step requires some basic HTML/CSS knowledge.
5) Optionally further customize your softphone by integrating it with your client side application, integrating it with your server, integrate with server-side
address book or change/add functionalities by using the phone API .
This optional step requires some development knowledge.

The softphone skin can be positioned on your webpage after your needs. You can put it in a DIV or iFrame control and define any position from HTML of CSS. For
example you can make it floating as described here.

Softphone skin advanced customization

If the above described customization options are not enough to achieve your goals, you can modify or extend the softphone HTML, CSS or JavaScript code.
The softphone skin can be further customized, with new functionality, new user interface elements including new pages.

Adding a new functionality for the softphone skin usually involves the followings:
 Add some user interface element to the softphone skin. This is described in this chapter below.
 Add functionality for your user interface element. This is usually interaction with the SIP client or interaction with your app server (web service):
o To interact with the SIP client, just use the webphone SIP API. Learn more here.
o For the interaction with your backend you can use AJAX requests. Learn more here.

Files
All the webphone SDK library related files are located in the \js\lib\ directory.
The softphone skin related files are:
 html file: this is a Single Page Application and the HTML code is all in "softphone.html"
 css files are located in \css\ directory
 javascript files are located in: \js\softphone\ directory.

JQuery Mobile
The softphone skin is a single page application built using jQuery Mobile framework.
Note: jQuery Mobile is not maintained anymore by its original developers, however we forked a copy, which we keep up to date and optimized also for latest browser changes.

Every jQuery mobile "page" defined in softphone.html has a corresponding Javascript file in /softphone/ directory.
Regarding css files, styling, most of these css files in "css" directory are related to jQuery Mobile framework which is used to aid in the build of the Single Page
application and these should not be edited/changed.
All the styling of the webphone skin is defined in "mainlayout.css" and can be customized from here. This css file should be used to change any styling.

A simple way to change the softphone design can be achieved by changing the jQuery theme: The jQuery mobile Theme Roller generated style sheet can be
found in this file: "css\themes\wphone_1.0.css".
Current jQuery mobile version is 1.4.2. Using the Theme roller, you can create new styles: http://themeroller.jquerymobile.com/
The style sheet which overrides the "generated" one (in which all the customizations are defined) is "css/mainlayout.css".

For basic color scheme changes you can use the online designer form. Send us your preferred color parameters and we can send you a softphone build
preconfigured with your favorite colors.

Important note: jQuery namespace within the webphone is changed from "$" to “webphone_api.$”.

Pages
Pages in softphone.html are <DIV> elements with the following attribute: data-role="page".
Every jQuery mobile "page" defined in softphone.html has a corresponding Javascript file in js/softphone/ directory.
For example settings page's HTML is defined in softphone.html file in a <DIV> element with the id: page_settings. The corresponding Javascript file for the
settings page is: \js\softphone\_settings.js. All these "page view" Javascript files contain a few lifecycle functions which are used to initiate/load/destroy a page.
Helper containers
For your convenience, the softphone skin already contains a few <DIV> elements where you can drop any custom content.
These are place below the header on each main page (settins, dialpad, contactslist, callhistorylist).
The ID of these elements is the followings:
 extra_header_settings
 extra_header_dialpad
 extra_header_contactslist
 extra_header_callhistorylist

Of course, you can add, modify or remove any user interface element as you wish. Edit the html and CSS files after your needs.
These DIV’s were added only to help beginners.

Extra customizable pages

There are 5 predefined extra pages which can be customized as required. These pages are: page_extra1, page_extra2, page_extra3, page_extra4, page_extra5.
The corresponding javascript files are: _extra1.js, _extra2.js, _extra3.js, _extra4.js, _extra5.js.

In each javascript file related to a page, there are three "lifecycle" functions predefined:

 onCreate(): This lifecycle function is called only once per session, when the user navigates to the page for the first time. This is where most initialization
should go: attaching event listeners, initializing static page content, etc.
 onStart():This lifecycle function is called every time the user navigates to this page (every time the page is displayed). This is where dynamic content can be
added/refreshed. For example on Contacts page we load and display the contacts list.
 onStop():This lifecycle function is called every time the user navigates away from this page. This is where you can save data that the user modified, clear
dynamically added page content, etc.

Page navigation:
Page navigation can be done by calling jQuery mobile "changePage()" method:
Format: webphone_api.$.mobile.changePage("#PAGE_ID", { transition: "none", role: "page" });

Example: webphone_api.$.mobile.changePage("#page_extra1", { transition: "none", role: "page" });

To "close" a page, you can either navigate to another page, or return to the previous page by calling jQuery mobile method: webphone_api.$.mobile.back();

Page content:
The content of a page will be put in a <DIV> element with the following attribute: role="main".
Content can be added:
 statically, by defining the content in softphone.html file. For example for page_extra1 the content will be in <DIV> element with id: page_extra1_content.
 dynamically, in function "PopulateData()" defined in all javascript files corresponding to a page.

Autocomplete:
You can turn autocomplete off for your HTML input elements like this:
<input type="text" autocomplete="off" name="destination" id=”destination” />

Auto login:
By default the softphone skin will stop at the login screen only if there was no previous login (missing username/password).
Otherwise it should auto-login.

If you wish to preset the username/password then you can do it multiple ways:
 Set it in the webphone_config.js
 Pass as URL query parameters https://www.youraddress.com/webphone_path/softphone.html?wp_username=xxx&wp_password=yyy
 Pass it from JavaScript using the setparameter() API
 Pass it from your server side script session variable

Add functionality to web softphone skin

The webphone is shipped with a ready to use softphone skin with full functionality, but this doesn't mean that other desired functionalities cannot be added.
This can be achieved using the webphone's API.

For example, capturing call state events (or using any other API function) can be done like this:
- create a new javascript file, for example new.js
- import this script right after "webphone_api.js" in softphone.html file
- add the following javascript code in new.js:

//start interacting with the webphone only once the onAppStateChange callback has been fired with the “loaded” event.
webphone_api.onAppStateChange (function (state)
{
if (state === 'loaded') //webphone loaded
{
webphone_api.onCallStateChange(function (event, direction, peername, peerdisplayname, line, callid)
 {
//handle any events here. For example to catch the call connect events:
if (event === 'connected')
{
//add your code here
}
});
}
});

You can find a similar example of webphone API usage in /samples/basic_example.html.

Empty callback functions can be found in the _dialpad.js file for your convenience (onAppStateChange, onRegStateChange, onCallStateChange, onCdr). You can
just enter any code for these functions body.

The full webphone API is available so you can easily interact with the softphone skin from external modules or injected code as described in the development
and API chapters. Please note that the onCallStateChange and some other callbacks are not used internally by the softphone (because it uses the low level
notifications), but you can use them in your code to catch webphone state changes. Just set your callback function(s) and it will work.

GUI architecture
The skin HTML is located in softphone.html.
This is a single page application that uses jQuery Mobile framework for the single page structure and also for UI elements cross browser compatibility. Every
“page” in “softphone.html” has a corresponding Javasript file in “\js\softphone\” directory, for example: "page_dialpad" is managed by “_dialpad.js” file.
Each Javascript file managing a page has three “life cycle” callback functions:
 onCreate() - called only once – it is a good practice to handle binding to all kind of events here
 onStart() – called every time the page is displayed
 onStop() – called every time the page is “closed”
Note: jQuery namespace within the webphone is changed from "$" to "j$" or to “webphone_api.$”.

Page list
Below is a list of all Javascript files managing pages. These are located in \js\softphone\ directory:
“_accounts.js”: manage multiple SIP accounts
“_addeditcontact.js”: user interface for creating or editing contacts
“_call.js”: user interface of the in call page
“_callhistorydetails.js”: call history details page
“_callhistorylist.js”: call history list page
“_message.js”: messaging page
“_messagelist.js”: messaging inbox list page
“_contactdetails.js”: contact details page
“_contactslist.js”: contacts list page
“_filetransfer.js”: file transfer page
“_filters.js”: simple prefix rewrite page
“_internalbrowser.js”: web view used as a browser
“_logview.js”: page for viewing internal app log/trace
“_newuser.js”: new user registration page
“_dialpad.js”: main dial pad page
“_settings.js”: settings/login page
“_startpage.js”: it’s a page displayed once or on every start; can by a URL or text; usually used for privacy policy
“themes.js”: contains all the definitions of the different color themes that can be applied to the skin

Menu
Every page has a menu which can be accessed when the menu button in top-right corner is clicked. This click event triggers the CreateOptionsMenu() function in
the corresponding page javascript file. In CreateOptionsMenu() function the menu is assembled every time it is displayed to the user.
Then in MenuItemSelected() function the selected menu item will be handled.

Navigation
Navigation between pages can be accomplished with the jquery mobile changePage() method. For example, to navigate to settings page the following command
will be used:
webphone_api.$.mobile.changePage("#page_settings", { transition: "pop", role: "page" });
Styling
All the skin related CSS files are located in “\css\softphone\” directory. Here all the CSS files are jQuery mobile generated style sheets, except “mainlayout.css”.
All the styling is done here.
All element dimensions are set proportionally with percentages if possible, or using “em” unit of measure, to assure that the skin user interface resizes well on
any screen size and any resolution.

Skin start up
The main page launched is every time the settings page. If the user has already entered login credentials before, the skin will automatically login and display the
dial pad page.

Common tasks
The softphone skin is open sourced (plain html/css/js source code is included in the webphone package) and it can be freely changed by any web developer.
A few common tasks are described below for your convenience:

How to add a new page

The ready to use skin which is delivered with the webphone package is built as a single page application using jQuery mobile framework (actually only a few
things are used from jQuery mobile, the rest is plain html/javascript).
Follow the steps below to create a new page:
1) Create new <div> html element with attribute data-role="page" in softphone.html file. You can use “page_extra1” as template.
2) Create the equivalent JavaScript file, which manages the behavior of the new page. You can use the “_extra1.js” file as template.
3) Add the three “life cycle” callback Javascript functions in init.js
a. webphone_api.$(document).on('pageinit
b. webphone_api.$(document).on('pageshow'
c. webphone_api.$(document).on('pagebeforehide'
The new page is ready.

How to change the login page

The login page is managed in “_settings.js” file. Basically, it displays only the main login settings: serveraddress, username, password. There is also a traditional
style login page which can be enabled with the “useloginpage” parameter: -1=auto (default), 0=no, 1=only at first login, 2=always.

How to change the main page (dial pad tab)

The main dial pad tab consists of the “page_dialpad” id <div> defined in softphone.html and the associated javascript file: _dialpad.js.

How to add a new setting

First establish the setting parameter name, which should be in lowercase, for example “newsetting”.
Open stringres.js file and define the new setting title, description and short description (short description is optional) with the following format:
sett_display_name_mysetting: 'My settings',
sett_comment_mysetting: 'My new settings does the following',
sett_comment_short_mysetting: '',

If you want this setting to appear on the user interface, then add the “newsetting” to the comma separated list stored in String variable “settOrderWebphone”
and “settOrderWebphoneWebRTCFlash” located in _setings.js file. Also, the order in this list will define the order in which the settings will be displayed. For a
setting to appear in “Basic settings”, the parameter name should be added to the slit in variable “basicSettings”.
To actually define a new setting, go to “InitializeSettings()” function in common.js file add the new settings using SettingItem() function.
The following line of code will add the new settings:
SettingItem ("newsetting", "", "1", GROUP_LOGIN, "", "", "1", "");

SettingItem function has the following parameters:

 (String) parameterName: the name of the parameter.
 (String) value: the current value of the parameter. I can be empty string.
 (String) type: the type of the settings:
o “0” = (boolean) enabled/disabled
o “1” = text input
o “2” = dropdown list
 (String) group: it belongs to this group/submenu: