Flowroute JsSIP Client
Flowroute SIP over WebSocket and WebRTC JavaScript client.
It's actually is a facade for WebRTC, DOM and
JsSIP APIs to easy development
of Flowroute applications on frontend.
Online demo
https://demo.webrtc.flowroute.com/fr.html?cache_invalidate=xxx
Installation for usage
NPM
Available on Node Package Manager: npm install --save jssip_client
CDN
For a static script installation. Soon.
Setting up core development environment
You'll only require node
(+10.x.y) (if you haven't installed it yet, use nvm). Then after clonning this repository, change directory to its
root and run once:
npm install
And after this, you probably will enjoy to see a demo app with hot reloading on your browser:
npm start
This demo HTML code is pretty simple and you can use it to further developing a frontend
application on any lib/framework (React, jQuery, Angular, Vue etc.) or even
vanilla JavaScript.
With the UI debugging console, you can see many of actions being dispatched by
the user agent and its calls, everything that is available to you.
Creating releases
For package maintainers:
./release.sh x.y.z
Where "x.y.z" is actually the version you want to release (like ./release.sh 0.0.1
).
This script will change the version in package.json
, build production artifacts
into releases/
directory and and commit them. After this, you will want to git push
these changes and, for Node maintainers, also run npm publish
command.
Examples of features
First, create an instance of Flowroute client. You can pass some optional
parameters to turn on the browser console SIP debugging and
handle every client actions. All available param keys are available on
constructor docstring (so if you use a mainstrain editor/IDE, it'll even
show them for you with descriptions). Remember that these parameters are
optional and you can make a call work without them, they'll be assigned
to default ones.
const flowrouteClient = new FlowrouteClient({
debug: true,
onUserAgentAction: console.warn,
intervalOfQualityReport: 5000,
pointOfPresence: 'us-west-or',
});
Note that the example above is passing a param of QoS report. That's because
during this interval of milliseconds, a SIP MESSAGE will be sent with WebRTC
stats about the call RTC connection.
There's also a selected PoP, because many Flowroute PoPs are equiped with
WebSocket/WebRTC gateways. The preferred PoP and its related edge strategy
can be set using Flowroute APIs and the same ones are supported by this client,
is therefore possible for a customer to control where the media should be relayed to ensure we can avoid unnecessary media relay.
Some other common parameters are callerId
and password
.
Always check the docstring for the full list.
Having the client ready, you can start a connection with the signaling server
and invoke the SIP REGISTER:
flowrouteClient.start();
After receiving the { type: 'registered' }
action on onUserAgentAction
callback,
you're free to make calls. And it's simple as:
flowrouteClient.call({
to: '',
onCallAction: console.warn,
});
As always, parameters are optionals (although you can consider this to
a
required one, another approach is using flowrouteClient.setDID
method before
this and here omitting to
). If you want, a audioConstraints
parameter
is available so you can pick, for example, a selected audio output device id.
You can easily control player volume, from 0 (mutting it) to 100 (loudest):
flowrouteClient.setOutputVolume(100);
During a call, you can get its instance and make actions with JsSIP.RTCSession
API,
like sending DTMFs:
flowrouteClient.getActiveCall().sendDTMF('4');
flowrouteClient.getActiveCall().sendDTMF('2');
Technical debts so far
Feel free to contribute on this:
- answering calls
- unit tests
- polyfill for IE
- easy to download and use released script versions