This repository contains a group videoconference sample application implemented using OpenVidu. This application is a SPA page implemented in Angular 2 and was generated with angular-cli version 1.0.0-beta.17.

Start OpenVidu Development Server

To develop a videoconference application with OpenVidu you first have to start an OpenVidu Development Server, that contains all needed services. OpenVidu Development Server is distributed in a single docker image.

To execute OpenVidu Development Server in your local development computer, you need to have docker software installed. You can install it on Windows, Mac or Linux.

To start OpenVidu Development Server execute the following command (depending on your configuration it is is possible that you need to execute it with 'sudo'):

docker run -p 8443:8443 --rm -e KMS_STUN_IP=193.147.51.12 -e KMS_STUN_PORT=3478 openvidu/openvidu-server-kms

And then wait to a log trace similar to this:

INFO: Started OpenViduServer in 5.372 seconds (JVM running for 6.07)

If you have installed Docker Toolbox in Windows or Mac, you need to know the IP address of your docker machine excuting the following command:

docker-machine ip default

Then, open in your browser and visit URL https://127.0.0.1:8443 (or if you are using Docker Toolbox in Windows or Mac visit https://<IP>:8443). Then, browser will complain about insecure certificate. Please accept the selfsigned certificate as valid.

Now you are ready to execute the sample application.

Executing sample application

In this repository you have a sample JavaScript application that use OpenVidu Development Server to allow videoconferences between a group of users. Please clone it with the following command (you need git installed in your development machine):

git clone https://github.com/OpenVidu/openvidu-sample-basic-ng2

Then, install NPM dependencies with:

cd openvidu-sample-basic-ng2
npm install

If you obtain an error executing this command, be sure you have installed Node 4 or highe together with NPM 3 or higher.

Then, you execute the development Angular 2 server executing

ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

If you are using Docker Toolbox for Windows or Mac, you need to modify the sample application code. You have to change the following line in the file src/app/app.component.ts:

this.openVidu = new OpenVidu("wss://127.0.0.1:8443/");

You have to change 127.0.0.1 with the IP of the OpenVidu Development Server obtained in the previous step.

Then you can go to http://localhost:4200/ to use the sample application.

As you can see, the user name and session is filled automatically in the form to make easier testing the app.

If you open http://localhost:4200/ in two tabs, you can simulate two users talking together. You can open as tabs as you want, but you need a very powerful development machine to test 3 or more users.

For now, it is not possible use the sample application from a different computer.

Troubleshooting

If you click the joing button and nothing happens, check the developer tools log. If you see

Chrome: using SDP PlanB
lang.js:234Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
Participant.js:32 New local participant undefined, streams opts:  []
jsonrpcclient.js:127 Connecting websocket to URI: wss://127.0.0.1:8443/room
browser.js:38 WebSocket connection to 'wss://127.0.0.1:8443/room' failed: WebSocket opening handshake was canceledws @ browser.js:38WebSocketWithReconnection @ webSocketWithReconnection.js:59JsonRpcClient @ jsonrpcclient.js:125OpenVidu.initJsonRpcClient @ OpenVidu.js:63OpenVidu.connect @ OpenVidu.js:35AppComponent.joinSession @ app.component.ts:46_View_AppComponent1._handle_submit_5_0 @ AppComponent.ngfactory.js:533(anonymous function) @ view.js:403(anonymous function) @ dom_renderer.js:249(anonymous function) @ dom_events.js:26ZoneDelegate.invoke @ zone.js:232onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:231Zone.runGuarded @ zone.js:128NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72NgZone.runGuarded @ ng_zone.js:235outsideHandler @ dom_events.js:26ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154ZoneTask.invoke @ zone.js:335

You have to go to

https://localhost:8443/ or https://127.0.0.1:8443/ and accept the certificate