We’re excited to announce the launch of the Vonage Video API Reference App for React 1.0, a full-stack, open-source React reference application designed to educate developers on best practices for creating transformative experiences using Vonage Video Client SDK. The reference app is packed with optimizations for multi-participant video calls, showcasing practical implementations of our most popular features, including seamless support for multi-participant interactions and a polished Pre-Meeting room experience.
Released under the Apache 2.0 License, this project offers freedom to adapt, extend, and distribute the code, giving you the tools to unlock new possibilities in the video communication space.
Developing reliable, scalable, and user-friendly video solutions remains a challenge. The Vonage Video API Reference App for React eliminates these hurdles, offering a ready-to-deploy application that prioritizes ease of use and innovation. You can see how all of the parts work together in a full-featured application and dive into the Github repository when you want to know more about a feature.
1. Full-Stack React Application: Built on the popular React framework, the app provides a reference code. It demonstrates the best practices for adding video into a React application, from node.js back-end to a modern, adaptive front-end written in React.
2. Multi-Participant Video Calls: Layout and stream management that automatically adapts from 1:1 to multi-participant calls, as participants join and leave, share screens, etc.
3. Video Call Quality: Quality optimizations dynamically update stream resolution, framerate, and rendering sizes for optimal call experience.
4. Pre-Meeting Room: Give users confidence before they join a meeting by allowing them to check and configure their camera, microphone, and network setup..
5. In-Meeting Features: Easily add participant list, screen share, recording (up to FHD), active speaker detection, emoji reactions, and more.
6. Video Recording and File Download: Capture high-quality video recordings from standard and up to Full HD resolution and enable users to download files effortlessly for offline access.
7. Flexible Deployment Options: Deploy the reference application seamlessly on-premise for enhanced control and compliance, or leverage a one-click deployment option through the Vonage Code Hub to give it a try.
8. Open Source with Apache 2.0 License: Released under the Apache 2.0 license, the app can be customized to each developer's needs while maintaining ownership of your innovations.
We developed this reference application so that you can benefit from it no matter where you are in your development journey. This app is for:
Innovators looking to experiment with video technologies.
Entrepreneurs building integrated, video-driven solutions for their customers.
Enterprise developers seeking to enhance internal tools or deliver new value through customer-facing products.
Built with the Vonage Video Web Client SDK, you can use the reference application to check out our best practices for working with client-side applications.The reference application also takes advantage of the Vonage Video Node SDK to speed up your development on the backend as well. You can see how to implement many of the server-side management interfaces that your application needs.
The Vonage Video Reference App for React is designed to get you into a running application as quickly as possible. It can be run in a variety of ways, depending on your needs.
If you want to play around with the reference app today without installing anything, you can head over to CodeHub.
Click the "Deploy Code" link.
Click the "Deploy New Instance" button.
It will ask you for some configuration. Give it a name, and then select "Vonage" for the "Video Environment" option. You can leave the API Key and Secret options empty, as these pertain to existing OpenTok users.
Click "Continue".
This will deploy the app to your account and automatically configure it for Vonage Video. You should be able to use it right away to start making video calls!
You can also peruse the source code and deploy it on your own system by downloading the code from GitHub.
Visit the GitHub repository. Clone the project and follow the step-by-step setup instructions.
Explore the documentation to learn how to customize the app for your specific use case.
If you want to know more about what is available in the reference application, take a look at the documentation in our developer center. You can also view the release notes for each release of the application itself so you can keep up-to-date on features that may be useful to you. If you want to deep dive into the code, check out the README and source code on GitHub itself.
We believe in the power of open-source collaboration. The Vonage Video API Reference App for React is not just a tool—it’s the foundation of a vibrant community.
Contribute:Share your improvements, features, and bug fixes with pull requests and feature requests.
Engage: By reporting any issues you encounter to the GitHub repository to help improve the application.
Create: Use the app as a springboard to develop groundbreaking products that change the way people connect.
Whether you're creating your first product or scaling an enterprise solution, this app provides production-grade source code, which can be used as a reference to help you succeed. Check out our contributing guidelines if you have any questions.
Have you used the Vonage Video API or the React Sample App already? We’d love to hear your feedback! Join us on the Vonage Community Slack if you need any help, or email us at support@api.vonage.com, and we will get back to you.
){kind=small}
Chris is the Senior PHP Developer Advocate and Server SDK Initiative Lead. He has been programming for more than 15 years across various languages and types of projects from client work all the way up to big-data, large scale systems. He lives in Ohio, spending his time with his family and playing video and TTRPG games.
