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.
Running this demo 🔗
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.29.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
Cloning the repo:
git clone https://github.com/OpenVidu/openvidu-call-react.git
To serve the tutorial:
cd openvidu-call-react/openvidu-call-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
Deploying openvidu-call-react 🔗
1) Build the docker image 🔗
Under the root project folder, you can see the openvidu-call-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-call-react docker image. Under openvidu-call-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. So you will need to clone the openvidu-tutorials repository at the same level of the openvidu-call-react repository.
# Clone the openvidu-tutorials repository at the same level of the openvidu-call-react repository
git clone https://github.com/OpenVidu/openvidu-tutorials.git -b v2.29.0
Then, you can create the docker image with the following command:
./create_image.sh openvidu/openvidu-react-demo:X.Y.Z
This script will create an image named openvidu/openvidu-call-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.