WebRTC

[Ionitron]

Plugin Request

Name: WebRTC Package: @capacitor-community/webrtc

Platform(s)

iOS

Existing Solutions

Description

Ability to access MediaDevices.getUserMedia() natively for iOS to work with WebRTC.

[Ionitron]

Original request: https://github.com/ionic-team/capacitor/issues/2944

[danielehrhardt]

This would be nice!

[phairow]

👍

[imhoffd]

@phairow Upvote the original post so people can sort by it.

[phairow]

Sure thing

[bizready]

it would be awesome to have this pugin

[RobbieTheWagner]

As far as I can tell, without this there is no way to use getUserMedia with capacitor on iOS, correct? This would be great to have!

[bizready]

It is not just getUserMedia(). I am also getting an error with navigator.mediaDevices.addEventListener

[RobbieTheWagner]

Yeah navigator.mediaDevices does not exist, so all of its methods are not usable currently.

[bizready]

Interesting. The same code works fine in a browser environment or maybe it is not called in a browser environment. When deploying the code mobile, I get the error TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.addEventListener'). Could you please point me to the link regarding navigator.mediaDevices that it does not exist? The code is part of the AWS Chime library so that I can report?

[RobbieTheWagner]

@bizready it's a limitation of iOS. This issue here is the only possible fix. It has to be supported in Capacitor since iOS does not have it by default. There is a Cordova plugin, but it doesn't work with Capacitor. https://github.com/cordova-rtc/cordova-plugin-iosrtc

[bizready]

Thanks @rwwagner90. I am experimenting with using https://github.com/cordova-rtc/cordova-plugin-iosrtc and it is very promising!

[RobbieTheWagner]

@bizready as I mentioned, that Cordova plugin does not work with Capacitor.

[bizready]

@rwwagner90 - I am using Quasar framework (one code base for web, mobile, and desktop). I can easily build code for Cordova or Capacitor. That way, I am in a good situation!

[RobbieTheWagner]

@bizready sure, but then you are not using capacitor and this feature request is for capacitor. Those of us using capacitor are still stuck.

[bizready]

For the time being (POC), I am ok in using Cordova. I want to use Capacitor. I do know that Capacitor can use Cordova plugins, that does not mean that isoRTC can be readily used in Capacitor. I am thinking that with some custom code, may be isoRTC can be used in Capacitor until we have Capacitor specific plugin?

[pszalanski]

There is actually a bug filed in the webkit bugtracker: https://bugs.webkit.org/show_bug.cgi?id=208667

If you want to push Apple to fix that issue you can follow the instructions in the comments to show Apple that you are affected by this missing feature.

[RobbieTheWagner]

I am thinking that with some custom code, may be isoRTC can be used in Capacitor until we have Capacitor specific plugin?

I saw a comment somewhere from the Capacitor team saying it won't work. I forget where I saw it.

[phairow]

I have it(iosRTC) working with capacitor. Only odd issue is having to manage the binary within node_modules folder so it gets picked up on sync.

[RobbieTheWagner]

@phairow how did you get it working?

[phairow]

https://github.com/phairow/pubnubchatrcionic You can see my repo. You will see most of the settings I had to do documented in custom/publish.md. The final step was to disable bitcode for the app.

[gabsgasps]

This plugin would be nice!

[CloudROMB]

In the era of Zoom and telemedicine the WebRTC plugin is really necessary.

[imhoffd]

navigator.mediaDevices.getUserMedia is implemented in iOS 14.3 beta according to this: https://webkit.org/blog/11353/mediarecorder-api/

[rudyhadoux]

Hi, Is there a way to get a video stream (MediaStream) from Capacitor Camera.getPhoto( ) ?

[7freaks-otte]

@dwieeb From my current tests it seems that navigator.mediaDevices.getUserMedia is indeed implemented in iOS 14.3. and my app correctly asks for the Camera permissions. But getUserMedia still fails with NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

According to https://bugs.webkit.org/show_bug.cgi?id=208667 the reason is that capacitor uses the custom URL scheme capacitor://, I tried to change it do https://localhost:3000 via capacitor.config.json but while I was able to change the host to localhost:3000 the scheme capacitor:// does not seem be changeable on iOS.

[imhoffd]

@7freaks-otte Looks like that's being addressed: https://github.com/WebKit/WebKit/commit/ff60f0a9b3a455b56adb95dbab14d404cb024152

[iometrine]

Hello,

I'm using ionic 5 with capacitor and angular9. and i have the same problem as @7freaks-otte. When i build the app on ios, I reveice an "notallowederror" at the line navigation.getUsermedia. If i understand well, it doesn't work natively and any plugin works with capacitor.

So today there is no way today to get the stream with capacitor ?

[danielehrhardt]

Hello,

I'm using ionic 5 with capacitor and angular9. and i have the same problem as @7freaks-otte. When i build the app on ios, I reveice an "notallowederror" at the line navigation.getUsermedia. If i understand well, it doesn't work natively and any plugin works with capacitor.

So today there is no way today to get the stream with capacitor ?

https://github.com/cordova-rtc/cordova-plugin-iosrtc

[iometrine]

Doest https://github.com/cordova-rtc/cordova-plugin-iosrtc work with capacitor ?

[danielehrhardt]

Doest https://github.com/cordova-rtc/cordova-plugin-iosrtc work with capacitor ?

Yes it does work with Capacitor. https://github.com/cordova-rtc/cordova-plugin-iosrtc/blob/master/docs/Building.md#capacitor

[iometrine]

