Skip to content

openvidu-react#

Source code

This tutorial is a simple video-call application built with React that allows:

  • Joining a video call room by requesting a token from any application server.
  • Publishing your camera and microphone.
  • Subscribing to all other participants' video and audio tracks automatically.
  • Leaving the video call room at any time.

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

Running this tutorial#

1. Run LiveKit Server#

You can run LiveKit locally or you can use their free tier of LiveKit Cloud.

Alternatively, you can use OpenVidu, which is a fully compatible LiveKit distribution designed specifically for on-premises environments. It brings notable improvements in terms of performance, observability and development experience. For more information, visit What is OpenVidu?.

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment

  2. Configure the local deployment

    cd openvidu-local-deployment/community
.\configure_lan_private_ip_windows.bat

    cd openvidu-local-deployment/community
./configure_lan_private_ip_macos.sh

    cd openvidu-local-deployment/community
./configure_lan_private_ip_linux.sh

  3. Run OpenVidu

    docker compose up

To use a production-ready OpenVidu deployment, visit the official OpenVidu deployment guide.

Configure Webhooks

All application servers have an endpoint to receive webhooks from LiveKit. For this reason, when using a production deployment you need to configure webhooks to point to your local application server in order to make it work. Check the Send Webhooks to a Local Application Server section for more information.

Follow the official instructions to run LiveKit locally.

Configure Webhooks

All application servers have an endpoint to receive webhooks from LiveKit. For this reason, when using LiveKit locally you need to configure webhooks to point to your application server in order to make it work. Check the Webhooks section from the official documentation and follow the instructions to configure webhooks.

Use your account in LiveKit Cloud.

Configure Webhooks

All application servers have an endpoint to receive webhooks from LiveKit. For this reason, when using LiveKit Cloud you need to configure webhooks to point to your local application server in order to make it work. Check the Webhooks section from the official documentation and follow the instructions to configure webhooks.

Expose your local application server

In order to receive webhooks from LiveKit Cloud on your local machine, you need to expose your local application server to the internet. Tools like Ngrok, LocalTunnel, LocalXpose and Zrok can help you achieve this.

These tools provide you with a public URL that forwards requests to your local application server. You can use this URL to receive webhooks from LiveKit Cloud, configuring it as indicated above.

2. Download the tutorial code#

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

3. Run a server application#

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node
  2. Install dependencies 
    npm install
  3. Run the application 
    npm start

For more information, check the Node.js tutorial.

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go
  2. Run the application 
    go run main.go

For more information, check the Go tutorial.

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby
  2. Install dependencies 
    bundle install
  3. Run the application 
    ruby app.rb

For more information, check the Ruby tutorial.

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java
  2. Run the application 
    mvn spring-boot:run

For more information, check the Java tutorial.

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python

  2. Create a python virtual environment

    python -m venv venv

  3. Activate the virtual environment

    .\venv\Scripts\activate

    . ./venv/bin/activate

    . ./venv/bin/activate

  4. Install dependencies

    pip install -r requirements.txt

  5. Run the application

    python app.py

For more information, check the Python tutorial.

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust
  2. Run the application 
    cargo run

For more information, check the Rust tutorial.

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php
  2. Install dependencies 
    composer install
  3. Run the application 
    composer start

Warning

LiveKit PHP SDK requires library BCMath. This is available out-of-the-box in PHP for Windows, but a manual installation might be necessary in other OS. Run sudo apt install php-bcmath or sudo yum install php-bcmath

For more information, check the PHP tutorial.

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet
  2. Run the application 
    dotnet run

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your LiveKit Server.

For more information, check the .NET tutorial.

4. Run the client application#

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-react

  2. Install dependencies:

    npm install

  3. Run the application:

    npm start

Once the server is up and running, you can test the application by visiting http://localhost:5080. You should see a screen like this:

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

Understanding the code#

This React project has been generated using the Vite. You may come across various configuration files and other items that are not essential for this tutorial. Our focus will be on the key files located within the src/ directory:

  • App.tsx: This file defines the main application component. It is responsible for handling tasks such as joining a video call and managing the video calls themselves.
  • App.css: This file contains the styles for the main application component.
  • VideoComponent.tsx: This file defines the VideoComponent. This component is responsible for displaying video tracks along with participant's data. Its associated styles are in VideoComponent.css.
  • AudioComponent.vue: This file defines the AudioComponent. This component is responsible for displaying audio tracks.

To use the LiveKit JS SDK in a Vue application, you need to install the livekit-client package. This package provides the necessary classes and methods to interact with the LiveKit server. You can install it using the following command:

npm install livekit-client

Now let's see the code of the App.tsx file:

App.tsx
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
type TrackInfo = { // (1)!
    trackPublication: RemoteTrackPublication;
    participantIdentity: string;
};

// When running OpenVidu locally, leave these variables empty
// For other deployment type, configure them with correct URLs depending on your deployment
let APPLICATION_SERVER_URL = ""; // (2)!
let LIVEKIT_URL = ""; // (3)!
configureUrls();

