How to configure vicibox webphone with self-signed ssl

In this blog , i am going to provide step by step guide to integrate, enable and configure the viciphone(a webrtc phone) in vicibox (also applicable to any vicidial based system) using the Self Signed SSL Certificate ,ie without a public-ip and FQDN or accessing the vicidial with internal LAN IP.
But same steps can also used with FQDN .
As part of this Tutorial i am using vicibox 9,
  Prerequisites
1. Vicibox 9 or later
2. asterisk 13 and above (vicibox 9 inbuilt)
3. Mozilla or chrome
  Steps : Vicidial webphone Configuration

1. Generate Self Signed Certificate in Linux
2. address the self signed certificate and key in apache
3. Asterisk configuration to support webrtc
4. download the viciphone to the agent web directory
5. Vicidial configuration to enable the viciphone as webphone.
6. Final workaround to support webrtc with selfsigned certificate.
  STEP 1: Generate Self Signed Certificate using openssl

Login to your linux console as root and run the below command to generate the selfsigned SSL certificate and key. check this link
--Copy-Paste-- its a single line command.

    openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/apache2/ssl.key/viciphone.key -out /etc/apache2/ssl.crt/viciphone.crt

Note: the default path of ssl in vicibox is /etc/apache2/ssl.crt and /etc/apache2/ssl.key

I used viciphone name, you can use your own specific name.

If you have Trusted certificate, you can place the certificate in /etc/apache2/ssl.crt/ and key in /etc/apache2/ssl.key/
  STEP 2 : Apache configuration.
STEP 2.1

edit the vicibox vhost file.

    nano /etc/apache2/vhosts.d/1111-default-ssl.conf

edit the below line with your certificate name

    SSLEngine on
    SSLCertificateFile /etc/apache2/ssl.crt/viciphone.crt
    SSLCertificateKeyFile /etc/apache2/ssl.key/viciphone.key

save the file.

Step 2.2 : Redirect All HTTP to HTTPS connection

Edit the below mentioned file

     nano /etc/apache2/vhosts.d/1111-default.conf

Add below line after DocumentRoot as shown below

    DocumentRoot /srv/www/htdocs
    Redirect permanent / https://yourserverip/   

Note: its My Redirect IP / https://192.168.1.9/

save the file

    Restart apache
    systemctl restart apache2

  STEP 3: Asterisk configuration to support webrtc
STEP 3.1 :

Edit /etc/asterisk/http.conf and make sure below settings enabled

   nano /etc/asterisk/http.conf

 [general]
enabled=yes
bindaddr=0.0.0.0
bindport=8088
tlsenable=yes
tlsbindaddr=0.0.0.0:8089
tlscertfile=/etc/apache2/ssl.crt/viciphone.crt
tlsprivatekey=/etc/apache2/ssl.key/viciphone.key

save the file.

STEP 3.2: Edit /etc/asterisk/modules.conf

    nano /etc/asterisk/modules.conf

add the below entry if not enabled before.

    load => res_http_websocket.so

save the file

Reboot the server once, so the asterisk startup with http_websocket loaded,
to confirm websocket is loaded, run the below command

    asterisk -rx 'http show status'

make sure it says

    “HTTPS Server Enabled and Bound to 0.0.0.0:8089”

  STEP 4: Downloading the viciphone 
Official link : https://viciphone.com 
githublink : https://github.com/vicimikec/ViciPhone

SSH to your vicibox and run below commands

   

cd /srv/www/htdocs/

wget https://forum.devsach.in/uploads/9ST6AVCEOE23/pbxwebphone.zip

unzip pbxwebphone.zip

chmod -R 777 PBXWebPhone

or   

git clone https://github.com/chornyitaras/PBXWebPhone.git

   
  Step 5 : Vicidial configuration

Make sure the vicidial admin interface is accessible via https
https://192.168.1.9/vicidial/admin.php
Step 5.1
Go to ADMIN --> System settings
Change the Wephone URL

    Wephone URL: /PBXWebPhone/viciphone.php

Submit

Step 5.2
Goto ADMIN -> Servers
configure the External Server IP:
If your server is accessible from outside ie Public ip ,enter your public ip here. if not leave it blank or enter your local server ip.

    Web Socket URL : wss://192.168.1.9:8089/ws

if you are accessing your server with public ip then
Set External Web Socket URL: wss://publicip/fqdn:8089/ws
or Leave it blank

SUBMIT
Step 5.3  :vicidial websocket template.
Go to Admin -> Templates

Create a new template with below entries (edit the cert path) with name vicitemplate

type=friend
host=dynamic
encryption=yes
avpf=yes
icesupport=yes
directmedia=no
transport=wss
force_avp=yes
dtlsenable=yes
dtlsverify=no
dtlscertfile=/etc/apache2/ssl.crt/viciphone.crt
dtlsprivatekey=/etc/apache2/ssl.key/viciphone.key
dtlssetup=actpass
rtcp_mux=yes


SUBMIT
Step 5.4 : Creating Phone as webphone.
Go to Admin -> Phones > add A New Phone (default)
after adding a New phone edit the below settings

    1. Set As Webphone: Y
    2. Webphone Auto-Answer: Y
    3. Use External Server IP  : N   

    note: if you are using external IP then set this to Y 

    4. Template : select the template created in Step 5.3 above

  STEP 6: Browser workaround
    You need do this workdaround on each agent PC browser, who login as agent with vicidial webphone.
open mozilla or chrome and browse below two urls and accept the certificate (accept the risk and continue)

    https://serverip/
    ie :  https://192.168.1.9/

    https://serverip:8089/
    ie : https://192.168.1.9:8089

once the certificate accepted
login to agent portal with username and passwords.

    https://serverip/agc/vicidial.php

Note: you need to press Call Agent Webphone to get connected.
Also you need Press Allow for Mic and Speaker permission .

  Conclusion:
    Hope the article is helpful, same steps can be used for official SSL certificate with fully qualified domain name, for professional support reach me at skype: manish.kadiya