Application Calls Javascript App

The Application Calls Showcase App demonstrates the use of the Infobip RTC Javascript SDK. It highlights features like:

• making an application call that gets connected to a dialog,
• making an application call that gets connected to a conference,
• utilizing the camera video and screen sharing capabilities,
• managing the audio quality and the input audio device, and more.

For developers seeking seamless integration, code samples are readily available in Angular, jQuery, and React.

1. (Prerequisite) Running the Token App

The prerequisite to running any Showcase Apps is running the Token App, available in both Node.js and Java.

Token App - Node.js: Guidance

Create config.json file in the ./token/node project directory, and fill it with data:

{  
  "HTTP_PORT": 8080,
  "INFOBIP_API_HOST": "api.infobip.com",
  "INFOBIP_RTC_TOKEN_PATH": "/webrtc/1/token",
  "INFOBIP_API_KEY": "YOUR_API_KEY"
}

Then in the ./token/node project directory:

• install needed dependencies by running:

npm install

• start the application by running:

npm start

Token App - Java: Guidance

Export the INFOBIP_API_KEY environment variable and set it to your Infobip API key.

In the ./token/java project directory, start the application by running:

mvn spring-boot:run

2. (Prerequisite) Running the Calls API Showcase App

Running the Calls API Showcase App is essential for enabling the full functionality of the Application Calls Showcase App.

Calls API Showcase App - Node.js: Guidance

Ensure that you have Node.js installed on your computer.

Before running the Calls API Showcase App, create a config.json file in the ./calls-api-showcase/node directory and populate it with the following data:

{
  "HTTP_PORT": 8090,
  "INFOBIP_API_HOST": "api.infobip.com",
  "INFOBIP_API_KEY": "YOUR_API_KEY"
}

To enable a phone call scenario while running the application, provide the additional argument --phone-number={phone-number} in the command line. Replace {phone-number} with the specific phone number to which you want the call to be made.

In the project directory ./calls-api-showcase/node:

• install the required dependencies by running:

npm install

• start the application by running:

npm run start -- --phone-number={phone-number}

Calls API Showcase App - Java: Guidance

Ensure that you have a version of Java 17 installed on your system.

Before running the Calls API Showcase app, configure the application.yml file in the ./calls-api-showcase/java/src/main/resources directory as follows:

server.port: ${HTTP_PORT:8090}
infobip:
  api-host: ${INFOBIP_API_HOST:api.infobip.com}
  api-key: ${INFOBIP_API_KEY:YOUR_API_KEY}
phone-number: ${PHONE_NUMBER:YOUR_PHONE_NUMBER}

In order to run the Java Calls API Showcase app, navigate to ./calls-api-showcase/java and issue the following command:

mvn spring-boot:run

After successfully running the app, access it by opening a localhost URL in your web browser: http://localhost:8090.

3. (Prerequisite) Exposing the Calls API Showcase App to the public Internet

To configure the Calls Application with a Webhook URL as explained in the next step, the Calls API Showcase App should be exposed to the public Internet. A convenient way to achieve this is through ngrok. Run the following command in your terminal to obtain a public URL:

ngrok http 8090

4. (Prerequisite) Creating and configuring the Calls API configuration

Actions made on calls, conferences and dialogs using the Calls API trigger one or several events. These events are sent to your exposed webhook. A definition of a webhook exposed by your application to receive these events is included in a corresponding subscription.

For more information on creating a new API configuration and setting up subscriptions, please refer to the Calls documentation. Note that the minimal set of required events to subscribe to, ensuring the Calls API Showcase App functions as expected, includes the following events: CALL_RECEIVED, CALL_ESTABLISHED, CALL_FINISHED, CALL_FAILED, and SAY_FINISHED.

As mentioned, when creating a subscription you will be asked to define a notification profile and its corresponding webhook URL. If you have chosen to use ngrok as previously described, your webhook URL will follow this format: https://${your-ngrok-id}.ngrok-free.app/event. Ensure that you replace ${your-ngrok-id} with the unique ID obtained via ngrok http 8090.

5. Running the Showcase App

Before running the Showcase App, create a config.json file in the following directory for your chosen framework:

• Angular: ./js/application-calls/angular/src/assets
• React: ./js/application-calls/react/src
• jQuery: ./js/application-calls/jquery/public/config

and populate it with the previously obtained callsConfigurationId:

{
  "INFOBIP_CALLS_CONFIGURATION_ID": "YOUR_CALLS_CONFIGURATION_ID"
}

Ensure that Node.js is installed on your computer.

In the corresponding project directory:

• install needed dependencies by running:

npm install

• start the application by running:

npm start

Once the application is successfully running, access it by opening a localhost URL in your web browser. This URL will show the application's user interface and functionality.

jQuery	React	Angular
http://localhost:8040	http://localhost:8050	http://localhost:8060