how to configure vicibox webphone with self-signed ssl

Vicibox webpone with Self-signed SSL certificate

Topic: how to configure vicibox webphone with self-signed ssl

vicibox webrtc

  Overview:

    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.

vi /etc/apache2/vhost.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

 vi /etc/apache2/vhost.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.29.99/

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

vi /etc/asterisk/http.conf
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

vi /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 /var/tmp
git clone https://github.com/vicimikec/ViciPhone.git
cd Viciphone
cp -r src /srv/www/htdocs/agc/viciphone
chmod -R 755 /srv/www/htdocs/agc/viciphone

  Step 5 : Vicidial configuration

Make sure the vicidial admin interface is accessible via https 
https://192.168.29.99/vicidial/admin.php

Step 5.1
Go to ADMIN --> System settings
Change the Wephone URL

Wephone URL: https://192.168.29.99/agc/viciphone/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.29.99: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.29.99/

https://serverip:8089/
ie : https://192.168.29.99: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:striker24x7


10 Comments
  • AlexPavoris
    AlexPavoris February 12, 2021 at 12:13 PM

    Hello! This post couldn't be written any better! Reading this post reminds me of my old room mate! He always kept talking about this. I will forward this post to him. Pretty sure he will have a good read. Thank you for sharing! Cloud contact centre solutions

  • Anonymous
    Anonymous June 29, 2021 at 9:35 PM

    Is it Necessary to do a zypper ref & zypper up in vicibox 9.0.3

    • Ajit Kumar
      Ajit Kumar June 30, 2021 at 9:37 AM

      yes must, to have latest software.
      i think vicibox 9.0 is using old opensusue ,
      soon vicibox will releasing vicibox 10 with latest opesuse.

  • Anonymous
    Anonymous August 5, 2021 at 11:06 AM

    This Tutorial work like charm.
    I see that webrtc has 27 ms delay vs sip app (1ms)

    I found some one bug sync and may be script about sync doesn't work after that.
    (synchronizes audio between audio store and this server (asterisk folder).
    Is anybody have the same problem and how do you resolve it.
    I read some forum post that may be is because we change the port or something form 80 (like https use 443).
    Now I sync both directory manual :)

    • Unknown
      Unknown October 22, 2021 at 9:07 AM

      I'm having this issue too i can make a script to copy but rather just know how to fix this properly

  • asl las
    asl las September 23, 2021 at 5:41 PM

    my https://serverip:8089 wasn't open accessible , all mention step successful executed

    • Ajit Kumar
      Ajit Kumar September 25, 2021 at 9:57 PM

      Any firewall configured which is blocking port 8089
      in asterisk cli typ http show status

  • ashish
    ashish May 13, 2022 at 4:44 PM

    sir there are 4 lines missing in the sip.conf wich allows protcol
    #include this 4 lines in sip.conf in the beginning

    nano /etc/asterisk/sip.conf
    [general]
    transport=udp,ws,wss
    avpf=yes
    srvlookup=yes
    udpbindaddr=0.0.0.0:5060

  • Anonymous
    Anonymous October 7, 2023 at 5:26 PM

    cd ViciPhone
    cp -r Source /srv/www/htdocs/agc/viciphone
    chmod -R 755 /srv/www/htdocs/agc/viciphone

    When I run this it says cp: cannot stat 'source': No such directory

    • Ajit Kumar
      Ajit Kumar October 8, 2023 at 8:28 PM

      thanks its updated now, - it cp src

Add Comment
comment url