Forem: Romain Vailleux

Build a custom video chat with ReactJS and ApiRTC

Romain Vailleux — Wed, 04 Jan 2023 19:32:00 +0000

Build a custom video chat with ReactJS and ApiRTC from scratch in 15min.

This post is part of the ApiRTC Wildcard series on how to build video communication applications using ApiRTC’s real-time video and audio APIs.

ApiRTC’s Javascript library, apirtc.js, enables you to add video and audio communication capabilities to any web application.

In this article, you will go through the steps to use the apirtc.js library to build a real-time video chat ReactJS application.

Here is what the final app will look like:

Full source code of this ReactJs video conference bootstrap

You can find the source code of this tutorial on the ApiRTC GitHub space: https://github.com/ApiRTC/apirtc-react

If you’re curious about creating a video chat app but without ReactJS, you can read our How to build a simple web app with apirtc.js article.

Get yourself ready to build your first custom video chat with ReactJS and ApiRTC

ApiRTC Cloud account set up and ready

This tutorial requires you to have an active account on ApiRTC Cloud: Create an ApiRTC Cloud account.

Once you are connected, you can get your API key from your dashboard or in the Credential section.

NodeJS and NPM installed

We use NPM to install ReactJS and all the dependencies, which use NodeJS to run. You must have NodeJS and NPM installed on your machine in their latest LTS versions.

This tutorial uses Linux-based commands. Please tell us if you would like other OS to be documented as well.

Setting up the tutorial environment

Create a folder containing a ReactJS boilerplate using the `create-react-app`npm package

Type the npx command to temporarly download and run the create-react-app package to generate a ReactJS boilerplate application with just the minimum:

npx create-react-app my_apirtc_react_app
cd my_apirtc_react_app

You sould get something like below:

Add the apirtc.js video and audio library module to the ReactJS app

Run the following command in your project folder:

npm install @apirtc/apirtc

You should obtain something similar to the following in your package.json file

Package.json should contain a reference to the apirtc library.

If you run a npm start command, you should obtain the following:

Your ReactJS application is started!

You are now ready to start implementing your first video communication app using ReactJS and ApiRTC library.

Create the Conversation component

ReactJS manages the rendering life cycle of the application by using Component. We create the Conversation component responsible for

recording and managing the state of the video conversation
rendering the HTML markup that will contain the display of local and remote video streams.

cd src
mkdir Components
cd Components
touch ConversationComponent.jsx

Make the component render HTML

In the ConversationComponent.jsx file insert the following:

import { UserAgent } from '@apirtc/apirtc';
import React, { useState, useRef } from 'react';

export default function ConversationComponent() 
  return (
    <div>
        <h2>Remote videos</h2>
        <div id="remote-container">
          {/* <!-- This is where the remote video streams will be added --> */}
        </div>
        <div id="local-container">
          <h2>Local video</h2>
          <p><span id="local-stream-id"></span></p>
          {/* <!-- This is where we are going to display our local video stream --> */}
          <video id="local-video-stream" autoPlay muted></video>
        </div>
      </div>
    </div>)
}

Remove everything inside of the <header> markup of the App.js file and replace it by a <ConversationComponent> markup and add the import at the top of the file.

It should now look like this:

import ConversationComponent from "./Components/ConversationComponent"

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ConversationComponent></ConversationComponent>
      </header>
    </div>
  );
}

export default App;

Start the app with the npm start command and navigate to http://localhost:3000/.

Hooray, you’ve got your app layout!

You might have some warning prompted while starting the app: no worries, delete logo.svg import and all will be fine.

Add video communication capability to the ReactJS app

ConversationComponent will implement the logic described as followed (click to get a detailed view):

Add the basic video communication workflow

Declare a startConversation() method in the ConversationComponent function, which will handle the whole connection process.

Be mindful to replace #YOUR_OWN_API_KEY# with your own API key to be found at https://cloud.apirtc.com/enterprise/api

