openvidu-ionic-cordova 🔗

Check it on GitHub

An OpenVidu application built with Ionic. It uses Cordova as hybrid app runtime and Angular as frontend framework. It can be compiled into a native Android app, a native iOS app and into a standard web app.

If it is the first time you use OpenVidu, it is highly recommended to start with openvidu-hello-world tutorial, as this app is no more than an extension of it with some new features and styles.

This Ionic tutorial is exactly the same than openvidu-ionic tutorial but using Cordova instead of Capacitor as hybrid app runtime.

Running this tutorial 🔗

To run the tutorial you need the three components stated in OpenVidu application architecture: an OpenVidu deployment, your server application and your client application. In this order:

1. Run OpenVidu deployment 🔗

Using Docker Engine:

# WARNING: this container is not suitable for production deployments of OpenVidu
# Visit https://docs.openvidu.io/en/stable/deployment

docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-dev:2.23.0

2. Run your preferred server application sample 🔗

For more information visit Application server.

3. Run the client application tutorial 🔗

You need NPM, Ionic and Cordova to run the application. Check them with the following command:

npm -v
ionic -v
cordova -v

You can install Ionic and Cordova CLIs with NPM like this:

npm install --location=global @ionic/cli
npm install --location=global cordova

Install application dependencies:

# Using the same repository openvidu-tutorials from step 2

cd openvidu-tutorials/openvidu-ionic-cordova
npm install

Now depending on the platform you want to run your app...


In the browser as a web application 🔗
# Path openvidu-tutorials/openvidu-ionic-cordova
ionic serve

Go to http://localhost:8100 to test the app once the server is running.

To show the app with a mobile device appearance, open the dev tools in your browser. Find the button to adapt the viewport to a mobile device aspect ratio. You may also choose predefined types of devices to see the behavior of your app in different resolutions.

To test the application with other devices in your network, visit this FAQ


In a mobile device as a native application 🔗

Real Android and iOS devices will require a valid SSL certificate in your OpenVidu deployment to work. By default openvidu-ionic-cordova tutorial uses the official demos OpenVidu deployment (demos.openvidu.io), so you can quickly test the app without having to worry about this.

But this OpenVidu deployment is not secure and anyone could access your video sessions. At some point you will need one of two things to securely develop your Ionic application:

  1. A real OpenVidu deployment with a valid domin name and SSL certificate.
  2. A local OpenVidu deployment available in your LAN network with a valid self-signed SSL certificate.

Option 1 just requires to follow the official deployment instructions. For option 2, after running the steps described above, we must follow the instructions explained in this FAQ. In that way we will have the OpenVidu deployment and our server application accessible through our LAN network using a single IP, port and SSL certificate.

Whatever option you choose, once you have your development OpenVidu setup available through a valid SSL certificate, you can proceed to run the app on Android or iOS:

Android 🔗

Follow the Ionic official instructions to run the app in your Android device with Cordova. You will have to install Android Studio and run some commands.

iOS 🔗

Follow the Ionic official instructions to run the app in your iOS device with Cordova. You will have to install Xcode, sign the application and run some commands.



Understanding the code 🔗

The code of openvidu-ionic-cordova application is exactly the same as in openvidu-ionic tutorial. Take a look at that section to understand the code in more depth.


Android specific requirements 🔗

The following configurations are already included in this openvidu-ionic-cordova project. You don't need to follow below instructions if you are using this tutorial as a starting point.

To handle camera and microphone permissions, we need to use the Android Permissions plugin. Install it and use it just as indicated by the Ionic documentation.

We also need to request for media permissions in config.xml, found in root directory. These permissions must be included inside of <platform name="android"> (example)

<config-file mode="merge" parent="/*" target="AndroidManifest.xml">
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
</config-file>

Moreover, you must add xmlns:android="http://schemas.android.com/apk/res/android" to the end of the opening widget node.

<widget id="io.openvidu.sampleios" version="2.6.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    ...
</widget>

Once these changes are added to our code, the app will be ready to run on our Android phone.


iOS specific requirements 🔗

After 14.3 release, iOS brings WebRTC support on the WKWebview, which means we can develop our Ionic applications without using any third-party library (in the past it was necessary to use cordova-plugin-iosrtc).

Knowing this, we still have to configure a number of elements such as media permissions:

Configuration requirements 🔗

1) Add the following lines to config.xml file under ios platform:

<platform name="ios">
    ...
    <hook src="hooks/iosrtc-swift-support.js" type="after_platform_add" />
    <config-file parent="NSCameraUsageDescription" target="*-Info.plist">
        <string>OpenVidu needs access to your camera</string>
    </config-file>
    <config-file parent="NSContactsUsageDescription" target="*-Info.plist">
        <string>OpenVidu needs access to contacts</string>
    </config-file>
    <config-file parent="NSMicrophoneUsageDescription" target="*-Info.plist">
        <string>OpenVidu needs access to your microphone</string>
    </config-file>
    ...
</platform>

2) Add the following preference to the config.xml to allow inline media playback of video elements:

<preference name="AllowInlineMediaPlayback" value="true" />

3) Add this optional dependency to your package.json. Don't forget to run npm install after that to actually install it:

"optionalDependencies": {
    "ios-deploy": "1.9.4"
}

4) Finally remove and reinstall ios platform:

ionic cordova platform remove ios
ionic cordova platform add ios