ringcentral / ringcentral-js-cti-demo

CTI demo application

RingCentral CTI Demo for JavaScript

Overview

This is a demo that showcases various Call Telephony Integration (CTI) use cases for the RingCentral Connect Platform. The demo runs as a set of HTML5 static webpages that can on a server or locally.

The demo showcases the following use cases:

1. Authorization via 3-Legged OAuth 2.0
2. Click-to-Call
3. Inbound Screen Pop
4. Call Log Retrieval
5. Call Recording Retrieval and Playback
6. SMS

View Screenshot

View Live Demo - https://ringcentral.github.io/cti-demo/

Getting Started

The full installation instructions are included as an HTML file in the demo itself. You can view the full installation instructions on the live demo.

Since this runs live on GitHub Pages, you can run this demo without any server-side installation, though it may be worthwhile to install the RingCentral for Desktop softphone as described in the instructions.

You can also run this demo on any webserver by adding the public directory to the server's html directory. This may be useful if you wish to edit the pages. There is no need to run a database as the demo stores all necessary data using HTML5 Local Storage (e.g. window.localStorage). Instructions are provided below for Node.js http-server as one easy approach for this.

Installation

$ git clone https://github.com/ringcentral/ringcentral-cti-demo-js
$ cd ringcentral-cti-demo-js
$ bower install ringcentral ringcentral-helpers --save

The included .bowerrc file will save components to the public/components directory.

Using Node.js http-server

You can run this demo using any server that can host static webpages, including GitHub pages.

Using Node.js and http-server (NPM package) is presented as one easy to use option.

Pre-reqs

Install NPM globally:

$ curl https://npmjs.org/install.sh | sh

Install http-server globally so it cna be run from the command line.

$ npm install http-server -g

Install and run demo.

$ git clone https://github.com/ringcentral/ringcentral-cti-demo-js
$ http-server ringcentral-cti-demo-js/public

Navigate Google Chrome to the location sepcified by http-server, e.g.

http://localhost:8080

Customization

Syntax Highlighting

This demo uses highlight.js for syntax highlighting. The CSS style files are located in the GitHub repo. To choose any style, simply copy the desired style CSS file to the project's css/highlight.css location.

Links

Project Repo

• https://github.com/ringcentral/ringcentral-cti-demo-js

RingCentral SDK for JavaScript

• https://github.com/ringcentral/ringcentral-js

RingCentral API Developer and Reference Guide

• https://developer.ringcentral.com/api-docs/

RingCentral API Explorer

• https://developer.ringcentral.com/api-explorer/

Contributions

Any reports of problems, comments or suggestions are most welcome.

Please report these on GitHub.

License

RingCentral CTI Demo JS is available under an MIT-style license. See LICENSE.txt for details.

RingCentral CTI Demo JS © 2016 by RingCentral

RingCentral CTI Demo JS © 2015 by John Wang

ringcentral-js-cti-demo's Issues

Upgrade RingOut drop-down lists for from phone numbers and caller id

RingOut should provide drop-down lists for from phone numbers and caller id numbers.

1. From phone numbers can be retrieved using the extension/forwarding-number endpoint filtering on the CallForwarding feature.
2. Caller Id numbers can be retrieved using the extension/phone-number endpoint filtering on the CallerId feature.

These are shown here:

• http://ringcentral-sdk-ruby.readthedocs.org/en/latest/usage/voice/Click-To-Call/#ringout-api-call

Upgrade to RingCentral JS SDK 2.x

Upgrade the demo app's RingCentral JS SDK from version 1.x to 2.x.

Add "password" authorizaton flow

Currently the demo only support OAuth 2.0 for authorizaton which is considered harder to set up (need to configure the redirect URL).
Do you plan to add a demo about "password" authorizaton flow? It might be better for demo purpose.

Clean up and refactor code

This was written quickly to be functional end-user demo.

The code should be cleaned up and refactored as well.

Upgrade SMS sender drop-down list to use phone-number endpoint

The SMS sender / from phone number drop-down list should use the list of phone numbers retrieved from the extension/phone-number endpoint filter on the SmsSender feature.

Using the JS SDK Helpers (https://github.com/ringcentral/ringcentral-js-helpers), you can do the following:

rawPhoneNumbersArray.filter(SDKHelpers.phoneNumber().filter({features: [‘ SmsSender’]});

Add Bower support for RingCentral SDK

Add Bower support to install RingCentral SDK. Limit to major relevant major version, e.g. RingCentral JS SDK 2.0.

Integrate WebRTC

Integrate WebRTC using ringcentral-js-widget.

Add more CDN support for listed dependencies

The following JS SDK 2.0 dependencies are available on CDNJS and can be used:

• https://cdnjs.com/libraries/es6-promise
• https://cdnjs.com/libraries/fetch
• https://cdnjs.com/libraries/pubnub