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

1) Clone the repo:

git clone https://github.com/OpenVidu/openvidu-tutorials.git

2) Run the tutorial:

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

3) openvidu-server and Kurento Media Server must be up and running in your development machine. The easiest way is running this Docker container which wraps both of them (you will need Docker CE):

docker run -p 4443:4443 --rm -e openvidu.secret=MY_SECRET openvidu/openvidu-server-kms:2.6.0

4) Go to localhost:3000 to test the app once the server is running. The first time you use the docker container, an alert message will suggest you accept the self-signed certificate of openvidu-server when you first try to join a video-call.


If you are using Windows, read this FAQ to properly run the tutorial

To learn some tips to develop with OpenVidu, check 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, you must include OpvSession in App.js file:

import OpvSession from 'openvidu-react';

2) Secondly, you need to install axios that allows you to do HTTP requests:

npm install axios --save

And include it in Àpp.js:

import axios from 'axios';

Configuring OpenVidu React

App.js

As you can see here, you can use <OpvSession></OpvSession> component to embed openvidu session in your application in a very easy way. Our component will start hidden:

<div>
    {this.state.session === undefined ? (
        <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>
    ) : (
        <div id="session">
            <OpvSession/>
        </div>
    )}
</div>

Method joinSession() gets the token which we provide to our component to connect to the session.

You can configure the OpvSession 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 token from OpenVidu Server
<OpvSession
    id="opv-session"
    sessionName={mySessionId}
    user={myUserName}
    token={token}
    joinSession={this.handlerJoinSessionEvent}
    leaveSession={this.handlerLeaveSessionEvent}
    error={this.handlerErrorEvent}
/>

Moreover, OpvSession emits events leaveSession, joinSession and error, we can handle them with the next code in app.component.ts file:

handlerJoinSessionEvent(event) {
    // Do something
  }

  handlerLeaveSessionEvent(event) {
    // Do something
  }

  handlerErrorEvent(event) {
    // Do something
  }

Get a token from OpenVidu Server

WARNING: This makes this tutorial an insecure application. We need to ask OpenVidu Server for a user token in order to connect to our session. This process should entirely take place in our server-side, not in our client-side. But due to the lack of an application backend in this tutorial, the JavaScript code itself will perform the POST operations to OpenVidu Server
this.getToken().then((token) => {
    // Update the state with the token
});

In a production environment we would perform this operations in our application backend, by making use of the API REST, OpenVidu Java Client or OpenVidu Node Client. Here we have implemented the POST requests to OpenVidu Server in a method getToken() that returns a Promise with the token. Without going into too much detail, this method performs two ajax requests to OpenVidu Server, passing OpenVidu Server secret to authenticate them:

  • First ajax request performs a POST to /api/sessions (we send a customSessionId field to name the session with our sessionName value retrieved from HTML input)
  • Second ajax request performs a POST to /api/tokens (we send a session field to assign the token to this same session)

You can inspect this method in detail in the GitHub repo.


Extra features of OpenVidu React

Alternatives to connect to OpenVidu React

In the example above, OpvSession receives the sessionName, the user and the token parameters. If you want to let the OpvSession get the token for you, you can just dispense with the token and provide two more attributes to it. This is only meant for developing purposes, as you need to hardcode the secret of your OpenVidu Server in the JavaScript code:

<OpvSession
  id="opv-session"
  sessionName={mySessionId}
  user={myUserName}
  openviduServerUrl={'https://localhost:4443'}
  openviduSecret={'MY_SECRET'}
  joinSession={this.handlerJoinSessionEvent}
  leaveSession={this.handlerLeaveSessionEvent}
  error={this.handlerErrorEvent}
/>