const conversationRef = useRef(null);
const [conversationName, setConversationName] = useState("")

 var startConversation = function () {
    var localStream = null;

    /**
     * Get your free account on https://cloud.apirtc.com/ 
     * and replace the value below with your own apikey value 
     * to be found at https://cloud.apirtc.com/enterprise/api
     */

    var apikey = "#YOUR_OWN_API_KEY#"

    //Configure the User Agent using the apikey.
    var ua = new UserAgent({
      uri: 'apiKey:' + apikey
    })

    //Connect the UserAgent and get a session
    ua.register().then((session) => {

      var conversationName = "CONVERSATION_NAME"

      const conversation = session.getOrCreateConversation(conversationName, { meshOnlyEnabled: true })

      setConversationName(conversation.getName())

      conversationRef.current = conversation

      //Instantiate a local video stream object
      ua.createStream({
        constraints: {
          audio: true,
          video: true
        }
      })
        .then((stream) => {

          // Save local stream in a variable accessible to eventhandlers
          localStream = stream;

          //Display the local video stream
          stream.attachToElement(document.getElementById('local-video-stream'));
          document.getElementById('local-stream-id').innerHTML = ua.getUsername()

          //Join the conversation
          conversation.join()
            .then((response) => {

              //Publish the local stream to the conversation
              conversation
                .publish(localStream)
                .then((stream) => {
                  console.log("Your local stream is published in the conversation", stream);
                })
                .catch((err) => {
                  console.error("publish error", err);
                });
            }).catch((err) => {
              console.error('Conversation join error', err);
            });

        }).catch((err) => {
          console.error('create stream error', err);
        });
    });
  }

For testing purposes, we are going to call the startConversation method when we click on the “Start the Conversation” button. Add the following button markup rendered by the ConversationComponent:

<div>
   <button id="startConversation" onClick={startConversation}>Start Conversation</button>
</div>
<div>
   <p>Conversation Name: <span id="conversationNameLabel">{conversationName}</span></p> 
</div>

npm start in your project folder and navigate to the http://localhost:3000 address.

Clap your hands if you see yourself 👏

Add participants’ remote video streams to your application

We are halfway to finalizing our app! Keep up the good work buddy ! 👍

Here is the logic to manage the remote video streams:

Each time a new stream is detected 👉 subscribe to every event thrown by this stream
Each time a new stream is added to the conversation 👉 add the video stream to the interface
Each time a new stream is removed from the conversation 👉 remove the video stream from the interface

We are going to use Conversation.streamListChanged, Conversation.streamAdded and Conversation.streamRemoved events to trigger these actions.

Insert event handlers

Declare event handler functions as variables of the ConversationComponent function:

//streamListchanged: subscribe to new remote streams published in the conversation and get future events triggered by this stream
  var onStreamListChangedHandler = function (streamInfo) {
    if (streamInfo.listEventType === 'added' && streamInfo.isRemote) {

      if (conversationRef.current)
        conversationRef.current.subscribeToStream(streamInfo.streamId)
          .then((stream) => {
            console.log('subscribeToStream success', streamInfo);
          }).catch((err) => {
            console.error('subscribeToStream error', err);
          });
    }
  }

  //streamAdded: Display the newly added stream
  var onStreamAddedHandler = function (stream) {
    if (stream.isRemote) {
      stream.addInDiv('remote-container', 'remote-media-' + stream.streamId, {}, false);
    }
  }

  //streamRemoved: Remove the participant's display from the UI
  var onStreamRemovedHandler = function (stream) {
    if (stream.isRemote) {
      stream.removeFromDiv('remote-container', 'remote-media-' + stream.streamId)
    }
  }

Declare video streams listeners

And then, declare the listeners just before the ua.createStream method call in the startConversation function:

conversation.on("streamListChanged", onStreamListChangedHandler)
conversation.on("streamAdded", onStreamAddedHandler)
conversation.on("streamRemoved", onStreamRemovedHandler)

Open 2 tabs with the app running, you should see yourself twice!

Turn off your sound output or microphone as it creates feedback and a shrieking sound.

If you see yourself twice, you’re on a good way!

To sum up here is what ConversationComponent.jsx should look like at this step:

import { UserAgent } from '@apirtc/apirtc';
import React, { useState, useRef } from 'react';

