openvidu-call-react 🔗

OpenVidu Call demo, built with React, allows users to make videoconference calls with many of the capabilities integrated by OpenVidu platform. It is a frontend-only application.

OpenVidu-Call-React is composed by the five React components displayed in the image below.

VideoRoom Component

This is the main component of OpenVidu-Call-React. It allows you to establish a connection with your video roommates. This component allows the user to mute the microphone, unpublish the webcam, share the screen, open the chat and leave the session.

Chat Component

This component provides to Video-room Component a chatting system, integrated with the layout, that allows users to type to each other.

Stream Component

With OpenVidu Layout, this component is the responsible of displaying the video stream of each user in a nice way. On the right, we can see four streams displayed in the same videoconference.

Get and execute the code 🔗

Cloning GitHub Repository 🔗

1) Clone the repo:

git clone https://github.com/OpenVidu/openvidu-call-react.git

2) You will need node, NPM and to execute the app. You can install them with:

sudo apt-get update
sudo curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt-get install -y nodejs

3) OpenVidu Platform service 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):

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

docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-server-kms:2.17.0

4) Install NPM dependencies of React app:

cd openvidu-call-react/openvidu-call-react
npm install

5) Launch the server:

npm start

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

To learn some tips to develop with OpenVidu, check this FAQ