function configureUrls() {
    // If APPLICATION_SERVER_URL is not configured, use default value from OpenVidu Local deployment
    if (!APPLICATION_SERVER_URL) {
        if (window.location.hostname === "localhost") {
            APPLICATION_SERVER_URL = "http://localhost:6080/";
        } else {
            APPLICATION_SERVER_URL = "https://" + window.location.hostname + ":6443/";
        }
    }

    // If LIVEKIT_URL is not configured, use default value from OpenVidu Local deployment
    if (!LIVEKIT_URL) {
        if (window.location.hostname === "localhost") {
            LIVEKIT_URL = "ws://localhost:7880/";
        } else {
            LIVEKIT_URL = "wss://" + window.location.hostname + ":7443/";
        }
    }
}

function App() {
    const [room, setRoom] = useState<Room | undefined>(undefined); // (4)!
    const [localTrack, setLocalTrack] = useState<LocalVideoTrack | undefined>(undefined); // (5)!
    const [remoteTracks, setRemoteTracks] = useState<TrackInfo[]>([]); // (6)!

    const [participantName, setParticipantName] = useState("Participant" + Math.floor(Math.random() * 100)); // (7)!
    const [roomName, setRoomName] = useState("Test Room"); // (8)!
  1. TrackInfo type, which groups a track publication with the participant's identity.
  2. The URL of the application server.
  3. The URL of the LiveKit server.
  4. The room object, which represents the video call room.
  5. The local video track, which represents the user's camera.
  6. The remote tracks array.
  7. The participant's name.
  8. The room name.

The App.tsx file defines the following variables:

  • APPLICATION_SERVER_URL: The URL of the application server. This variable is used to make requests to the server to obtain a token for joining the video call room.
  • LIVEKIT_URL: The URL of the LiveKit server. This variable is used to connect to the LiveKit server and interact with the video call room.
  • room: The room object, which represents the video call room.
  • localTrack: The local video track, which represents the user's camera.
  • remoteTracks: An array of TrackInfo objects, which group a track publication with the participant's identity.
  • participantName: The participant's name.
  • roomName: The room name.

Configure the URLs

When running OpenVidu locally, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for other deployment type, you should configure these variables with the correct URLs depending on your deployment.

Joining a Room#

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() function is called:

App.tsx
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
async function joinRoom() {
    // Initialize a new Room object
    const room = new Room(); // (1)!
    setRoom(room);

    // Specify the actions when events take place in the room
    // On every new Track received...
    room.on(
        RoomEvent.TrackSubscribed,
        (_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => {
            // (2)!
            setRemoteTracks((prev) => [
                ...prev,
                { trackPublication: publication, participantIdentity: participant.identity }
            ]);
        }
    );

    // On every Track destroyed...
    room.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => {
        // (3)!
        setRemoteTracks((prev) => prev.filter((track) => track.trackPublication.trackSid !== publication.trackSid));
    });

    try {
        // Get a token from your application server with the room name and participant name
        const token = await getToken(roomName, participantName); // (4)!

        // Connect to the room with the LiveKit URL and the token
        await room.connect(LIVEKIT_URL, token); // (5)!

        // Publish your camera and microphone
        await room.localParticipant.enableCameraAndMicrophone(); // (6)!
        setLocalTrack(room.localParticipant.videoTrackPublications.values().next().value.videoTrack);
    } catch (error) {
        console.log("There was an error connecting to the room:", (error as Error).message);
        await leaveRoom();
    }
}
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get a token from the application server with the room name and participant name from the form.
  5. Connect to the room with the LiveKit URL and the token.
  6. Publish your camera and microphone.

The joinRoom() function performs the following actions:

  1. It creates a new Room object. This object represents the video call room.

    Info

    When the room object is defined, the HTML template is automatically updated hiding the "Join room" page and showing the "Room" layout.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    • RoomEvent.TrackSubscribed: This event is triggered when a new track is received in the room. It manages the storage of the new track in the remoteTracks array as a TrackInfo object containing the track publication and the participant's identity.

    • RoomEvent.TrackUnsubscribed: This event occurs when a track is destroyed, and it takes care of removing the track from the remoteTracks array.

    These event handlers are essential for managing the behavior of tracks within the video call. You can further extend the event handling as needed for your application.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() function:

    App.tsx
    101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
    /**
 * --------------------------------------------
 * GETTING A TOKEN FROM YOUR APPLICATION SERVER
 * --------------------------------------------
 * The method below request the creation of a token to
 * your application server. This prevents the need to expose
 * your LiveKit API key and secret to the client side.
 *
 * In this sample code, there is no user control at all. Anybody could
 * access your application server endpoints. In a real production
 * environment, your application server must identify the user to allow
 * access to the endpoints.
 */
async function getToken(roomName: string, participantName: string) {
    const response = await fetch(APPLICATION_SERVER_URL + "token", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            roomName: roomName,
            participantName: participantName
        })
    });

    if (!response.ok) {
        const error = await response.json();
        throw new Error(`Failed to get token: ${error.errorMessage}`);
    }

    const data = await response.json();
    return data.token;
}

    This function sends a POST request using fetch() to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  4. It connects to the room using the LiveKit URL and the token.

  5. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then stored in the localTrack variable.

