Objective
This article explains how to set up the Vonage Video API reference applications for Web, Android, and iOS. These production-ready applications provide a foundation for building video calling solutions using the Vonage Video API.
All three client applications share the same backend service, which manages session creation and token generation.
Applies to
Vonage Video API
Web reference application (React)
Android reference application
iOS reference application
Procedure
- Log in to the Vonage Dashboard.
- Create a new application and enable the Video capability.
- Download the Private Key and copy the Application ID.
These credentials are used by the backend to create video sessions and generate authentication tokens.
Set up the shared backend and Web application
The backend is included in the Vonage Video React reference application repository. This repository contains both the backend service and the Web client.
Clone the repository
git clone https://github.com/Vonage/vonage-video-react-app.git
cd vonage-video-react-app
Configure environment variables
Create the environment file:
cp backend/.env.example backend/.env
Add your credentials in backend/.env:
VONAGE_APP_ID=your_app_id
VONAGE_PRIVATE_KEY=your_private_key
Run the application locally
Start the application:
yarn dev
This command starts both:
The backend API server on port 3345
The React frontend development server on port 5173
Open the Web application:
http://localhost:5173
Testing on multiple devices
To test the application across multiple devices, you can expose your local servers using a tunneling tool such as ngrok.
For detailed instructions, see:
https://github.com/Vonage/vonage-video-react-app?tab=readme-ov-file#testing-on-multiple-devices
Deploy the backend
For production or shared environments, deploy the backend using Vonage Cloud Runtime (VCR).
Deployment instructions are available here:
https://github.com/Vonage/vonage-video-react-app?tab=readme-ov-file#deployment-to-vonage-cloud-runtime
After deployment, you will receive a public backend URL that will be used by the Android and iOS applications.
Set up the Android reference application
Clone the repository
git clone https://github.com/Vonage/vonage-video-android-app.git
cd vonage-video-android-app
Configure the backend URL
Set the backend URL to point to your running or deployed backend.
Create a local.properties file:
BASE_API_URL=https://your-backend-url.com
or set an environment variable:
export BASE_API_URL=https://your-backend-url.com
Generate configuration
./gradlew generateVonageConfig
Open the project in Android Studio and allow Gradle to sync.
Run the application
./gradlew installDebug
You can also run the application using the Run (▶) button in Android Studio.
If running the application in an Android emulator connected to a local backend, set:
BASE_API_URL=http://10.0.2.2:3345
Set up the iOS reference application
Clone the repository
git clone https://github.com/Vonage/vonage-video-ios-app.git
cd vonage-video-ios-app
Configure signing
Update the regenerateSigningConfig.sh script:
DEVELOPMENT_TEAM = YOUR_DEVELOPMENT_TEAM
MARKETING_VERSION = 1.0
CURRENT_PROJECT_VERSION = 1
Run the script:
./VERA/Scripts/regenerateSigningConfig.sh
This generates the Signing.xcconfig file in the VERA/Config folder.
Configure the backend URL
Option 1 — Modify:
EnvironmentConstants.swiftVERA.entitlements
Option 2 — Set the environment variable and generate constants:
export BASE_API_URL=https://api.example.com/
./VERA/Scripts/generateEnvironmentConstants.sh
Generate the project
Install Tuist, then generate the project:
cd VERA
tuist generate
This generates an Xcode workspace based on the project configuration.
Update the backend URL constant in:
DependencyContainer.swift
Run the VERA target in Xcode.
Additional Information
Below resources provide additional details on the reference applications, and can help you further customise or deploy your implementation.