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.

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();
}