export default function ConversationComponent() {

  const conversationRef = useRef(null);
  const [conversationName, setConversationName] = useState("")

  //streamListchanged: subscribe to new remote stream published in the conversation and get future events triggered by this stream
  const onStreamListChangedHandler = function (streamInfo) {
    if (streamInfo.listEventType === 'added' && streamInfo.isRemote) {

      if (conversationRef.current)
        conversationRef.current.subscribeToStream(streamInfo.streamId)
          .then((stream) => {
            console.log('subscribeToStream success', streamInfo);
          }).catch((err) => {
            console.error('subscribeToStream error', err);
          });
    }
  }

  //streamAdded: Display the newly added stream
  const onStreamAddedHandler = function (stream) {
    if (stream.isRemote) {
      stream.addInDiv('remote-container', 'remote-media-' + stream.streamId, {}, false);
    }
  }

  //streamRemoved: Remove the participant's display from the UI
  const onStreamRemovedHandler = function (stream) {
    if (stream.isRemote) {
      stream.removeFromDiv('remote-container', 'remote-media-' + stream.streamId)
    }
  }

  const startConversation = function () {
    var localStream = null;

    /**
     * Get your free account on https://cloud.apirtc.com/ 
     * and replace the value below with your own apikey value 
     * to be found at https://cloud.apirtc.com/enterprise/api
     */

    const apikey = "INSERT_YOUR_OWN_APIKEY_HERE" //"#YOUR_OWN_API_KEY#"

    //Configure the User Agent using the apikey.
    const ua = new UserAgent({
      uri: 'apiKey:' + apikey
    })

    //Connect the UserAgent and get a session
    ua.register().then((session) => {

      const conversationName = "CONVERSATION_NAME"

      const conversation = session.getOrCreateConversation(conversationName, { meshOnlyEnabled: true })

      setConversationName(conversation.getName())

      conversationRef.current = conversation

      conversation.on("streamListChanged", onStreamListChangedHandler)
      conversation.on("streamAdded", onStreamAddedHandler)
      conversation.on("streamRemoved", onStreamRemovedHandler)

      //Instantiate a local video stream object
      ua.createStream({
        constraints: {
          audio: true,
          video: true
        }
      })
        .then((stream) => {

          // Save local stream in a constiable accessible to eventhandlers
          localStream = stream;

          //Display the local video stream
          stream.attachToElement(document.getElementById('local-video-stream'));
          document.getElementById('local-stream-id').innerHTML = ua.getUsername()

          //Join the conversation
          conversation.join()
            .then((response) => {

              conversation
                .publish(localStream)
                .then((stream) => {
                  console.log("Your local stream is published in the conversation", stream);
                })
                .catch((err) => {
                  console.error("publish error", err);
                });
            }).catch((err) => {
              console.error('Conversation join error', err);
            });

        }).catch((err) => {
          console.error('create stream error', err);
        });
    });
  }

  return (
    <div>
      <div>
         <button id="startConversation" onClick={startConversation}>Start Conversation</button>
      </div>
      <div>
        <p>Conversation Name: <span id="conversationNameLabel">{conversationName}</span></p>
      </div>
      <div>
        <h2>Remote videos</h2>
        <div id="remote-container">
          {/* <!-- This is where the remote video streams will be added --> */}
        </div>
        <div id="local-container">
          <h2>Local video</h2>
          <p><span id="local-stream-id"></span></p>
          {/* <!-- This is where we are going to display our local video stream --> */}
          <video id="local-video-stream" autoPlay muted></video>
        </div>
      </div>
    </div>)
}

Great folks, you finised to build a custom video chat with ReactJS and ApiRTC!

Good work, you can give yourself a treat!

Going further

Go deeper into ApiRTC with the Developer Portal
Discover what you can do with the video and audio ApiRTC APIs by checking the code examples on GitHub.

The post Build a custom video chat with ReactJS and ApiRTC appeared first on Apirtc.

Security Update – ApiRTC 5.0.0 gains in robustness & safety

Romain Vailleux — Tue, 13 Dec 2022 16:18:58 +0000

ApiRTC v5.0 is now available, bringing significant security improvements to real-time communication.

While we typically maintain support for older versions of our library, we had to make some impactful changes to our infrastructure that will make previous versions of ApiRTC unsupported in a near future.
We encourage users of older versions to upgrade to v5.0 as soon as possible to take advantage of these security enhancements.

What does the 5.0 version bring?

Ultra-secured connection with an end-to-end authentication

