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.20.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