"https://" for the App-Server protocol instead of "capacitor://" on iOS?

Capacitor
1

I’m mega thrilled that iOS 14.3 seems to add finally video capabilities to webRTC for WKWebview-Apps.
So also to ionic and capacitor. That iOS version is only in Beta but I couldn’t really wait and tried to test it with ionic.

Which worked so far (finally!) as expected, and I only had one real problem remaining:
It seems like it need to run on “https://”, even on localhost. By default, Capacitor serves the webapp via the custom protocol “capacitor://”. I saw, that there are options to change the app-server, in fact I actually used that to test my assumption and added a external URL to a SSL secured webspace and webRTC worked.

Heres a simplified example: https://github.com/geckse/ionic-capacitor-webrtc-camera-example

So… naturally I tried:

  "server": {
    "hostname": "localhost",
    "iosScheme": "https",
    "androidScheme": "https",
  }

Which did not work.

So I was wondering: Is there any way to build the App with an App-Server, which is actually “https://localhost” on iOS? (On Android it seemed so far possible)

1 Like
2

no, it’s not possible, https is reserved by the WKWebView for external resources, so can’t be used for internal resources

1 Like
3

Ok I kind of expected something like this. It definitly feelt unusual to require “https://” on localhost for those APIs…

So it might be more a less a problem with webRTC / the navigator.mediaDevices API itself, 'cuz it just can’t work in apps which run WKWebView to access the local app server?

4

Any ticket where we can show our voice ?
Now that https://bugs.webkit.org/show_bug.cgi?id=208667 is fixed, we would need https://bugs.webkit.org/show_bug.cgi?id=138169 to come to a reality.

It really looks like a never ending story.

In electron we can simply declare the protocole as secure: https://www.electronjs.org/docs/api/protocol

Does a Capacitor App which would simply embed a PWA hosted on https would work ?

5

I did indeed test it that way, just to figure out that the https:// was the issue. So, yep, you could do that with capacitor and webRTC will work. Here a capacitor.config…json:

 "server": {
    "iosScheme": "https",
    "androidScheme": "https",
    "url": "https://dev.geckse.de/webrtc",
    "allowNavigation": ["*.geckse.de"]
  }

BUT I’m pretty sure it is against the appstore guidelines (Guideline 4.2, I believe). Beside the bad impact on the app-performance and increased data-traffic for users…

6

Well, I’m also sure you can’t deliver an empty nutshell to the app store.

What I was saying is does the capacitor team plan to support secure custom protocol ?

In order to make the WebRTC features work this is the way.

1 Like
7

This is so frustrating…

I’ve tried navigating the Webview for the one page with WebRTC to an external webhost with “https://”… so I only would have to leave the actual app for this single page.

 // Navigate window or InAppBrowser to external page with WebRTC
 window.open("https://dev.geckse.de/webrtc",'_self', 'location=yes');

It kind of works… but so I just run into another iOS WKWebkit issue: It just keeps asking for permissions every time! (This is by the way also for every PWA the case.)
(https://stackoverflow.com/questions/48847388/how-to-permanently-allow-usage-of-camera-on-trusted-websites-with-ios-safari)

It seems like running from a local file “file://index.html” also works, so I was like: “yeah lets try this”… but as was to be expected you can’t serve a File trough WKWebview with Capacitor without changing the URL to something like “capacitor://assets/file.html”
(https://ionicframework.com/docs/core-concepts/webview)

So… maybe iframes to a secure location might work?

<iframe src="https://dev.geckse.de/webrtc" allow="camera https://dev.geckse.de; microphone https://dev.geckse.de;"  style="height: 100vh; width: 100vw;" >
</iframe>

Nagh! This workaround results just in the " NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission."

I feel like we are here really stuck. Again. :expressionless:

8

Seems this might be getting out of scope for the original topic? Consider opening a new post to discuss webRTC features.

9

I understand that this thread is geared toward making the origin https:// but is it even possible to make the origin http://? I need this for google auth since google’s Authorized JavaScript origins does not take in capacitor:// as a valid input.

I’ve tried setting iosScheme to “http” but it’s still not working.

10

You can set it to http, but you’ll need to make sure you run cap sync to copy over the config file.

11

No, you can’t use http nor https for loading local assets, the only way of using http or https is by loading external resources, which is against Apple TOS and can ban your app if you do it.

12

sorry for the dumb question: how can you set it to http?
can you write an example? thank you!

13

Is there any further information on this topic? Is the only way to access webrtc functionality in an iframe/wkwebview if it’s served externally as a pwa?

Is this best done with angular SSR or is there a better way of going about this?

Is it perhaps possible to use a local web server on the device that gets accessed by the iframe?

14

Did you find any solutions?