Building a WebRTC mobile app with Ionic

WebRTC mobile app with Ionic ApiRTC blog

Building a WebRTC mobile app with Ionic

Last Updated on June 15, 2021 by Carolina Brando

The first goal of ApiRTC is to enable fast development of real-time communication applications using WebRTC. Applications can be web applications, but also mobile applications. ApiRTC provides SDKs for native android and iOS application development, but what if you already have developed the web app and want to leverage its deployment to mobile platforms? Ionic might very well be a solution.

 

Ionic

 

Ionic is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript —. As such, Ionic helps to build cross-platform mobile applications with a single codebase. As a result, you obtain two native-like apps for Android and iOS.

 

ApiRTC WebRTC Ionic

 

 

Create your WebRTC mobile application using Ionic

 

In a previous post, we have developed with Angular a small WebRTC video conferencing web application using ApiRTC.

 

Today we will show you how to turn your web app into a mobile app!

 

Step-by-step tutorial

 

Install Ionic

 

sudo npm install -g @ionic/cli

 

Note: This tutorial was made with Ionic CLI 6.16.1.

 

Clone web app code

 

Our starting web app is already developed, let’s clone the code to fulfill the small configuration modifications Ionic requires (clone with renaming with “-ionic” suffix if you already have cloned ApiRTC-angular):

 

git clone https://github.com/ApiRTC/ApiRTC-angular.git ApiRTC-angular-ionic

 

Add @ionic/angular to the project

 

cd ApiRTC-angular-ionic

 

ng add @ionic/angular

 

Ionic-ize the app

 

ionic init

 

=> give same name as the angular app: ApiRTC-angular

 

Edit angular.json to modify outputPath with:

 

"outputPath": "www",

 

Edit src/index.html to modify <base href and wrap <app-root> into <ion-content> to enable scroll:

 

<base href="./">
<body>
<ion-content overflow-scroll="true">
<app-root></app-root>
</ion-content>
</body>

 

Build

 

ionic build --project="ApiRTC-angular"

 

Generate mobile apps

 

Now that project is built we need to produce the target platforms packages.

 

For Android

 

Add Android capacitor:

 

ionic cap add android

 

If working on linux, add linuxAndroidStudioPath in capacitor.config.json (with your own /path/to):

 

{
"appId": "io.ionic.starter",
"appName": "ApiRTC-angular",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
}
},
"cordova": {},
"linuxAndroidStudioPath": "/path/to/android-studio/bin/studio.sh" 
}

 

Open in studio :

 

ionic cap open android

 

From AndroidStudio, you can run the app on your device or an AVD, and finally package it as you wish.

 

For iOS

 

Please note that IOS 14.5+ is required (this version fixed some WebRTC critical features).

 

Edit src/index.html to add content top-offset for iOS:

 

<ion-content style="position:absolute; top:40px" overflow-scroll="true">

 

Add iOS capacitor:

 

ionic cap add ios

 

ionic cap open ios

 

Setup certificates inside Xcode -> Signing & Capabilities project section.

 

Then build from Xcode, run and/or package it!

 

This is it!

 

Ionic has integrations for popular frameworks like Angular, React, and Vue. It shall be as simple as that to convert any WebRTC web application powered by ApiRTC to a mobile app. Have fun with your cross-platform ApiRTC integrations!

 

You can find this tutorial reference on our github.

Get your API key