openvidu-classroom 🔗

Check it on GitHub

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_14.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.16.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.

Deploy openvidu-classroom 🔗

Using the OpenVidu Dockerhub image 🔗

1) Redefine the /opt/openvidu/docker-compose.override.yml

As the deployment docs says, to make it works with OpenVidu stack, you will need redefine the /opt/openvidu/docker-compose.override.yml by the OpenVidu Classroom docker-compose-override.yml.

This is how should looks like the docker-compose-override.yml after be redefined:

version: '3.1'

services:
    app:
        image: openvidu/openvidu-classroom:2.16.0
        restart: on-failure
        network_mode: host
        environment:
            - SERVER_PORT=5442
            - OPENVIDU_URL=http://localhost:5443
            - OPENVIDU_SECRET=${OPENVIDU_SECRET}

Creating my own docker image 🔗

Under the root project folder, you can see the 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-classroom docker image.

1) Run create_image.sh script:

./create_image.sh

This script will create an image named openvidu/openvidu-classroom-demo:X.Y.Z. If you want to create a image with another different name, you can do it change the name here. Once the openvidu-classrom image has been created, you will can deploy it.

2) Redefine the /opt/openvidu/docker-compose.override.yml

The steps are exactly the same as those described above but you have to take account change the image name by your custom name (openvidu/openvidu-classroom-demo on this sample).

Here it is the docker-compose-override.yml used by OpenVidu Classroom application.

version: '3.1'

services:
    app:
        image: openvidu/openvidu-classroom-demo:2.16.0
        restart: on-failure
        network_mode: host
        environment:
            - SERVER_PORT=5442
            - OPENVIDU_URL=http://localhost:5443
            - OPENVIDU_SECRET=${OPENVIDU_SECRET}