openvidu-ionic-capacitor 🔗

Check it on GitHub

A client-side only application built with Ionic 5 and Angular 10 frameworks. 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 first with openvidu-hello-world tutorial due to this being a cordova ionic app and being a little more complex for OpenVidu starters.

This ionic tutorial is exactly the same than openvidu-ionic tutorial but using Capacitor instead of Cordova. As you know, cordova-plugin-iosrtc plugin is required for building and running the project in iOS platform 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 Media Server: server that handles low level operations of media flow transmissions

Running this tutorial 🔗

1) You will need Node, NPM and Ionic to serve the app. Install them with the following commands

sudo curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt-get install -y nodejs
sudo npm install -g ionic@latest

2) Clone the repo

git clone https://github.com/OpenVidu/openvidu-tutorials.git

3) Install dependencies

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

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

In the browser 🔗

See how to run in the browser section of openvidu-ionic.

In an Android device with native app 🔗

For previous steps, see how to run in Android device section of openvidu-ionic.

9) 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 openvidu-tutorials/openvidu-ionic-capacitor/android directory in your Android Studio.

In an iOS device with native app 🔗

For previous steps, see how to run in iOS device section of openvidu-ionic.

4) The native platforms are included in openvidu-ionic-capacitor . You don't need to do any extra about this.

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

# In openvidu-tutorials/openvidu-ionic-capacitor
npx cap 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 openvidu-ionic.

Android specific requirements 🔗

See Android specific requirements section of openvidu-ionic.

iOS specific requirements 🔗

See iOS specific requirements section of openvidu-ionic.

Moreover, an explicit change to bear in mind is in the applyIosIonicVideoAttributes method. You will need to remove the zIndex 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 = this._streamManager.stream.videoDimensions.height / this._streamManager.stream.videoDimensions.width;
    this.elementRef.nativeElement.style.width = '100% !important';
    this.elementRef.nativeElement.style.objectFit = 'fill';
    const computedWidth = this.elementRef.nativeElement.offsetWidth;
    this.elementRef.nativeElement.style.height = computedWidth * ratio + 'px';
    if (!this._streamManager.remote) {
        // It is a Publisher video. Custom iosrtc plugin mirror video
        this.elementRef.nativeElement.style.transform = 'scaleX(-1)';
    }
    cordova.plugins.iosrtc.refreshVideos();
}