Video Archiving with the Vonage Video API and React

Introduction

Recording video isn't always as simple as hitting a record button; different projects need different outputs. In this project spotlight, Vonage Solutions Engineer Misha Behei breaks down a demo app that handles the four main ways to archive video sessions.

TL;DR Check out the repo.

Multiple Recording Modes, Simplified Implementation

The Vonage Video API provides multiple ways to record a video session, such as audio-only archiving, composed archiving, and individual stream archiving. showcases the various ways of archiving while also showcasing the Experience Composer.

Prerequisites

Before getting started, make sure you have:

• Node.js installed

• A Vonage Video API account

• A basic understanding of React and TypeScript

• Git installed locally

For the frontend of the application, he uses the following:

• React UI (UI framework) written with TypeScript

• Vite (build tool and development server)

• Material UI (UI Component library)

• Vonage Video API JavaScript SDK

For the backend, he used Node.js with Express, written in TypeScript (server).

How It Works

This application uses the Vonage Video API to demonstrate different ways to record video sessions. In simple terms, it allows users to choose whether they want to do any of the following:

• Only record the audio

• Combine all participants into a single video

• Keep each participant's video separate

• Create a custom branded recording with interactive elements. 

The Archiving Modes

This single-page web application demonstrates three distinct archiving modes alongside the Experience Composer functionality.

​​Audio-Only Archive

Audio-Only Archive captures the audio stream without video composition. When a user clicks Start an audio-only archive, the application initializes a single Video Publisher. Despite the video being published, only audio is recorded due to the audio-only archive configuration.

Composed Archive

Composed Archive records a single video file containing all participants in one unified view. When a user clicks Start composed archive, the application initializes a video publisher and requests screen-sharing permissions. The resulting recording combines both webcam, and screen capture footage into a single file.

Individual Archive

Individual Archive separates video streams for each participant. Clicking Start individual archive initializes two video publishers: one with background blur enabled and one without. By default, the Vonage Video API cloud delivers downloads as a single ZIP file containing all recordings. This project includes additional processing that automatically extracts the ZIP file and enables users to play individual video files separately.

Experience Composer

Experience Composer generates custom-rendered videos with interactive elements and branding. The Experience Composer requires a publicly available URL to access and record. For this project, I created and deployed a companion application, a simple football game that randomly assigns goals to either the home or away team. When a user clicks Start Experience Composer, the Experience Composer accesses the game URL and records it while the application simultaneously initializes a video publisher. While the Experience Composer is not technically an archiving feature, it creates a new stream that publishes to the session and is recorded by the archiving feature alongside the video publisher.

At the bottom of the page, you'll find a list of Recent Archives displaying the archive status (available/expired/stopped), archive name (which includes an interesting random fact), and archive ID with a link to the Vonage Archive Inspector. You can also play or download recordings directly from this list. 

Note that Vonage Video API archives are only available for 72 hours unless an S3 storage bucket is configured. After this period, the archive status transitions from available to expired, making the recording no longer accessible.

Running the Project

If you want to try this out yourself, clone the repo.

You'll need two .env files

Create the .env file in the backend/ directory and add the following values: 

OPENTOK_API_KEY=your_api_key_here

OPENTOK_API_SECRET=your_api_secret_here

PORT=3345

Create the .env file in the frontend/ directory and add the VITE_OPENTOK_API_KEY value.

Install the dependencies for both frontend and backend by running: 

npm install

To run the demo standalone from the command line, run:

npm run dev

The backend server is going to be started at localhost:3345, and the frontend will run at localhost:5173. 

Conclusion

And that’s it! This project demonstrates the Vonage Video API's archiving capabilities, showing how developers can tailor recording solutions to their specific needs, whether that's capturing audio-only sessions, creating unified recordings, or separating individual streams. The Experience Composer integration shows how to add custom branding and interactive elements to recordings. Try out the demo yourself to better understand how these features can be included in your own projects.