DOCSEARCHbyAlgolia
Submit Docs

twilio-video-app-react

repository·master·Indexed 23 days ago

https://github.com/twilio/twilio-video-app-react

A reference React application (v0.11.7) demonstrating multi-party video calling and chat capabilities using Twilio's Programmable Video and Conversations JS SDKs. It features implementations for noise cancellation via Krisp, real-time transcriptions, and a token server for access management. The app utilizes React Context via VideoProvider, ChatProvider, and ParticipantProvider to manage state and participant views.

Tokens
7.7K
Snippets
24
Records
47
Agent score
83%

What's inside twilio-video-app-react

  1. Use VideoProvider and ChatProvider via Context Hooks

    master

    The application uses React Context to provide video and chat functionality throughout the component tree:

    • VideoProvider: Manages connecting to video rooms and acquiring local input devices. Access its methods and properties using the useVideoContext hook.
    • ChatProvider: Manages connecting to Twilio Conversations. Access its methods and properties using the useChatContext hook.

  2. Configure Track Priority for optimal video quality

    master

    The application dynamically manages video track priority to optimize bandwidth. Tracks displayed in the main video area are set to 'high' priority to enable high-resolution rendering. When a component unmounts, the priority is reset to null (returning it to its default publish priority).

    This is implemented using the track.setPriority() method.

  3. How the application manages state using the Twilio Room object

    master

    The application's state is primarily managed by the Twilio Video SDK room object rather than external state management tools like Redux. The room object acts as the single source of truth and is an EventEmitter.

    To interact with the room in development, the application exposes it globally as window.twilioRoom in the browser console.

    To react to changes in the room (like a dominant speaker changing), use React hooks to subscribe to and unsubscribe from room events. This ensures components re-render only when relevant state changes occur.

    import { useEffect, useState } from 'react';

export default function useDominantSpeaker(room) {
  const [dominantSpeaker, setDominantSpeaker] = useState(room.dominantSpeaker);

  useEffect(() => {
    room.on('dominantSpeakerChanged', setDominantSpeaker);
    return () => {
      room.off('dominantSpeakerChanged', setDominantSpeaker);
    };
  }, [room]);

  return dominantSpeaker;
}

  4. Run the application locally

    master

    To start the application in development mode, which includes running the local token server and the React app, use:

    npm start

    The app will be available at http://localhost:3000. Changes to src/ will trigger a reload.

    To run only the token server (which runs on port 8081), use:

    npm run server

    The token server expects a POST request at /token with the following JSON body:

    {
  "user_identity": "string",
  "room_name": "string"
}

  5. Deploy the app to Twilio Serverless

    master

    Deploy the React application and the token server function to Twilio Serverless with a single command.

    Warning: The default token server uses a passcode for access. This is intended for testing/getting started and is not secure for production. For production, use an authentication provider to issue access tokens.

    npm run deploy:twilio-cli

    Deployment Details:

    • Builds the React app from the src directory.
    • Generates a random passcode for app access.
    • Deploys the app and token server as a Twilio Serverless service.
    • Outputs the App URL and the passcode.

    Important Notes:

    • Passcode Expiration: The passcode expires after one week. To generate a new one, redeploy using: npm run deploy:twilio-cli -- --override.
    • Node.js Version: Twilio Functions require Node.js v20 or v22. If you previously deployed using Node.js v18, you must update the Function entry in the Twilio Console (Functions & Assets -> Services) to Node v22 or redeploy.

  7. Set up the Twilio CLI and RTC Plugin

    master

    Deployment and management of the app require the Twilio CLI and the RTC plugin. Follow these steps:

    1. Install Twilio CLI via npm:
      npm install -g twilio-cli
    2. Login to Twilio CLI (requires your Account SID and Auth Token from the Twilio Console):
      twilio login
    3. Install the RTC Plugin (required for deployment and chat features):
      twilio plugins:install @twilio-labs/plugin-rtc

    Note: The chat feature requires @twilio-labs/plugin-rtc version 0.8.1 or greater. You can upgrade using twilio plugins:update.

    npm install -g twilio-cli
twilio login
twilio plugins:install @twilio-labs/plugin-rtc

  10. Install the Twilio Video React App

    master

    To set up the project locally, clone the repository and install the dependencies using NPM:

    git clone https://github.com/twilio/twilio-video-app-react.git
cd twilio-video-app-react
npm install

    If you prefer using yarn, run the yarn import command first to ensure package versions match the package-lock.json file.

  11. Set up the local token server

    master

    The application requires access tokens for Twilio Video Rooms and Conversations. To run the app locally, you must set up a local token server by configuring a .env file in the root directory with your Twilio credentials.

    Steps to configure:

    1. Create a Twilio Console account.
    2. Retrieve your Account SID from Settings.
    3. Create an API Key in the API Keys Section and note the SID and Secret.
    4. Create a Conversations service in the Services section and note the SID.
    5. Create a .env file in the root directory with the following variables:
    TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_API_KEY_SID=SKxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_API_KEY_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_CONVERSATIONS_SERVICE_SID=ISxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    Note: To opt out of Twilio Conversations, set REACT_APP_DISABLE_TWILIO_CONVERSATIONS=true in your environment variables.

  12. Add Noise Cancellation to the application

    master

    To include Krisp noise cancellation for local audio tracks, run the following command immediately after installing the base dependencies:

    npm run noisecancellation:krisp

    Note: This feature is licensed under the Krisp Plugin for Twilio.