ApiRTC
BlogSupportSign UpConsole
  • ApiRTC Developer Portal
  • Status Page
  • What is ApiRTC?
    • Key Concepts
    • ApiRTC Architecture
    • Supported browsers
      • Vintage Browsers Compatibility
    • Billing
    • Product Roadmap and releases
  • Terms & Privacy Policies
    • 🍪Cookies
  • Get help & support
  • ApiRTC JS Library
    • QuickStart Guide
    • Where to find ApiRTC library?
    • Developers Guide
    • Video Communication LifeCycle
    • Demo App & Resources
    • Authentication
    • SDKs & Frameworks
      • ReactJS Libraries
        • Getting Started with ApiRTC React Hooks
        • ApiRTC React Hook Lib Reference
      • ReactNative library
      • Android SDK Reference
      • iOS SDK Reference
    • ApiRTC.js Reference
    • Changelog
  • REST APIs & Integration
    • Introduction
    • Apizee REST APIs
    • 3rd-party software integration
    • Webhooks
    • Rate Limits
    • Try it out
  • Other Resources
    • SDK License Agreement
    • ApiRTC Website
    • Blog
    • ApiRTC Community Github
Powered by GitBook
On this page
  • What is a 'hook' in ReactJS?
  • What can I do with the ApiRTC ReactJS hooks?
  • Setting up your development environment
  • Prerequisite
  • Create a ReactJS app boilerplate
  • Install ApiRTC libs
  • Add the video communication feature to the ReactJS app
  • Source Code
  • Read more
Edit on GitHub
  1. ApiRTC JS Library
  2. SDKs & Frameworks
  3. ReactJS Libraries

Getting Started with ApiRTC React Hooks

How to build a video chat app with ApiRTC ReactJS hooks

PreviousReactJS LibrariesNextReactNative library

Last updated 2 years ago

You were thinking ApiRTC.js was an easy thing to play with? Gain 10x development time by using the ApiRTC React Hooks Library, and integrate video communication in your app that reach enterprise-grade needs: stability, quality of service and integration into an existing ecosystem.

What is a 'hook' in ReactJS?

A hook is basically a module that makes state management of an object easier and well integrated within the ReactJS rendering lifecycle. Although High-Order Components and component.props can implement the same logic, it needs a lot more components and props to be managed.

Hooks simplifies the use of functional logic into your app.

You may know the useState() standard hook that enables to make a variable stateful and integrated into the ReactJS lifecycle.

What can I do with the ApiRTC ReactJS hooks?

ApiRTC ReactJS Hooks enables any developer to:

  • Grab the local devices streams, display the local video and publish them into a Conversation

  • Listen to the remote streams and display them onto a web page

  • Apply noise reduction on audio and blur or image in the background of the video stream

  • Manage groups of connected participants (presence management)

  • Apply moderation functions in the Conversation

  • Send & Receive chat messages

Setting up your development environment

Prerequisite

You need a Linux environment with the following installed:

  • NodeJS in its latest version

  • NPM in its latest version

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
nvm install node

Create a ReactJS app boilerplate

Create a new ReactJS-enabled web app by using create-react-app command:

npx create-react-app myApiRTCReactApp
cd myApiRTCReactApp

Install ApiRTC libs

Use NPM to install ApiRTC needed library:

npm install @apirtc/apirtc @apirtc/react-lib

Add the video communication feature to the ReactJS app

This app will simply connect to a Conversation named conversationName and will share the video streams across the participants thanks to 4 hooks:

  • useSession: connect to the ApiRTC service

  • useCameraStream: grab the local video stream coming from the camera

  • useConversation: join a Conversation and get the always-updated state of it

  • useConversationStreams: get an updated list of Streams flowing through the Conversation

Additionnaly, we will use the VideoStream component that makes video display easier.

Replace the /src/App.js file content by the following:


import { useSession, useConversation, useCameraStream, useConversationStreams, VideoStream } from '@apirtc/react-lib'
import './App.css';

function App() {

//Get a connection session to ApiRTC Video platform
const { session } = useSession({ apiKey: 'INSERT_YOUR_API_KEY_HERE' }); // Get an account on cloud.apirtc.com and retrieve your Api Key.

//Grab the local camera video and audio stream
const { stream: localStream } = useCameraStream(session);

// Get the conversation stateful object
const { conversation } = useConversation(session, 'conversationName', undefined, true);

// Get the list of streams exchanged in the conversation
const { publishedStreams, subscribedStreams } = useConversationStreams(conversation, localStream ? [{ stream: localStream }] : []);


  return (
    <div className="App">
      <header className="App-header">
        <div id="mememe-container">
        <h2>Local Streams</h2>
        { localStream && <VideoStream stream={localStream} muted={true}></VideoStream> }
        </div>
        <div id='remote-streams-container'>
          <h2>Remote Streams</h2>
          { 
            subscribedStreams.map( (stream, index) =>{
              return (<VideoStream stream={stream} muted={false} key={index}></VideoStream>)
            })
          }
        </div>
      </header>
    </div>
  );
}

export default App;

Source Code

Read more

Continue to explore ApiRTC:

  • Understand the ApiRTC Architecture

ApiRTC implements the video communication lifecycle into Hooks modules, gathered into one library available as the .

Create or join a

See the ApiRTC React library's for detailed information on available hooks and components.

The best way to get you machine set up is to for both nodeJS and NPM:

You are all set for building your first ReactJS-based video communication app, well done!

Replace INSERT_YOUR_API_KEY_HERE by your actual API Key. You can have one (free) on .

The source code of this getting started article is available on the dedicated repository, in the /react-hooks-basic folder.

Get to know the

Read the of the ApiRTC React Lib to get more details on what is possible

👏
@apirtc/react-lib package on NPM
README file
use the nvm installer
https://cloud.apirtc.com
GitHub
video communication lifecycle
README file
Conversation