anynode WebRTC - Node and Client

1 Introduction

WebRTC (Web Real-Time Communication) is an open-source technology which provides real-time communication for web browsers and mobile Applications via APIs. In anynode it is possible to use WebRTC for audio and video communication without the need for a user to download a native app or a plugin.

This TechNote explains how to configure an WebRTC Node and also a Webserver with a Webclient which is based on the anynode WebRTC Client API.

The anynode WebRTC Client API can also be found in our TechNote area in our TE-SYSTEMS Community. It describes how to use the JavaScript Classes which we offer. We also provide the anynode WebRTC TechNote, which describes the communication between anynode and a WebRTC Client. This can be useful to develop your own WebRTC Client using anynode.

An anynode installation with version 4.10 or higher is needed to use WebRTC in anynode.

2 Configure a new WebRTC Node

Go into the anynode frontend and create a new node.

Under Environment choose Create a WebRTC node.

Choose a Network controller or interface that should be used for the WebRTC Connection.

Choose either if you want to upload your own certificate or if a Let's Encrypt Certificate should be used.

For ordering or using an existing certificate from a certification issuance service choose Order a certificate from a certification issuance service and follow the steps in the section 2.2 (Order a certificate from a certification issuance service (Let's Encrypt)) chapter.

If you already have a certificate, choose Upload the certificate for this node.

To provide your own certificate you can find more information in section 2.1

In the Authentication step either choose an existing directory or create a new Static User Directory. To get more information about configuring a Database Connected Directory for WebRTC, go into the chapter section 5

In the Number assignment are options how numbers are assigned and how to handle with multiple registrations for the existing user.

Web client numbers are assigned:

• from the web client: the web client determines which dial string is assigned to it

• from the web client and are validated against the configured directory: the web client determines which dial string is assigned to it, but it must be same as the one in the directory

• from the directory using: anynode determines the dial string which is assigned to the client using the directory

When a client tries to register a already registered phone number:

• replace the existing configuration: this is used to overwrite an existing registration

• keep the existing registration: this is used keep the first active registration for a phone number

• allow multiple registrations with the same number: this is used to register multiple endpoints with the same dial string

In the connection options, only the TLS Port is adjustable due to the fact, that WebRTC should be only used over TLS. The standard port 384 can be changed by opening the lock.

If a routing domain already exists, it is possible to adjust in which rounting domains the WebRTC Node should be an active Source Node.

Choose a fitting name and Finish the Assistant

2.1 Provide an existing certificate and key

In the Certificate & private key step click on Configure...

Choose the way, how you want to import the certificate, this instruction only includes Import of the certificate and private key.

First choose your Private Key File and then your Certificate File. After that, Finish the import assistant

The certificate file already includes the chain. Don't use the certificate file which has only the chain.

2.2 Order a certificate from a certification issuance service (Let's Encrypt)

This TechNote only covers Let's Encrypt as a certification issuance service

If this is the first use of Let's Encrypt in this anynode Installation and a account wasn't configured yet, anynode will ask to accept the terms of service and put in an E-Mail address, which is linked to the Let's Encrypt certificates.

In the next step anynode asks which common name should be used.

For the HTTP Challenge an Interface and IP Address needs to be chosen where the requests to the common name chosen before go to.

If Let's Encrypt is already configured with an account, it is possible to order a new certificate by choosing the new common name.

With a new common name, you need to either select the existing web server connector, if the new common name forwards to the same IP Address as the other one. If not, you need to create a new web server connector with the right IP Address.

---

If Let's encrypt is already configured with an existing certificate, it is possible to choose Use an existing certificate and then choose one of the existing certificates

Let's encrypt has rate limits for new certificate orders. Try to use an existing certificate over creating a new one on the same registered domain, to avoid running into the limits. More information on Let's Encrypt - Rate Limits

3 Modify existing WebRTC Node

Number assignment

It is possible to change the assignment settings in the WebRTC Node in the WebRTC Server Object under Settings.

By standard the Number assignment directory is the same as the Authentication directory.

Authentication directory

To change the Authentication directory, navigate in the WebRTC Node to the Websocket Object.

Under Settings it is possible to change the Authentication directory.

TLS Listen port

To change the TLS Port, navigate in the WebRTC Node to the Websocket Object.

Under Settings it is possible to change the TLS Port.

4 Configure Notification messaging with Firebase

For background notification of WebRTC clients, anynode uses Google Firebase Cloud Messaging to wakeup a device in sleep mode or restore a web page. This document describes how to create a Firebase project and get the required parameter to be entered in the anynode configuration.

4.1 Create Firebase Project

To create a Firebase project a google account is required to login to the Firebase Console.

On the start page click Add Project and on the follwing page enter a name for the project and click Continue.

On the following page keep defaults for Google Analytics and click Continue.

On the Configure Google Analytics page select the account for Google Analytics. Then click Create Project.

It will take some time to create the project. When finished click Continue.

4.2 Add Firebase to Application

Next step is to add firebase to your app. Apps for different platforms can be added.

• iOS

• Android

• Web

• Unity

• Flutter

The following description focuses on a web app. On the Project Overview page click on the </> symbol to create a web app.

Enter a name for the app and click the Register app button.

On the following page the details to register the JavaScript based web app with firebase are displayed. This information can be retrieved later from the cloud settings. Click the Continue to Console button at the bottom of the page to continue to the project overview.

4.3 Enable Cloud Messaging API

In the project overview click on the settings symbol and from the popup menu select Project settings.

On the Project settings page select the Cloud Messaging tab. Click on the symbol at the right side of Cloud Messaging API (Legacy) and select Manage API in Google Cloud Console.

On the new page or tab that is displayed select the Enable button.

Wait until the page finished enabling and then close this page and refresh the previous page.

The Cloud Messaging API (Legacy) is now shown as enabled and the server key is shown. The server key is a token required by anynode to authenticate when sending notifications.

4.4 anynode Configuration

There are two types of configuration for WebRTC client notification.

• The server configuration to allow anynode to send notifications

• The client configuration to be used by the client to register for notifications

4.4.1 Server Configuration

In order to send notifications to WebRTC clients anynode must have the credentials to access the Firebase Cloud Messaging Services. Go to the Project settings page and select the Cloud messaging tab. Copy the Server Key marked in the image below and copy it to the clipboard.

In anynode Frontend select the WebRTC Server and copy the server key to the field Notification server token.

4.4.2 Client Configuration

The WebRTC client needs configuration data to register with Firebase. This configuration data can be configured in anynode and provided to the WebRTC client during login. To retrieve the Firebase configuration data go to the Project settings and select the General tab. Scroll down to Your apps. From the JavaScript code copy the data selected in the image below to the clipboard.

In anynode Frontend select the WebRTC Server and copy the client configuration to the field Notification client configuration.

5 Configure Database Connected Directory for WebRTC

Create a new database connected directory by going to Directories and cliking on Add Directory.... In the directory assistant choose Create a new database connected directory.

Type in all the needed information. By leaving the port empty, the default port of the database will be used. It is possible to test the connection by using the Test connection button.

If the WebRTC client number assignment is configured to take the dial string out of a directory, it is mandatory to configure it in the WebRTC dial strings step.

To use the directory for the WebRTC Authentication it is needed to configure the query, the name of the username column and the password column.

Define a recognizable name for the Directory and click Finish.

Now it is possible to select the directory while configuring a new node. If the node already exists take a look at the section 3 chapter.

6 Configure HTTP Server with WebRTC Webpage

Preparations

To use anynode as a Webserver to test the WebRTC Client, navigate to the Auxillary Obejcts ▷ HTTP Servers and click Add HTTP Server

Deactivate TCP under Connection flags in the HTTP Servers Settings and set Serve static resources to Enabled

Importing the Client Files

Click Browse/edit static resources... to get the Static resources window.

Click Choose Files to open the File Explorer of your system

Locate the .zip file with javascript client in it. Open it!

When the file is opened, anynode will ask if it should extract the .zip file. Click Yes to extract it.

anynode will present the extracted files and directories. Click Ok to finish the Static resources

If anynode detects missing MIME types click yes so it can add them automatically

anynode will show the added MIME types under MIME types

Configure Network Controller and Network Security Profile

Choose your desired IP Adress or interface.

Own Certificate

If you want to provide your own certificate, follow the steps of the section 2.1 chapter.

Let's Encrypt

If you want to use an existing Let's Encrypt Certificate in anynode navigate into the Network Security Profile Object and unlock Digital Identity. Then choose your existing Certificate Issuance.

If you want to create a new Let's encrypt certificate, click on the + icon right next to the Certificate Issuance drop down menu and follow the steps of the section 2.2 chapter.

The client should now be reachable with https://yourhostname/index.html

6.1 Login

Go onto your WebRTC Client and put in the configured User Data. Depending on the configuration if the Phone number is determined by the user or the directory you may put in the Optional Phone Number. More information about this can be found in the section 3 (Modify existing WebRTC Node) chapter.

If you configured Notification messaging with Firebase section 4 you can activate the option for Background notification