Basic Video application with React and Web Components

In this tutorial, you will learn how to integrate basic video functionality into a React application using the Vonage Video API Web Components.

With the application, you will be able to publish your audio and video into a video call while subscribing to the audio and video of other participants.

If you would like to follow along without building the app yourself, the completed project is available on GitHub.

Overview

This quickstart guides you through:

  • Including the Vonage Video Client SDK in your project
  • Installing the Web Components
  • Placing the Web Components
  • Getting References to the Web Components
  • Generating credentials
  • Creating a Session
  • Setting Session and Token for Web Components
  • (Optional) Setting Properties

Before you start

Before starting this tutorial, complete the following prerequisite if not already completed:

Part 1: Including the Vonage Video Client SDK in your project

The Vonage Video Client SDK allows your application to communicate with the Vonage Video API and infrastructure.

Place into your index.html

<script src="https://cdn.jsdelivr.net/npm/@vonage/client-sdk-video@latest/dist/js/opentok.min.js"></script>

OR if you install the library using npm install --save @vonage/client-sdk-video

<script src="node_modules/@vonage/client-sdk-video/dist/js/opentok.min.js"></script>

Part 2: Installing the Web Components

In this tutorial, two Web Components will be used: <video-publisher> and <video-subscribers>. <video-publisher> publishes your video and audio into the video call, where <video-subscribers> subscribes to the video and audio of any other participants and displays them in your application.

Install into your project

npm i @vonage/video-publisher

npm i @vonage/video-subscribers

Then import into your main.ts project file

import '@vonage/video-publisher/video-publisher.js';

import '@vonage/video-subscribers/video-subscribers.js';

OR use a CDN and place in your index.html file

<script type="module" src="https://cdn.jsdelivr.net/npm/@vonage/video-publisher@latest/video-publisher.js/+esm"></script>

<script type="module" src="https://cdn.jsdelivr.net/npm/@vonage/video-subscribers@latest/video-subscribers.js/+esm"></script>

Part 3: Placing the Web Components

Now, place the Web Components in your markup where you would like them to show up in your application.

For example:

<video-publisher ref={publisher}></video-publisher>

<video-subscribers ref={subscribers}></video-subscribers>

Part 4: Getting References to the Web Components

So that your application can set properties on the Web Components, you’ll need to get references to them.

const publisher = useRef(null);
const subscribers = useRef(null);

Part 5: Generating credentials

Note: In production applications, they are retrieved from the server more info. For this demo, you can either deploy a Video Learning Server (Node or PHP) and set serverURL or follow the next steps to generate and hardcode them. To get the credentials needed to run the demo:

  • Sign up for or Log into your account.
  • In the left-side menu of the dashboard, click Applications and select a previous application or create a new one to view the Application ID. Screenshot of dashboard with Applications highlighted
Screenshot of dashboard with Application ID highlighted
  • Make sure that Video is activated
Screenshot of dashboard with Video section highlighted
  • Head over to the The Video API Playground. Either enter the Application ID or find it in the dropdown. You can leave the default values for the other options. Click "Create".
Screenshot of The Video API Playground tool
  • Your Session ID and Token will be created.
Screenshot of The Video API Playground tool generated details with the Application ID, Session ID, and Token highlighted in red boxes

Part 6: Creating a Session

A Session is essentially your video call. It is the “room” where participants/clients connect and interact with each other.

const session = OT.initSession(applicationId, sessionId);

Part 7: Setting Session and Token for Web Components

Now we will set the values for the Session and Token. You can think of the Token as your “pass” into the room.

publisher.current.session = session;
publisher.current.token = token;
subscribers.current.session = session;
subscribers.current.token = token;

Part 8: (Optional) Setting Properties

There are some properties that can be set on the Web Components to add or change default functionalities.

publisher.current.properties = { ... };

(see full list)

subscribers.current.properties = { ... };

(see full list)

Next steps

That’s It! Now that you've completed this tutorial, here are some more resources.