ApiRTC v5.0 introduces several key security improvements to help protect against fraudulent use of the library’s APIs. One of the most significant changes is the implementation of end-to-end authentication, which ensures that only authorized users can access the APIs. This is accomplished through the use of unique keys and other security measures that prevent unauthorized access.

Cross-security check with domain verification

Another important security improvement in ApiRTC v5.0 is the addition of cross-security checks with domain verification. This helps to ensure that only legitimate users and applications are able to access the APIs, and can help to prevent fraudulent use of the library. For example, if an unauthorized user attempts to access the APIs from an untrusted domain, the system will alert the API key owner and block access to the APIs.

Alert and block fraudulent use of APIs

Finally, ApiRTC v5.0 includes alerts and blocking mechanisms to help prevent fraudulent use of the APIs. If the system detects any suspicious or unauthorized activity, it will immediately alert the user and take steps to block access to the APIs. This can help to protect against a wide range of security threats, including malware, hacking, and other forms of cybercrime. Overall, these security enhancements make ApiRTC v5.0 a more secure and reliable choice for real-time communication.

A fully backward compatible version

The ApiRTC 5.0.0 version is fully compatible with the previous version. No API/public method signature has been removed or modified from the 4.7.7.

What should I do?

Check the current version of ApiRTC used in your web app

Go on your web app
Display the “developer tools” (see here how to display the developer tools in your browser)
Type below command in the “console” tab prompt:

> apiCC.version

The result will show the ApiRTC version. If the version is 4.7.8 or below, your should upgrade to version 5.0.0 minimum.
Note that using https://cdn.apizee.com/apiRTC/apiRTC-latest.min.js will make sure your ApiRTC library is always up-to-date.

Check the compatibility of your usage of the ApiRTC library with newer versions

Depending on the version you are using, the migration to newer version might require some adaption of your code to remain fully functional. note that it might be an opportunity to take advantage of more efficient implementation as well.
Check the ApiRTC changelog to evaluate wether your code requires to be updated or not.

Update your library version to 5.0.0

Vanilla JS implementation

In your HTML code, insert the ApiRTC library like this:

<script type="text/javascript" src="https://cloud.apirtc.com/apiRTC/apiRTC-latest.min.js"></script>;

Node-based framework (ReactJS, VueJS, Angular, …)

For all node-based framework, do as following:
Update the @apirtc/apirtc of your node-based application.

> npm install @apirtc/apirtc:^5.0.0

And that’s it, you are safe to go on building awesome real-time communication app based on ApiRTC!

The post Security Update – ApiRTC 5.0.0 gains in robustness & safety appeared first on Apirtc.

FOSDEM 2023 - Devroom Real-Time Communication CfP

Romain Vailleux — Tue, 13 Dec 2022 10:49:46 +0000

The Real-Time Communication devroom has opened its call for paper up until December 14th 👉 Propose your talk here

Use Video APIs to build business-specific apps – WebRTC

Romain Vailleux — Wed, 07 Dec 2022 09:09:45 +0000

Need some video conferencing in your application, service or application? Real-time video communications are now well adopted by the users ; most of customers have been exposed at least once to some video conferencing experience. Video APIs are made for business-specific needs.

One-to-one meetings, group video chat, live streaming, webinars: Video APIs providers empower developers to insert video conference into business-specific scenarios.

Compose simply your customized business-specific user experience with Video APIs
Key features of Video APIs platforms for enterprise-grade real-time communication apps
How do you get billed when using a video API?
Examples of WebRTC-based video applications
Build better video communciation application with ApiRTC’s video APIs
What to read next?

Compose simply your customized business-specific user experience with Video APIs

As the out-of-the-box video conferencing solutions are good for simple collaboration cases, your business requires high cutomization of the experience:

look and feel & branding
scenario of use and application workflow
advanced features (machine-learning, realtime data exchange,…)
business-specific integrations
data privacy & user consent

Video APIs are headless applications that allow developers to build a tailored customer experience on top of enterprise-grade video conferencing resources.

Key features of Video APIs platforms for enterprise-grade real-time communication apps

Video APIs providers take care of the infrastructure required for video conferencing. They usually offer the following features:

