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

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 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 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="./">
<ion-content overflow-scroll="true">




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/" 


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.