Vonage Video API Reference App for React

Table of Contents

• Table of Contents
• What is it?
• Why use it?
• Project Architecture
• Platforms Supported
• Requirements
• Running Locally
  • Config
  • Running the project
    • Installing dependencies
    • Dev mode
    • Production mode
• Testing
  • Integration Tests
    • Screenshot tests or Visual comparisons
    • Generating and Updating Screenshots
  • Running the backend and frontend test suites
  • Backend Suite
  • Frontend Suite
• Code style
  • Linting and auto-formatting
  • File names
• Documentation Generation
• Code of Conduct
• Getting Involved
• Known Issues
• Report Issues

What is it?

The Vonage Video API Reference App for React is an open-source video conferencing reference application for the Vonage Video API using the React framework.

The Reference App demonstrates the best practices for integrating the Vonage Video API with your application for various use cases, from one-to-one and multi-participant video calling to recording, screen sharing, reactions, and more.

Why use it?

The Vonage Video API Reference App for React provides developers an easy-to-setup way to get started with using our APIs with React.

The application is open-source, so you can not only get started quickly, but easily extend it with features needed for your use case. Any features already implemented in the Reference App use best practices for scalability and security.

As a commercial open-source project, you can also count on a solid information security architecture. While no packaged solution can guarantee absolute security, the transparency that comes with open-source software, combined with the proactive and responsive open-source community and vendors, provides significant advantages in addressing information security challenges compared to closed-source alternatives.

This application provides features for common conferencing use cases, such as:

• A landing page for users to create and join meeting rooms.

  
• A waiting room for users to preview their audio and video device settings and set their name before entering a meeting room.

  
• A post-call page to navigate users to the landing page, re-enter the left room, and display archive(s), if any.

  
• A video conferencing “room” supporting up to 25 participants and the following features:
• Input and output device selectors.

  
• Background blur and noise suppression toggles.
• Composed archiving capabilities to record your meetings.

  
• In-call tools such as screen sharing, group chat function, and emoji reactions.

  
• Active speaker detection.
• Layout manager with options to display active speaker, screen share, or all participants in a grid view.
• The dynamic display adjusts to show new joiners, hide video tiles to conserve bandwidth, and show the “next” participant when someone previously speaking leaves.
• Ability to mute other participants during the meeting.

  
• Call participant list with audio on/off indicator.

  
• Meeting information with an easy-to-share URL to join the meeting.
• A reporting tool to enable participants to file any in-call issues.

  

Project Architecture

Platforms Supported

The Vonage Video API Reference App for React is currently supported on the latest release versions for the following browsers:

• Google Chrome
• Firefox
• Microsoft Edge
• Opera
• Safari
• Electron

Note: Mobile web views have limited supported at the moment.

Requirements

• node.js (version 22)
• yarn
• optional - nvm (recommended for switching Node versions)

Running Locally

Config

In project directory, create the environment variables for the project.

cp backend/.env.example backend/.env

Add your Vonage Video API credentials to the newly created .env file.

cp frontend/.env.example frontend/.env

Running the project

Installing dependencies

yarn

This command installs all appropriate dependencies for the project. If you would like more information on the packages we use, please refer to the Dependencies document.

Dev mode

yarn dev

This command builds and watches both the backend server (:3345) and frontend vite dev server (:5173) You should now see the app running at http://localhost:5173/

Production mode

This command builds a production bundle of the app frontend and cps it to the backend to be served by the express server.

yarn start

The app and API are both served on http://localhost:3345/

Testing

Integration Tests

We have integration tests using Playwright. We recommend using their VSCode integration to run tests.

To run the tests you need to run the app server separately:

# In one terminal tab
yarn start

# In a separate tab. Or use vscode extension to run tests
yarn test:integration

Screenshot tests or Visual comparisons

We use Playwright Visual Comparison for Screenshot UI tests. Since screenshot tests are part of our integration tests, running our integration tests also executes the screenshot tests.

Generating and Updating Screenshots

If we need to update the expected screenshot due to UI changes, we can delete the existing expected screenshot and then run the test. The test will fail, but a new expected screenshot will be generated. Running the test again should pass, as the expected and actual screenshots will now match.

For CI tests, we require screenshots for various browsers and operating systems because they render interfaces with subtle differences.

To capture CI-specific screenshots, you can use the update-screenshots job. This job is triggered by creating a pull request (PR) with the update-screenshots label on GitHub. Once triggered, it will capture new screenshots on the virtual machine (VM) and automatically push them to a new branch current-branch-name-update-screenshots. You can easily cherry-pick the commit from the new branch to the PR branch, sign the commit, and push it back to the PR.

Running the backend and frontend test suites

• To run the frontend and backend tests:

yarn test

Backend Suite

• To run backend tests once:

yarn test:backend

• To run backend tests in watch mode (ie you're adding more tests):

yarn test:backend:watch

• For additional CLI options, see jest docs.

Frontend Suite

We have frontend tests using vitest and React Testing Library. We recommend using the vitest VSCode integration to run tests.

Alternatively you can run the tests in the terminal:

• To run frontend tests once:

yarn test:frontend

• To run frontend tests in watch mode (ie you're adding more tests):

yarn test:frontend:watch

• For additional CLI options, see vitest docs

Code style

Linting and auto-formatting

We use eslint and prettier to format code. Prettier issues will show up in eslint too via eslint-plugin-prettier. You can setup an eslint extension for your editor. For VSCode use: dbaeumer.vscode-eslint.

You can either set up vscode to fix eslint issues on save or fix them with VSCode keyboard command palette shortcut cmd + shift + p > "ESLint: Fix all auto-fixable problems".

In the terminal you can run

yarn lint

to check for eslint issues and

yarn lint:fix

to fix any auto-fixable issues and also run prettier on all files.

File names

All filenames are in camelCase.

Documentation Generation

We use typedoc to generate documentation from our jsdoc comments. Generated documents can be found in the frontend/dist folder.

To generate documentation, run the following in the terminal

yarn docs

Code of Conduct

Please read our Code of Conduct.

Getting Involved

If you wish to contribute to this project, read how in Contributing.

Known Issues

We track known issues in Known Issues. Please refer to it for details.

Report Issues

If you have any issues, feel free to open an issue or reach out to support via [email protected].