openvidu-ionic-capacitor 🔗

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 liwa
web app.

If it is the first time you use OpenVidu, it is highly recommended to start first with
openvidu-hello-world
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,
cordova-plugin-iosrtc
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 🔗

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_16.x | sudo bash - sudo apt-get install -y nodejs sudo npm install -g [email protected]
        
      

2)
Clone the repo:

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

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