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