openvidu-call-ionic 🔗

Check it on GitHub

OpenVidu Call Ionic demo, built with Ionic v4 and Angular 9, 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



Get and execute the code 🔗

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 Platform service 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) 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) Now you need the IP of your PC in your LAN network, which we will use in points 4) and 5) to configure OpenVidu Server and your app. In Linux/OSX you can simply get it by running the following command on your shell (will probably output something like 192.168.1.111)

awk '/inet / && $2 != "127.0.0.1"{print $2}' <(ifconfig)

4) OpenVidu Platform service 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). Set property DOMAIN_OR_PUBLIC_IP to the IP we just got in point 3). In the example below that would be replacing -e DOMAIN_OR_PUBLIC_IP=YOUR_OPENVIDU_IP to -e DOMAIN_OR_PUBLIC_IP=192.168.1.111

# 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 -e DOMAIN_OR_PUBLIC_IP=YOUR_OPENVIDU_IP openvidu/openvidu-server-kms:2.16.0

5) You must indicate the OpenVidu Server URL to the app. Set it in OPENVIDU_SERVER_URL variable right here. The complete URL is https://DOMAIN_OR_PUBLIC_IP:4443, being DOMAIN_OR_PUBLIC_IP the IP address configured in your OpenVidu Platform service. In this example, running OpenVidu platform as in step 4), that would be: https://192.168.1.111:4443

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

7) Connect the device to the PC via USB. You can check if your device is authorized with the adb devices command.

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