openvidu-library-react 🔗

Check it on GitHub

OpenVidu Library React is one of the simplest and quickest tutorials to add videoconference capabilities to your existing web application. This tutorial uses openvidu-react library.

Running this tutorial 🔗

To run the tutorial you need the three components stated in OpenVidu application architecture: an OpenVidu deployment, your server application and your client application. In this order:

1. Run OpenVidu deployment 🔗

Using Docker Engine:

# WARNING: this container is not suitable for production deployments of OpenVidu
# Visit https://docs.openvidu.io/en/stable/deployment

docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-dev:2.30.0

2. Run your preferred server application sample 🔗

For more information visit Application server.

3. Run the client application tutorial 🔗

You need NPM to serve the application. Check it with the following command:

npm -v

To serve the tutorial:

# Using the same repository openvidu-tutorials from step 2

cd openvidu-tutorials/openvidu-library-react
npm install
npm start

Go to http://localhost:3000 to test the app once the server is running.

To test the application with other devices in your network, visit this FAQ

Understanding the code 🔗

This is a basic React project generated with npx create-react-app, and therefore you will see lots of configuration files and other stuff that doesn't really matter to us. We will focus on the following files under src/ folder

  • App.js: defines App Component, main component of the app. It contains the JSX code and the functionalities for for handling the the events received from openvidu-react.
  • App.css: CSS for App Component.

We must include openvidu-react and axios in our app: 🔗

1) First of all, you need to install openvidu-react :

npm install openvidu-react --save

After that, include OpenViduSession in App.js file:

import OpenViduSession from 'openvidu-react';

2) Secondly, you need to install axios to perform HTTP requests.

npm install axios --save

And include it in App.js:

import axios from 'axios';

Configuring OpenVidu React 🔗

App.js 🔗

The template for this component is divided into two parts: a form to set the information of the participant and session to connect to, and the OpenViduSession component itself. If there is no session defined yet, the form will be shown. The moment there is a session object defined, the OpenViduSession component will replace the form.

This is the form:

<div id="join">
    <div id="join-dialog">
        <h1> Join a video session </h1>
        <form onSubmit={this.joinSession}>
            <p>
                <label>Participant: </label>
                <input
                    type="text"
                    id="userName"
                    value={myUserName}
                    onChange={this.handleChangeUserName}
                    required
                />
            </p>
            <p>
                <label> Session: </label>
                <input
                    type="text"
                    id="sessionId"
                    value={mySessionId}
                    onChange={this.handleChangeSessionId}
                    required
                />
            </p>
            <p>
                <input name="commit" type="submit" value="JOIN" />
            </p>
        </form>
    </div>
</div>

Method joinSession() triggered from the form is in charge of initializing the session and getting a token for it.

This is the OpenViduSession component:

<OpenViduSession
    id="opv-session"
    sessionName={mySessionId}
    user={myUserName}
    token={token}
    joinSession={this.handlerJoinSessionEvent}
    leaveSession={this.handlerLeaveSessionEvent}
    error={this.handlerErrorEvent}
/>

You can configure the OpenViduSession component with these parameters:

  • sessionName: the session name that will be displayed inside the component.
  • user: the nickname that the user will have in the session.
  • token: the retrieved OpenVidu token.

Moreover, OpenViduSession emits events leaveSession, joinSession and error. We handle them in these functions:

handlerJoinSessionEvent(event) {
    // Do something
}

handlerLeaveSessionEvent(event) {
    // Do something
}

handlerErrorEvent(event) {
    // Do something
}

Get an OpenVidu token 🔗

We are ready to join the session. But we still need a token to get access to it, so we ask for it to the server application. The server application will in turn request a token to the OpenVidu deployment. If you have any doubts about this process, review the Basic Concepts.

In App.js file method joinSession will trigger the request for a token whenever the user clicks on the "JOIN" button. After a successful token retrieval we store it in the application's state.

async joinSession(event) {
    event.preventDefault();
    if (this.state.mySessionId && this.state.myUserName) {
        const token = await this.getToken();
        this.setState({
            token: token,
            session: true,
        });
    }
}

This is the piece of code in charge of finally retrieving a token from the application server. The tutorial uses axios library to perform the necessary HTTP requests.

async getToken() {
    const sessionId = await this.createSession(this.state.mySessionId);
    return await this.createToken(sessionId);
}

async createSession(sessionId) {
    const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions', { customSessionId: sessionId }, {
        headers: { 'Content-Type': 'application/json', },
    });
    return response.data; // The sessionId
}

async createToken(sessionId) {
    const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', {}, {
        headers: { 'Content-Type': 'application/json', },
    });
    return response.data; // The token
}

The moment the application's state has the token property defined and the session property set to true, the OpenViduSession component will be rendered and the user will connect to the Session.

Deploying openvidu-library-react 🔗

1) Build the docker image 🔗

Under the root project folder, you can see the openvidu-library-react/docker/ directory. Here it is included all the required files yo make it possible the deployment with OpenVidu.

First of all, you will need to create the openvidu-library-react docker image. Under openvidu-library-react/docker/ directory you will find the create_image.sh script. This script will create the docker image with the openvidu-basic-node as application server and the static files.

./create_image.sh openvidu/openvidu-library-react-demo:X.Y.Z

This script will create an image named openvidu/openvidu-library-react-demo:X.Y.Z. This name will be used in the next step.

2) Deploy the docker image 🔗

Time to deploy the docker image. You can follow the Deploy OpenVidu based application with Docker guide for doing this.