Developing OpenVidu
- Prerequisites
- Compiling OpenVidu Server
- Building OpenVidu Server Docker container
- Compiling OpenVidu Browser
- Running KMS
- Example: setup for development
- Example: setup for advanced development
Prerequisites 🔗
Dependency | Check version | Install |
---|---|---|
Java 11 JDK | java -version |
sudo apt-get install -y openjdk-11-jdk |
Maven | mvn -v |
sudo apt-get install -y maven |
Node | node -v |
sudo curl -sL https://deb.nodesource.com/setup_16.x | sudo bash - sudo apt-get install -y nodejs |
Compiling OpenVidu Server 🔗
1) Clone OpenVidu parent repository and install local dependencies. This is only necessary the first time you compile openvidu-server
git clone https://github.com/OpenVidu/openvidu.git
cd openvidu
mvn -DskipTests=true clean install
2) Build openvidu-server
cd openvidu-server
mvn clean compile package # Will output the JAR file in folder ./target
Compiling OpenVidu Server dashboard 🔗
1) You need Angular to compile OpenVidu Server dashboard:
sudo npm install --location=global @angular/cli
2) Enter the Angular project and install NPM dependencies. This is only necessary the first time you compile openvidu-server dashboard
cd openvidu/openvidu-server/src/dashboard
npm install
3) Build the project. This npm command will copy the output files into the static files folder of openvidu-server. Next time you compile openvidu-server it will serve this last compilation of the dashboard.
npm run build
# For production compilation: npm run build-prod
Building OpenVidu Server Docker container 🔗
To build openvidu/openvidu-server Docker container you first need to have the JAR of openvidu-server already compiled. Follow instructions Compiling OpenVidu Server to build it from scratch.
Once you have the openvidu-server JAR, copy it to folder openvidu/openvidu-server/docker/openvidu-server
, being openvidu/
the folder where repository https://github.com/OpenVidu/openvidu.git was cloned. We will also need the content in folder openvidu/openvidu-server/docker/utils
:
# Navigate to path openvidu/openvidu-server/docker/openvidu-server and run this command
# It will copy at this path the content of "utils" folder
cp ../utils/* .
Now we can build the Docker container (of course Docker must be installed)
# Set whatever TAG you want
docker build -t openvidu/openvidu-server:TAG .
Compiling OpenVidu Browser 🔗
1) Clone OpenVidu parent repository and install openvidu-browser dependencies
git clone https://github.com/OpenVidu/openvidu.git
cd openvidu/openvidu-browser
npm install
2) Build openvidu-browser
npm run build
3) To install openvidu-browser as local NPM dependency
sudo npm link
# You can link this local dependency to any project that has openvidu-browser as
# dependency in its package.json, by calling "npm link openvidu-browser"
4) To obtain static JavaScript files
VERSION=2.0.0 npm run browserify # Regular JS version
VERSION=2.0.0 npm run browserify-prod # Minified JS version
# Static files will be available in path ./static/js/
Running KMS 🔗
Run KMS in any OS that supports Docker with the following command:
docker run -d --name kms -p 8888:8888 kurento/kurento-media-server:latest
Latest development version can be executed with:
docker run -d --name kms -p 8888:8888 kurento/kurento-media-server-dev:latest
Here you can check Kurento's official documentation.
Example: setup for development 🔗
Here we show how to develop an Angular app (openvidu-testapp) with openvidu-browser and openvidu-server as local dependencies, waiting to be modified as you want. You can install Angular with sudo npm install --location=global @angular/cli
.
1) Run Kurento Media Server
2) Clone repo:
git clone https://github.com/OpenVidu/openvidu.git
3) openvidu/openvidu-browser/
npm install
npm run build
sudo npm link
4) openvidu/
mvn -DskipTests=true install
5) openvidu/openvidu-testapp/
npm install
npm link openvidu-browser
ng serve
6) openvidu/openvidu-server/
# Must indicate to OpenVidu Server the domain, port and secret
mvn -DDOMAIN_OR_PUBLIC_IP=localhost -DHTTPS_PORT=4443 -DOPENVIDU_SECRET=MY_SECRET exec:java
(or if you prefer you can just run the Java application in your favourite IDE)
At these point, you can start modifying openvidu-testapp, openvidu-browser or openvidu-server.
-
openvidu-testapp : the "ng serve" command will take care of refreshing the browser's page whenever any change takes place
-
openvidu-browser : after modifying any typescript file, you will need to run the following command to update your changes:
/openvidu/openvidu-browser:
npm run build
-
openvidu-server : after modifying any file, there is no other alternative but to re-launch the java application if you want to update your changes
/openvidu/openvidu-server:
mvn clean exec:java
(or re-launch the Java application in your IDE. Some IDE's support automatic re-launch in response to changes)
Example: setup for advanced development (share the app through your network) 🔗
You can also use different machines in the same network to build a more advanced development environment, so you can test the application in different devices at the same time. It's very similar to the process outlined above:
Run exactly the same commands as in the previous section, but:
-
On step 5) extend
ng serve
command with:ng serve --host 0.0.0.0 --ssl
-
On step 6) extend
mvn exec:java
command with:mvn -DDOMAIN_OR_PUBLIC_IP=HOST_LOCAL_IP -DHTTPS_PORT=4443 exec:java # Being HOST_LOCAL_IP the local IP that your machine serving the app has in your LAN network
This way we first tell AngularCLI to serve our app through https and to expose the port in our LAN network, and secondly we set OpenVidu Server public url to the public IP of the machine in our LAN network. This way our devices will be able to reach it as long as they are connected to the same network.
To connect to the application from any device, be sure to be connected to the same LAN network and navigate to https://HOST_LOCAL_IP:4200
(being HOST_LOCAL_IP
the local IP that your machine serving the app has in your LAN network).