Thank you for your answer @danielehrhardt butI didn't succes to install it on my project

Can i use this plugin ? https://www.npmjs.com/package/cordova-plugin-iosrtc-capacitor

Or how can i install this plugin on my ionic capacitor project ? Do i need to build or something else ?

[danielehrhardt]

Thank you for your answer @danielehrhardt butI didn't succes to install it on my project

Can i use this plugin ? https://www.npmjs.com/package/cordova-plugin-iosrtc-capacitor

Or how can i install this plugin on my ionic capacitor project ? Do i need to build or something else ?

It is on your side. I have it running since several months now in my ionic capacitor app.

[iometrine]

I installed it like that npm install cordova-plugin-iosrtc-capacitor

and i put this code in my podfile:

post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |config|

Disable bitcode in order to support cordova-plugin-iosrtc

  config.build_settings['ENABLE_BITCODE'] = 'NO'
end

end end

Did I miss something ?

[7freaks-otte]

@iometrine I haven't tried "cordova-plugin-iosrtc-capacitor" yet, so I'm just guessing until I have time to do so: As far as I understand, the plugin exposes the iOS workaround as cordova.plugins.iosrtc, so don't forget to call cordova.plugins.iosrtc.registerGlobals(); to be able to use the standard functions like navigator.mediaDevices.getUserMedia()

[iometrine]

My problem is when i try to install the plugin iosrtc npm i cordova-plugin-iosrtc

i can't pass the first command: node ios_arch.js --extract I have an error

for information i try to follow this: https://github.com/cordova-rtc/cordova-plugin-iosrtc/blob/master/docs/Building.md#capacitor

[7freaks-otte]

I would skip this step for now as you only need to do it before Apple App Store submission. Try to get it running on a real device first.

[danielehrhardt]

I would skip this step for now as you only need to do it before Apple App Store submission. Try to get it running on a real device first.

I never did run this command.

[iometrine]

when i install cordova-plugin-iosrtc in my capacitor project with npm install cordova-plugin-iosrtc i've got many errors "undefined symbol" when i build on ios like _objcclass$_RTCMediaConstraints

Can you help me ?

[iometrine]

I 've got this error: Could not find or use auto-linked framework 'WebRTC'

[iometrine]

any idea ?

[iometrine]

hello,

@danielehrhardt @7freaks-otte apparently cordova-plugin-iosrtc doesn't work on capacitor.

https://github.com/ionic-team/capacitor/discussions/3066

[danielehrhardt]

hello,

@danielehrhardt @7freaks-otte apparently cordova-plugin-iosrtc doesn't work on capacitor.

https://github.com/ionic-team/capacitor/discussions/3066

It does work 🙈

[iometrine]

@danielehrhardt when i install it and when i build on xcode i've got many errors "undefined symbol" like objc_class$_RTCMediaConstraints So what did you do ?

[iometrine]

@danielehrhardt can you say something constructive except that it works?

[danielehrhardt]

https://github.com/danielehrhardt/ionic-capacitor-iosrtc-test use a real device no emulator to test

[iometrine]

thank you @danielehrhardt it works now. I compared your project with mine, and finally i found what was the difference. I just needed your podfile :) It's weird because when i tried to build with the part of code indicated in the doc, it doesn't work: https://github.com/cordova-rtc/cordova-plugin-iosrtc/blob/master/docs/Building.md#cocoapods

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      # Disable bitcode in order to support cordova-plugin-iosrtc
      config.build_settings['ENABLE_BITCODE'] = 'NO'
    end
  end
end

But with the code in your podfile it works like a charm:

def disable_bitcode_for_target(target)
  target.build_configurations.each do |config|
    config.build_settings['ENABLE_BITCODE'] = 'NO'

    remove_cflags_matching(config.build_settings, ['-fembed-bitcode', '-fembed-bitcode-marker'])
  end
end

def remove_cflags_matching(build_settings, cflags)
  existing_cflags = build_settings['OTHER_CFLAGS']

  removed_cflags = []
  if !existing_cflags.nil?
    cflags.each do |cflag|
      existing_cflags.delete_if { |existing_cflag| existing_cflag == cflag && removed_cflags << cflag }
    end
  end

  if removed_cflags.length > 0
    build_settings['OTHER_CFLAGS'] = existing_cflags
  end
end

post_install do |installer|
  project_name = Dir.glob("*.xcodeproj").first
  project = Xcodeproj::Project.open(project_name)
  project.targets.each do |target|
    disable_bitcode_for_target(target)
  end
  project.save

  installer.pods_project.targets.each do |target|
    disable_bitcode_for_target(target)
  end

  installer.pods_project.save
end

Now I can acces to the stream of the camera with navigator.getUserMedia I've added this line before the export of my class declare var cordova: any; and this line on the constructor cordova.plugins.iosrtc.registerGlobals();

Thank you again for your help :)

[karen1au]

@imhoffd Hi! I'm still seeing NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. in my app, I'm on capacitor 2.4.6, do I need to manually update anything? Thanks!

[iometrine]

are you using cordova or capacitor? Did you success to install the plugin cordova-plugin-iosrtc ? Did you well register cordova.plugins.iosrtc.registerGlobals(); to override the native js function getUserMedia ?

Do you use navigator.getUserMedia or navigator.mediaDevices.getUserMedia?

We need futher information if you want we help you.

[karen1au]

@iometrine Thanks for getting back! I'm using Capacitor 2.4.6 and codrova-plugin-iosrtc is working for me, just wanna confirm if the webkit issue is actually fixed as imhoffd mentioned, so we can do without the plugin.