Signaling and connection: making sure users will find each others and enable to stream up their video and audio
Video streaming infrastructure: manage the rooms where the real-time video conversations happens, and optimize the routing of video and audio streams across participants (simulcast, multistream,…)
Bandwith optimisation: depending on the network capacity of each participant, it adapts the quality of video and audio streams.
Development tools: libraries and SDKs, documentation, tutorial, developer portal, …

Additional features are also often joined to the sole Video APIs:

User management, organisation management & permissions: enable role-based authorizations, user directory, group and sub-group of users
Presence signaling and inbound call management: trigger a call toward a user,
Stream capture: download a snapshot or a playback of the video conference
Stream processing: background transformation (blur, virtual background), noise cancellation, interactive incrustation
Interaction tools: group messages, whiteboard, pointers, screen sharing, remote control, remote snapshot
Scheduling and Call distribution: manage the event calendar and invitations, automatic call distribution
Additional channels: SMS, email, SIP call, …
QoS & Administration console: enterprise-wide monitoring of video conferences’ quality, user management
Web hooks & connectors: 3rd-parties add-ons for seamless integration with an existing ecosystem

The additional features are key to implement your business-specific video conferencing app.

Criterias to determine the right Video API provider to implement your business case

Here are some key criterias you need to keep an eye on to choose the video APIs provider that fits to your need:

Enhancement and signal processing features: noise cancellation, blur, … all you need out of the box for providing a smooth video conferencing experience to your users.
Cross-browser compatibility:even if WebRTC is a widely adopted standard for video calls, the browsers (Firefow, Chrome, Safari, Edge,…) implement it with some degree of freedom. A comprehensive Video API library offered by the provider would take care of the differences and make the life easier for the developers.
Usage unit count: the video API service will be billed depending of the usage.
Service Level Agreement / QoS engagements: make sure the provider you choose offer an engagement on the quality of service of the video API.
Analytics and dashboarding: when it will come to production, you will be happy to get a hand on the streams’ quality and overall video conferencing activity.
User and permission management: depending on your usecase, you might need to enforce user authentication to enable a seggregated access to functionnalities like access restriction, moderation features, room management and more.
Privacy settings: wether for sensitive data like health (HIPAA, EHDS) or defense or for managing user data life cycle (GDPR), take a look to the data privacy policies of the provider.

Due diligence on the criterias above will make your choice easier across difference video APIs providers.

How do you get billed when using a video API?

Although pay-per-use is widely spread among the Video API providers, the way the usage is mesured may be different.

Units used can be:

Minutes: number of minutes for an active communication session, whatever the number of participants in the video conferencing room. A 5min video group meeting of 3 participants will lead to a 5min bill.
Minute.participant: each minute a participant is counted. A 5min video group meeting of 3 participants will lead to a 15min.participant bill.
Megabytes bandwith: priced depending on the quality of the video/audio stream of each participants. A 5min video group meeting of 3 participants in a medium resolution (540p) will lead to a ~ 70Mb upstream + 200Mb downstream bill.

Examples of WebRTC-based video applications

Here are a list of examples of what can be done better with video enabled relationship:

Telehealth: physicians and psychologists provides remote consultancy to patients. Any one can access the best clinical expertise through video-health independently from their location.
Remote assistance: an engineer on site is guided by an expert remotely. No more need to travel to resolve the hardest cases, your support is extended worldwide by video calls and gain in reactivity.
Remote sales: improve your sales impact by opening a video conversation and interact with your prospects. Sales teams go quicker to go over the the sales process’ steps and close their deal more easily.
Webinars and live streaming: broadcast yourself to large audience and enable interaction with the watchers.
Video integration to your business tools: insert video into your business management tools to enhance the collaboration of your employees and embrace remote-enabled workplace.

Build better video communciation application with ApiRTC’s video APIs

ApiRTC is a CPaaS platform that offers composable real-time communication APIs to build tailored usecases upon an enterprise-grade infracture.

The ApiRTC platform includes features to manage the full lifecycle of video calls making developers life easier when creating a new application.

ApiRTC is extendable to 3rd party solutions:

business-oriented solutions like Salesforce, Genesys or other ERP to harvest the power of video directly into your business prefered applications.
video-audio-focused solutions to analyze, transform or enhance the communication streams (machine-learning, analytics, filters, triggers).