View source for WebRTC SDK-JavaScript based

{{C}}
=Introduction=

This article describes how to setup the Zenitel JavaScript based WebRTC SDK.The SDK contains a sample WebRTC client, including source code. The intended functionality is to have browser WebRTC client which can make calls towards any device in ZCP along with other features:
<br>   
*Call answering.
*Call hanging up.
*Playing audio messages.
*Relay Activation

=Prerequisites=
*Node.js.
*Zenitel Connect Pro 1.7.0.1 onwards up and running.
*Internet access
*npm

==ZCP certificate==
Zenitel Connect Pro version 1.7.0 introduces WebRTC as device type and /webrtc as a websocket path, it's essential to import the certificate so the browser can trust the secure WSS connection (wss://<ZCP_IP_ADDRESS
>/webrtc on port 443); otherwise WebRTC signaling will be blocked for security reasons.<br>To do so, follow the steps below:
Download internal CA certificate from ZCP:<br>
<br>
[[File:zcpCer.png|thumb|left|700px|Certificate section of ZCP]]
<br style="clear:both;" />
<br>

In a Chromium based browser, import the certificate you just downloaded. Test out by accessing ZCP via HTTPS, https://ZCP_IP_ADDRESS. If successful, you should be able to connect without making any exceptions in browser
<br>
[[File:ZCPTLS.png|thumb|left|700px|Connection established via HTTPS]]
<br style="clear:both;" />
<br>

=Initializing the SDK=
Before initializing the SDK , you must download and install Node.js, npm comes along with it, but  npm install is required once per project to fetch and set up all the libraries the SDK needs before you can run the demo server. You can verify installation by running '''node -v''' and '''npm -v'''  inside powershell terminal <br>
Once steps above have been completed, navigate to SDK folder via powershell and run '''node server.js''' command.

<br>
[[File:directory1.png|thumb|left|700px|Directory example ]]
<br style="clear:both;" />
<br>

Once the command is ran, server will start on port '''3443''' of '''localhost'''

=Adding WebRTC device to ZCP=
*In ZCP device section, press '''Add''' button.
*Assign name and directory number.
*Select '''WebRTC''' as device type.
*Save the device.
<br>
[[File:rtcdevice.png|thumb|left|700px|Device enrollment interface ]]
<br style="clear:both;" />
<br>
Once the device is set up, it will have SIP Account password, this will be used when registering WebRTC client
<br>
[[File:sipAccount.png|thumb|left|700px|SIP Password]]
<br style="clear:both;" />
<br>
'''''Note: The status of device "Not Operational" Does not prevent device SIP account to be registered with RTC web client.


=SIP registration=
To register device, fill in input field on WebRTC client running on port '''3443''' of '''localhost'''. Below is the image that shows correct settings and credential for input field"
<br>
[[File:clientRegistered.png|thumb|left|700px|Registered status of client]]
<br style="clear:both;" />
<br> 
Device directory number and password must match those of RTC device added in steps above
=Establishing call=
To establish call from web client toward device registered to ZCP:
*Fill in device directory number to call(Must be registered to ZCP).
*Select audio input and output devices from dropdown.
Press on "'''Call''' button.
Once the call has been established, status should show "'''Established'''

<br>
[[File:established.png|thumb|left|700px|Established call]]
<br style="clear:both;" />
<br> 
==Establishing call from device to Web client==
To establish call from device registered on ZCP to Web client:
*If call is being placed from station to Web client, configure dial string of the station to match the directory number of WebRTC device.
*If call is being placed from IPDMH-V2 or similar device, dial the directory number of WebRTC device.
On web client interface, incoming call will show with options to either answer or reject
<br>
[[File:Device-rtc-call.png|thumb|left|700px|Established call]]
<br style="clear:both;" />
<br>

==Playing audio message==
To play audio message on device registered to ZCP:
*Store audio file you intend to play on a device.
*Under audio input source, choose audio file.
*Browse and select audio file.
*Initiate call.
*Once the audio message starts playing, status will change to "Established"
<br>
[[File:Rtc-message.png|thumb|left|700px|Established audio message]]
<br style="clear:both;" />
<br> 

==Establishing call between two Web clients==
It's possible to establish call between two web clients. This is useful in scenarios where there are multiple operator machines such as laptops or PC's. Each can run it's own instance of WebRTC client. To achieve this functionality, two or more WebRTC devices must be added to ZCP, each will have it's own directory number and SIP account password.
*Open browser on PC #1 and register Web client.
*Open browser on PC #2 and register Web client.
*Input directory number of WebRTC device you wish to call.
<br>
[[File:Client-Client.png|thumb|left|700px|Established client to client call]]
<br style="clear:both;" />
<br> 
For testing purposes, two different browsers can be used on same PC(Edge, Chrome) instead of two separate PCs

[[Category: Zenitel Connect Pro]]
[[Category: Zenitel Connect Pro Integrations]]
[[Category:3rd party integration]]