The RingCentral WebPhone Library includes a JavaScript WebRTC library and a WebRTC phone demo app.
Currently, we officially support Google Chrome browser. Official support for Firefox and Safari browsers are coming soon.
Please visit Network Requirement links below
npm install ringcentral-web-phone
// or
bower install ringcentral-web-phoneEnsure your app has the following properties set. If these are not set, the error specified will be returned.
| App Property | Value | Error if not set |
|---|---|---|
| Permissions | VoIP Calling |
Specific application permission required |
| Platform type | Browser-based |
Client edition is not compatible with current Brand |
Since WebRTC enables dialing out, you need to have a DIGITAL LINE attached to an extension to use this capability. You can configure this in Online Web Portal for Production and Sandbox accounts. More information on Digital Lines and their configuration is available in the following RingCentral Knowledge Base article topics:
These permissions be configured for your app in the RingCentral Developer Portal. Fill this Registration Form to get access to WebRTC permissions. Please contact devsupport@ringcentral.com to request these permissions.
<video id="remoteVideo" hidden="hidden"></video>
<video id="localVideo" hidden="hidden" muted="muted"></video>
<script src="https://github.com/vyshakhbabji/webphone-8x/raw/master/../sip.js" type="text/javascript"></script>
<script src="https://github.com/vyshakhbabji/webphone-8x/raw/master/../ringcentral-web-phone.js" type="text/javascript"></script>For this example you will also need to have RingCentral JS SDK installed.
Configure the web-phone
var appKey = '...';
var appSecret = '...';
var appName = '...';
var appVersion = '...';
var sdk = new RingCentral.SDK({
appKey: appKey,
appSecret: appSecret,
appName: appName,
appVersion: appVersion,
server: RingCentral.SDK.server.production // or .sandbox
});
var platform = sdk.platform();
platform
.login({
username: '...',
password: '...'
})
.then(function(loginResponse) {
return platform
.post('/client-info/sip-provision', {
sipInfo: [{transport: 'WSS'}]
})
.then(function(res) { // Doing nested then because we need loginResponse in a simple way
return new RingCentral.WebPhone(res.json(), { // optional
appKey: appKey,
appName: appName,
appVersion: appVersion,
uuid: loginResponse.json().endpoint_id,
logLevel: 1, // error 0, warn 1, log: 2, debug: 3
audioHelper: {
enabled: true, // enables audio feedback when web phone is ringing or making a call
incoming: 'path-to-audio/incoming.ogg', // path to audio file for incoming call
outgoing: 'path-to-audio/outgoing.ogg' // path to aduotfile for outgoing call
}
});
});
})
.then(function(webPhone){
// YOUR CODE HERE
})
.catch(function(e){
console.error(e.stack);
});$ git clone https://github.com/ringcentral/ringcentral-web-phone.git
$ cd ringcentral-web-phone
$ npm starthttp://localhost:8080/demo/ in the browser (port may change if 8080 will be already used by other app)Server/WebBrowser-Basedhttp://localhost:8080/demo/callback.html as the OAuth Redirect URI for the application in Developer Portal RegisterCallAccept button when window pops up (will be visible when there is an incoming call)If there's any connection problems to Sandbox environment, you may need to switch to the Production environment.
WebRTC works with issues when served from file system directly to browser (e.g. file:// protocol), so you will need a local HTTP server (comes with this package).
Online demo is hosted at https://ringcentral-web-phone.herokuapp.com/demo
** NOTE : If you are using the online demo, please add https://ringcentral-web-phone.herokuapp.com/demo/callback.html to the app's OAuth Redirect URI
Except for some RingCentral-specific features the API is 100% the same as SIP.JS: http://sipjs.com/api/0.7.0: most of the time you will be working with RC-flavored UserAgent and Session objects of SIP.JS.
We encourage you to take a look at Guides section, especially Make A Call and Receive A Call articles.
var webPhone = new RingCentral.WebPhone(provisionData, options);/client-info/sip-provision API endpointappKey — your application key appName — your application short code name appVersion — your application version uuid — manually provide the unique identifier of WebPhone instance (should persist between page reloads)logLevel — controls verboseness in browser console
0 — Errors only (good for production)1 — Errors & warnings2 — Errors, warnings, logs3 — Everything including debug information (good for development)audioHelper — audio feedback when web phone is ringing or making a call
enabled — turns feedback on and offincoming — path to incoming.ogg, audio file for incoming calloutgoing — path to outgoing.ogg, audio file for outgoing callonSession — this callback will be fired each time User Agent starts working with session (incoming or outgoing)var session = webPhone.userAgent.invite('PHONE_NUMBER', {
media: {
render: {
remote: document.getElementById('remoteVideo'),
local: document.getElementById('localVideo')
}
},
fromNumber: 'PHONE_NUMBER', // Optional, Company Number will be used as default
homeCountryId: '1' // Optional, the value of
});webPhone.userAgent.on('invite', function(session){
session.accept({
media: {
render: {
remote: document.getElementById('remoteVideo'),
local: document.getElementById('localVideo')
}
}
}).then(...);
});Callee will be put on hold and the another person can join into the call by dialing the extension number announced within the call.
session.dtmf('DTMF_DIGITS').then(...);Callee will be put on hold and the another person can join into the call by dialing the extension number announced within the call.
session.hold().then(...);
session.unhold().then(...);Callee will be put on mute or unmute
session.mute();
session.unmute();Callee will be put on hold and the another person can join into the call by dialing the extension number announced within the call.
session.park().then(...);Caller can filp calls to different devices logged in through the same credentials.
session.flip('TARGET_NUMBER').then(...);session.transfer('TARGET_NUMBER').then(...);If an agent has an active call with a customer and needs to transfer this call to a supervisor, then agent puts existing call on hold, makes a call to a supervisor and when ready performs a warm transfer. Customer will be connected to supervisor and the call between customer and agent will be disconnected.
Warm transfer puts current line on hold (if not done yet) then takes an existing line from arguments and makes transfer.
session.hold().then(function(){
return new Promise(function(resolve, reject){
var newSession = webPhone.userAgent.invite('PHONE_NUMBER', {
media: {}
});
// when ready call the following code, for example when user clicks "Complete Transfer" button
document.getElementById('complete-transfer').addEventListener('click', function(){
resolve(session.warmTransfer(newSession));
});
});
}).then(...).catch(...);session.forward('TARGET_NUMBER').then(...);session.startRecord().then(...);
session.stopRecord().then(...);Not yet implemented. Could be done by dialing *83. The account should be enabled for barge/whisper access through system admin.