Get Started with the Web Reference App

The Web Reference App is an open-source video conferencing application built with React and the Vonage Video API. It demonstrates how to implement modern, multiparty session on the web using a modular frontend, a lightweight backend, and configurable features that adapt to different meeting scenarios.

Web Landing Page

What it includes

The Web Reference App provides a complete meeting flow and common conferencing building blocks:

  • A landing page where users can create or join rooms.
  • A waiting room for previewing audio and video devices and setting a display name.
  • A video room supporting up to 25 participants.
  • A post-call page to return to the landing page and view available archives.
  • Input/output device selectors for cameras, microphones, and speakers.
  • Background effects including blur, preset images, and custom uploads (browser support varies).
  • Noise suppression controls.
  • Configurable features driven by a config.json file placed in the public directory.
  • In-call tools including chat, reactions, screen sharing, and archiving.
  • Active speaker detection and a dynamic layout that adapts to network and participant changes.

Architecture

The Web Reference App consists of a frontend and a backend:

  • Frontend (React + Vite):
    Implements the landing flow, waiting room, meeting UI, layout manager, chat, reactions, background effects, reporting tool, and the post-call screen.

  • Backend (Express):
    Generates the session IDs and tokens required by the Vonage Video API.

  • Testing and tooling:
    Playwright is used for integration tests, including screenshot comparisons.
    Common workflows such as linting and documentation generation are managed through yarn scripts.

Main features

The meeting experience includes:

  • Landing and waiting rooms with full device setup.
  • Screen sharing, including subscriber zoom (when media processor support is available).
  • Group chat and emoji reactions.
  • Noise suppression settings.
  • Background effects (blur and image-based), supporting JPG, PNG, GIF, and BMP file types.
  • Active speaker detection.
  • Layout manager with grid, active-speaker, and screen-share modes.
  • Dynamic tile management that conserves bandwidth and adjusts to participant changes.
  • Participant list with audio on/off indicators.
  • Composed archiving for recording meetings.
  • Meeting information panel with a shareable room URL.
  • Reporting tool for submitting in-call issues.

Customization

The Web Reference App supports feature and UI configuration without modifying source code.

Feature configuration

Feature flags are defined in config.json.
An example configuration file is provided (config.example.json).
This file allows you to customize:

  • default layout,
  • audio-on-join behavior,
  • availability of background effects,
  • role-based meeting capabilities.

Theme and UI customization

UI customization is handled through values in config.json and through editable frontend components.

Refer to the repository README for the full list of supported fields.

Web Main Room

Next steps

To install, configure, and run the Web Reference App, follow the instructions in the repository README: