Visualization (WebRTC)

This chapter describes the configuration of the visualization as a WebRTC participant. The integration of participants is further explained in the chapter SIP Participant.

Important Note: WebRTC only works via HTTPS and valid certificate. Otherwise, an audio connection will not be established.

Signal Station

A telephone on the visualization cannot be reached by ringing. Therefore, the call must be signaled separately via Messages or physical gong. After that, the user can establish an audio connection to the other party by making a call from the visualization.

To receive the signal, either a command can be sent directly via TCP/UDP- or HTTP interface from the other party if this is supported. Alternatively, an incoming call can be detected using the Asterisk AMI interface or with a dial plan Event. The latter variant is the easiest to implement.

Configuration

Unlike a Telephone, the address configuration of the visualization is automatically created by the server. Therefore, no SIP addresses need to be configured.

To use a telephone on the visualization, it is inserted into a Page using the plugin Library. If the telephone configuration is complete and the Asterisk PBX has been successfully started, the FAB (Floating Action Button) will be displayed at the bottom right of the visualization. This then allows the user to establish a connection.

The VoIP configuration of telephony is divided into two parts. The configuration of servers for the visualization is done in the Network Interface or in the Remote Access. All settings for the PBX are made in the Infrastructure under Network ▸ Telephony. The settings look similar, so care must be taken where the settings are made. Usually, the same settings are also used if the server is in the same network. Therefore, the settings from telephony are distributed to all network connections by default.

Use Worldwide

For the visualization to establish an audio connection worldwide, the WebRTC-UDP packets must reach the internal PBX. If you are in the same network or establish a connection via VPN, the packets go directly to the server and communication works. It looks different if the visualization is called from another network. Then the IP address of the server can no longer be reached. There are two solutions for this:

  • STUN Server: This resolves every NAT-IP and provides these addresses to the visualization. The latter then attempts to establish a connection to each of these IP addresses.
  • TURN Server: The audio connection is established directly via TURN. That means the communication is redirected to the TURN server.

All information about configuration can be found in the chapter STUN and TURN Servers.

Keyboard

Under the right tab in the Telephone configuration, a Keyboard for the visualization can be defined. Here is an example of a normal telephone keypad:

!1;!2;!3
!4;!5;!6
!7;!8;!9
[icon:material/emergency]:*;!0;!#

Or the use of a door opener:

[icon:material/door_open] [txt:Open]:*1234#

Each digit is separated by a semicolon per line. If content is left empty, the key is skipped accordingly. Each key can contain individual text. The text is simply written before the code using a colon. Placeholders [icon:] and [txt:] are also supported for translations. An exclamation mark before the text increases the font size of the keypad. If only the code is used, it will not be transmitted. If an empty line is inserted, a new table starts.

Important: Every code is displayed in plain text in the visualization and can be easily read out.

Valid characters are 0-9, A-D, * and #. A pause can also be inserted using a comma (,). For longer pauses, repeat the comma multiple times.

Troubleshooting

To check if an external connection can actually be established, it is recommended to use the console of the Chrome browser. This can be accessed via the URL chrome://webrtc-internals/.

Under the point ICE candidate grid, for example, the requirements of IP addresses can be displayed.

Known Issues

  • On older iOS devices, no connection can be established if the web application is used in full screen mode (PWA). As of 01.10.2019 (iOS13.1).
  • On some iOS devices, the volume may be very low. Double-tapping the microphone (voice switching) will then increase the volume.
  • No connection can be established without HTTPS as most browsers require a secure audio connection.