openvidu-call-ionic

Check it on GitHub

OpenVidu Call Ionic demo, built with Ionic v4 and Angular 8, allows users to make videoconference calls in theirs devices with many of the capabilities integrated by OpenVidu platform. It is a frontend-only application.

OpenVidu-Call-Ionic is composed by the five Angular components displayed in the image below.

Android 5 (Lollipop) and 6 (Marshmallow) will not work with Ionic v4 until this issue is properly solved



Running this demo

Using the browser

1) Clone the repo:

git clone https://github.com/OpenVidu/openvidu-call-ionic.git

2) You will need ionic-cli (and of course node 8.9 or greater) to serve the Ionic app. You can install it with the following command:

npm install -g ionic@latest

3) Run the tutorial:

cd openvidu-call-ionic
npm install
ionic serve

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):

docker run -p 4443:4443 --rm -e openvidu.secret=MY_SECRET openvidu/openvidu-server-kms:2.11.0

5) Go to localhost:8100 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.

6) To show the app with the device appearance, press F12 button in your keyboard and the browser DevTool will be opened.

7) Then, you can find a button with a device icon at the top of the browser page. Pressing this button, you should see the device appearance and it will allow you choose your favourite device.


If you are using Windows, read this FAQ to properly run the tutorial

To learn some tips to develop with OpenVidu, check this FAQ

Using the Android apk in an Android device

To deploy the apk Android not only you need to have Java JDK8, Android Studio and Android SDK installed but also you have to set up the specific environment variables. Fortunately, Ionic provide us a great guide to allows us to configure step by step all the requirements.

After we have completed all the steps of the Ionic guide and performed steps 1) and 2) stated above, we must continue with the following commands:

3) Connect the device to the same network as the PC.

4) Establishing the same WIFI in both devices, you need to know IP of your PC in the network. For know that, you can execute ifconfig in your command shell and you will can find something like 192.168.0.105.

Your public_url will be https://192.168.0.105 with the port 4443 (https://192.168.0.105:4443).

Finally, you will must set the OPENVIDU_SERVER_URL variable in the app and the openvidu.publicurl parameter used to run openvidu-server with your public_url and the port.

5) 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):

docker run -p 4443:4443 --rm -e openvidu.secret=MY_SECRET -e openvidu.publicurl="your_public_url":4443 openvidu/openvidu-server-kms:2.11.0

6) Connect the device to the PC. You can check if your device is authoriced with the adb devices command.

7) Run the tutorial:

cd openvidu-call-ionic
npm install
ionic cordova run android
To deploy apps to an Android device and debug them, developer mode must be enabled and allow for USB debugging turned on. Check out these instructions to do this on a device.

In an iOS device with native app

To deploy the iOS app you will need first to follow this guide to properly configure your development environment. Then, it is crucial to have an OpenVidu Server properly deployed with a valid certificate.

iOS devices will require OpenVidu Server to be deployed in a valid domain well-protected with a certificate.
No iPhone or iPad will allow connections to a non-secure OpenVidu Server from within a native application. To facilitate first steps with OpenVidu and Ionic on iOS devices, if no custom url is defined here in the app then our demos OpenVidu Server will be used. Note: this is a publicly accessible OpenVidu Server. Anyone could access your sessions. Use it only for an initial test and under your own responsibility

After we have completed all the steps of the Ionic guide and performed steps 1) and 2) stated above, we must continue with the following commands:


4) Add ios platform

# In openvidu-tutorials/openvidu-ionic
ionic cordova platform add ios

5) Run the tutorial. The app will be automatically launched in your iOS device. First execution you'll need to trust your developer account in your device under Settings -> General -> Device management -> your_apple_developer_account

# In openvidu-tutorials/openvidu-ionic
ionic cordova run ios

You will need to sign your application in Xcode (opening folder openvidu-ionic/platforms/ios) with your developer team to avoid any errors. From Apple official documentation: