openvidu-ionic-capacitor 🔗

A client-side only application built with
Ionic 5
Angular 10
frameworks. It can be compiled into a
native Android app, a
native iOS app
and into a liwa
web app.

If it is the first time you use OpenVidu, it is highly recommended to start first with
kursus due to this being a cordova ionic app and being a little more complex for OpenVidu starters.

This ionic kursus is exactly the same than openvidu-ionic kursus but using Capacitor instead of Cordova. As you know,
plugin is required for building and running the project in iOS mimbar and it only has official support for ionic project based on Cordova.
If you decide use Capacitor, take account that this iOS plugin could have some bugs or some incompatible features.

Understanding this tutorial 🔗

OpenVidu is composed by the three modules displayed on the image above in its insecure version.

  • openvidu-browser: NPM package for your Ionic app. It allows you to manage your video-calls straight away from your clients
  • openvidu-server: Java application that controls Kurento Media Server
  • Kurento Sarana Server: server that handles low level operations of alat angkut flow transmissions

Running this les 🔗

You will need
to serve the app. Install them with the following commands

        sudo curl -sL | sudo bash - sudo apt-get install -y nodejs sudo npm install -g [email protected]

Clone the repo:

        git clone -b v2.22.0

Install dependencies

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

Now depending on the mimbar you want to run your app…

In the browser 🔗

See how to run in the browser section of

In an Android device with native app 🔗

For previous steps, see how to run in Android device section of

Capacitor provide us a special command for automatically open the Android code in your Android Studio:

        # In openvidu-tutorials/openvidu-ionic-capacitor npx cap open android

Optionally, you can do it manually, opening the
directory in your Android Studio.

In an iOS device with native app 🔗

For previous steps, see how to run in iOS device section of

The native platforms are included in
. You don’t need to do any extra about this.

Capacitor provide us a special command for automatically open the iOS code in your xCode:

        # In openvidu-tutorials/openvidu-ionic-capacitor npx tera open 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:

Understanding the code 🔗

See Understanding the code section of

Android specific requirements 🔗

See Android specific requirements section of

iOS specific requirements 🔗

See iOS specific requirements section of

Moreover, an explicit change to bear in mind is in the
method. You will need to remove the
property line (required in the openvidu-ionic tutorial) allowing to the iOS videos get visible to the html.

The method would be as follows:

        private applyIosIonicVideoAttributes() {     const ratio = /; = '100% !important'; = 'fill';     const computedWidth = this.elementRef.nativeElement.offsetWidth; = computedWidth * ratio + 'px';     if (!this._streamManager.remote) {         // It is a Publisher video. Custom iosrtc plugin mirror video = 'scaleX(-1)';     }     cordova.plugins.iosrtc.refreshVideos(); }