Webrtc based apps using ionic/capacitor

Capacitor
#1

We have chosen ionic/capacitor to build web native apps and publish as PWA/IOS/Android app. Our app has webrtc capability. It seems webrtc is not working natively when we run the app in IOS as the web content is served from capacitor://.

Is there a recommendation and suggestion to use webrtc features with ionic/capacitor apps ? If we can’t we are in a position to switch to other types frameworks like flutter or reactnative. Thanks for your help!

#2

Hello Experts - any comments?

#3

See the discussion in this issue:

#4

Hello sowsan,
I am not an expert but am trying to build a proof-of-concept on ios using webrtc getUserMedia and am having the same issue.
I would like to do this without using a cordova/capacitor plugin since it looks like we are so close to finally having access to this on iOS.

The issue you have mentioned, Apple’s webkit developers picked up on and apparently the fix is in the pipeline. One of the engineers said it should be in iOS 14.5 beta but I was not able to get this working with my IONIC POC.
So it doesn’t appear to have been released yet.
See the following bugzilla threads:
https://bugs.webkit.org/show_bug.cgi?id=208667
https://bugs.webkit.org/show_bug.cgi?id=220184

I am running of physical iOS device running iOS 14.5 beta 6.
I built the app using XCode 12.5 beta 3
Distributed over TestFlight.

Getting this error on the call: TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.addEventListener')

It is now possible to run a full working demo on Chrome on iOS since iOS 14.4 (chrome uses WKWebView):
See https://opentokdemo.tokbox.com/

Can anyone else chime-in with their experience using direct webkit WebRTC in WKWebView for Capacitor App/Ionic on iOS so far?

#5

A follow-up on this.

On my end, I’ve finally figured out what I was doing wrong.
It turns out that getUserMedia is available and functioning on iOS 14.5 Beta 6.

After asking my question in the WebKit bugzilla, it was pointed out that the “scheme” can be anything (in the case of ios it is capacitor://) but the hostname, can only be localhost.

We were overriding the host name with ionic.config.json

"server": {
     "hostname": "xxx"
  }

Removing this configuration and returning to localhost as the default actually resolve the issue.

@sowsan This might help you as well.