Sansay's Webphone is a WebRTC client that for Sansay's WebSBC. It is written as such that it can work right out of the box with very little coding, at the same time offer the flexibility such that developers can customerize it to their own needs.
At the high level Sansay Webphone provides a very easy to use JQuery plugin API. By using JQuery plugin, web developers can get a webphone running in no time with only a few lines of Javascript codes. While JQuery plugin is the easy way to implement a webphone, it just implements the basic functionalities and a plain UI that may not be suitable nor is it desirable for users of all levels. Sansay Webphone also exposes a lower level APIs that provide supports for all functions needed to implement a full-feature, real-time communication application.
The following sections should provide enough detail information for developing a WebRTC webphone at the two level mentioned above.
<div id="my-example-container"></div>
$(document).ready(function() {
$("#my-example-container").webphone("websbc.example.com");
...
});
websbc.example.com is the domain name of your WebSBC server
$("#my-example-container").webphone.login("5551000", "abcd1234", "Joe Blow", "common");
"5551000" is the SIP user
"abcd1234" is the SIP password
"Joe Blow" is the Caller ID
"common" is the domain that the user belongs to in the WebSBC server
$("#my-example-container").webphone.logout();
<div id="my-phone" class="container"></div>
$(document).ready(function() {
$("#my-phone").webphone("websbc.example.com");
...
});
$(document).ready(function() {
$("#my-phone").webphone("websbc.example.com", options);
...
});
$("#my-phone").webphone.login(user_sip_id, user_sip_password, user_caller_id, user_domain);
user_sip_id – User ID for SIP authentication.
user_sip_password – User Password for SIP authentication.
user_caller_id – Input for caller ID.
user_domain – Fully Qualified Domain Name(FQDN) of WebSBC User is bing registered to. Field is required as part of authentication for WebSBC if such is configured.
$("#my-phone").webphone.login(user_sip_id, user_sip_password, user_caller_id, user_domain, service_active, service_inactive);
service_active and service_inactive are callbacks that will be invoked in the event of phone service becoming available or unavailable, respectively. Typically, these callbacks trigger UI change to further notify the users of their webphone's service availability.
theme – A 'dark' and 'light' theme are provided in the SDK. 'dark' is the default theme if none is specified.
position – The webphone can be positioned on the 'left' or 'right' side of the screen. 'right' is default position if none is specified.
ring_tone – Sansay's webphone comes with a default ringtone. This is the ringtone for incoming calls. Users can customize by pointing this to a different ringtone(.wav) file.
logo – The webphone shows a Sansay logo on its upper left hand corner. This option allows users to change the logo to their own by pointing this to a different logo file.
$("#my-phone").webphone.login("websbc.example.com", {theme: 'light', postition: 'left', ring_tone: 'my-file-path/my-ring-tone.wav', logo: 'my-logo-path/my-logo.png'});
sansay/
|---- webphone-plugin.html
|---- css/
|---- webphone-dark.css
|---- webphone-light.css
webphone-icon – This contains the status icon that will be shown or hidden based on the status of the phone, i.e. whether it's logged in and active, or not.
webphone-incoming-call – This is the panel that is shown when there is a incoming call to prompt the user to either 'Answer' or 'Reject' the call.
webphone-video – This panel is used for video calls.
webphone-keypad – This is the panel where the keypad is defined.