Integration of apiRTC in Salesforce Lightning Web Components (LWC)

This sample demonstrate how to integrate apiRTC in a LWC and use it in your Salesforce environment.

This enables you to use WebRTC to communicate from your Salesforce organisation to a Web application by using apiRTC platform.

We demonstrate the possibility to :

• Join a conversation.
• Publish your stream : audio only, video only, audio and video, in this conversation.
• Share your screen in this conversation.
• Record the conversation and access to the associated media files

Other apiRTC feature can also be implemented based on this tutorial.

Our sample is based on the "Hello World" Lightning Web Component creation in a scratch orgs documentation that you can find here.

You can use this reference to understand how to start your Salesforce development environment until the "Create a Lightning Web Component" step.

Then you will then find here the different necessary steps to start and allow apiRTC to run in Salesforce and use our LWC code sample.

You will need to download apiRTC on our CDN (Use "Save as")

NOTE: Make sure to download this apiRTC version : apiRTC-with-sio as we did some adaptations to be able to run in Salesforce environment.

Then search for "static" in Salesforce to add apiRTC :

Load the apiRTC file as "apirtcsio" : this name is used in the source code for import :

import apiCC from "@salesforce/resourceUrl/apirtcsio";

We need to add three URLs in the configuration:

• *.apizee.com : for access to our dashboard
• https://ccs6.apizee.com for https access to our Call Control Server
• wss://ccs6.apizee.com for wss access to our Call Control Server

Search for "trusted" in salesforce and apply the following configuration :

Lightning Web security is required to enable a correct access to WebRTC features

Get the code with :

git clone https://github.com/ApiRTC/ApiRTC-LWC-Salesforce.git

Use our component source code in the force-app/main/default/lwc folder instead of "Create Lightning web components" step in documentation.

You can then continue with Salesforce documentation steps.

• Push Source to the Scratch Org
• Open the Scratch Org
• Add the Component to a Lightning Page

Our sample use our demo apiKey : myDemoApiKey

this.ua = new this.apiRTC.UserAgent({

    //==============================
    // TODO Change with your apiKey
    //==============================
    uri: 'apzkey:myDemoApiKey'
});

With this apiKey, you can use our conferencing tutorial for a first try.

Create your own count here

Some apiRTC feature are not available in Salesforce due to LWC restrictions. Check locker API viewer for more information.

• Background subtraction : blur, background image - applyVideoProcessor() is not available in LWC

Worker is not supported in LWC

• Audio filters : noiseReduction - ApplyAudioProcessor() is not available in LWC

Worklet / AudioWorklet / AudioWorkletNode are not supported in LWC

As you will see in our source code sample usage of loadScript() is mandatory to load library in LWC :

You can find informations about it on Platform Resource Loader and Use Third-Party JavaScript Libraries

loadScript(this, apiCC).then(() => {

    this.apiRTCisLoaded = true;
    this.apiRTC = window.apiRTC;
    console.debug('apiRTC version :', apiRTC.version);
    let apiRTCInfoElt = this.template.querySelector(".apiRTCInfo");
    apiRTCInfoElt.replaceWith('You are using apiRTC version : ' + apiRTC.version);
    this.apiRTC.setLogLevel(10);

}).catch(err => {
    console.error('Error when loading ApiRTC :', err)
});