Displaying Video and Audio Tracks#

In order to display participants' video and audio tracks, the main component integrates the VideoComponent and AudioComponent.

App.tsx
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<div id="layout-container">
    {localTrack && (
        <VideoComponent track={localTrack} participantIdentity={participantName} local={true} />
    )}
    {remoteTracks.map((remoteTrack) =>
        remoteTrack.trackPublication.kind === "video" ? (
            <VideoComponent
                key={remoteTrack.trackPublication.trackSid}
                track={remoteTrack.trackPublication.videoTrack!}
                participantIdentity={remoteTrack.participantIdentity}
            />
        ) : (
            <AudioComponent
                key={remoteTrack.trackPublication.trackSid}
                track={remoteTrack.trackPublication.audioTrack!}
            />
        )
    )}
</div>

This code snippet does the following:

  • If the property localTrack is defined, we display the local video track using the VideoComponent. The local property is set to true to indicate that the video track belongs to the local participant.

    Info

    The audio track is not displayed for the local participant because there is no need to hear one's own audio.

  • Then, we iterate over the remoteTracks array and, for each remote track, we create a VideoComponent or an AudioComponent depending on the track's kind (video or audio). The participantIdentity property is set to the participant's identity, and the track property is set to the video or audio track.

Let's see now the code of the VideoComponent.txs file:

VideoComponent.tsx
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
interface VideoComponentProps {
    track: LocalVideoTrack | RemoteVideoTrack; // (1)!
    participantIdentity: string; // (2)!
    local?: boolean; // (3)!
}

function VideoComponent({ track, participantIdentity, local = false }: VideoComponentProps) {
    const videoElement = useRef<HTMLVideoElement | null>(null); // (4)!

    useEffect(() => {
        if (videoElement.current) {
            track.attach(videoElement.current); // (5)!
        }

        return () => {
            track.detach(); // (6)!
        };
    }, [track]);

    return (
        <div id={"camera-" + participantIdentity} className="video-container">
            <div className="participant-data">
                <p>{participantIdentity + (local ? " (You)" : "")}</p>
            </div>
            <video ref={videoElement} id={track.sid}></video>
        </div>
    );
}
  1. The video track object, which can be a LocalVideoTrack or a RemoteVideoTrack.
  2. The participant identity associated with the video track.
  3. A boolean flag that indicates whether the video track belongs to the local participant.
  4. The reference to the video element in the HTML template.
  5. Attach the video track to the video element when the component is mounted.
  6. Detach the video track when the component is unmounted.

The VideoComponent does the following:

  • It defines the properties track, participantIdentity, and local as props of the component:

    • track: The video track object, which can be a LocalVideoTrack or a RemoteVideoTrack.
    • participantIdentity: The participant identity associated with the video track.
    • local: A boolean flag that indicates whether the video track belongs to the local participant. This flag is set to false by default.

  • It creates a reference to the video element in the HTML template.

  • It attaches the video track to the video element when the component is mounted.
  • It detaches the video track when the component is unmounted.

Finally, let's see the code of the AudioComponent.tsx file:

AudioComponent.tsx
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
interface AudioComponentProps {
    track: LocalAudioTrack | RemoteAudioTrack; // (1)!
}

function AudioComponent({ track }: AudioComponentProps) {
    const audioElement = useRef<HTMLAudioElement | null>(null); // (2)!

    useEffect(() => {
        if (audioElement.current) {
            track.attach(audioElement.current); // (3)!
        }

        return () => {
            track.detach(); // (4)!
        };
    }, [track]);

    return <audio ref={audioElement} id={track.sid} />;
}
  1. The audio track object, which can be a LocalAudioTrack or a RemoteAudioTrack, although in this case, it will always be a RemoteAudioTrack.
  2. The reference to the audio element in the HTML template.
  3. Attach the audio track to the audio element when the component is mounted.
  4. Detach the audio track when the component is unmounted.

The AudioComponent is similar to the VideoComponent but is used to display audio tracks. It defines the track property as a prop for the component and creates a reference to the audio element in the HTML template. The audio track is attached to the audio element when the component is mounted and detached when the component is unmounted.

Leaving the Room#

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() function:

App.tsx
91
92
93
94
95
96
97
98
99
async function leaveRoom() {
    // Leave the room by calling 'disconnect' method over the Room object
    await room?.disconnect(); // (1)!

    // Reset the state
    setRoom(undefined); // (2)!
    setLocalTrack(undefined);
    setRemoteTracks([]);
}
  1. Disconnect the user from the room.
  2. Reset all variables to their initial state.

The leaveRoom() function performs the following actions:

  • It disconnects the user from the room by calling the disconnect() method on the Room object.
  • It resets all variables to their initial state.