This is a fully functional application that makes use of the secure version of OpenVidu to connect teachers and students in video sessions. It has a frontend built with Angular 7, a backend built with Spring Boot and a MySQL database. There are two types of roles: teachers and students. First ones can create/edit/remove lessons and invite students to them. Only when a teacher initialize a lesson authorized students can connect to it.
Get and execute the code 🔗
1) Clone the repo:
git clone https://github.com/OpenVidu/classroom-demo.git
2) You will need node, NPM and angular-cli to execute the app. You can install them with:
sudo apt-get update sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo bash - sudo apt-get install -y nodejs sudo npm install -g @angular/cli
3) This demo needs a MySQL database to store the info. Install MySQL:
sudo apt-get install -y mysql-server sudo mysql_secure_installation
And create a new database:
mysql -u root -p
(Enter the same password you set during the installation process)
CREATE DATABASE openvidu_sample_app; exit
4) 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):
# 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.14.0
5) Install NPM dependencies of frontend:
cd classroom-demo/src/angular/frontend npm install
6) Build the frontend, exporting the files to the static folder of the Java application:
ng build --output-path ../../main/resources/static
7) Finally run the Spring Boot application:
cd ../../../ mvn clean package exec:java
Go to https://localhost:5000 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. To test two users in the same computer, use a standard window and an incognito window.
Without going into greater detail, the backend has one controller for the REST operations of the lessons (create new ones or edit/remove existing ones) and one controller for handling the videoconferences. This controller is pretty similar to the one described in any of the secure tutorials. Basically it listens to the operations of creating a new session (returning a sessionId from openvidu-server), generating a new user token (returning the token from openvidu-server) and removing the users when they leave the session.