bug: Camera freeze in iOS safari browser (PWA)

[dodomui]

Bug Report

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 2.4.2
  @capacitor/core: 2.4.2
  @capacitor/android: 2.4.2
  @capacitor/electron: 2.4.2
  @capacitor/ios: 2.4.2

Installed Dependencies:

  @capacitor/ios 2.4.2
  @capacitor/core 2.4.2
  @capacitor/android 2.4.2
  @capacitor/cli 2.4.2
  @capacitor/electron not installed

[success] Android looking great! 👌
  Found 11 Capacitor plugins for ios:
    @capacitor-community/apple-sign-in (0.0.12)
    @capacitor-community/facebook-login (1.0.2)
    @capacitor-community/firebase-crashlytics (0.3.0)
    @capacitor-community/firebase-remote-config (0.1.3)
    @capacitor-community/http (0.2.1)
    @capacitor-community/twitter (1.0.1)
    @codetrix-studio/capacitor-google-auth (2.1.1)
    capacitor-apple-login (0.0.7)
    capacitor-firebase-auth (2.3.2)
    cordova-plugin-compat (1.2.0)
    cordova-plugin-qrscanner (3.0.1)
[success] iOS looking great! 👌

Platform(s)

iOS Safari (PWA)

Current Behavior

Camera freeze after camera launch for 1-2 seconds.
Need press on the safari video recording button twice (disable and enable back the video recording) to make it working properly.

Expected Behavior

It should be work as normal.

Code Reproduction

Other Technical Details

npm --version output:
6.14.8
node --version output:
v12.16.1
pod --version output (iOS issues only):

Additional Context

[zsyphon]

@dodomui have you made any progress on this issue? I am having the same problem

[dodomui]

Nope, it still not working.

[zsyphon]

@dodomui Unfortunately, I have not made any progress either.

[andrewrains]

@dodomui Unfortunately, I have not made any progress either.

Me neither.

[AlexKvazos]

I connected my iPhone to Safari inspector to see if an error was throwing to the console and nothing shows up when the stream freezes.

[zsyphon]

Same I still have yet to resolve the issue.

…

On Sat, Oct 31, 2020 at 1:37 PM Alex Cavazos ***@***.***> wrote: [image: Screen Shot 2020-10-31 at 11 36 34] <https://user-images.githubusercontent.com/4448627/97785886-5a948480-1b6d-11eb-89dd-109e7d0545b1.png> I connected my iPhone to Safari inspector to see if an error was throwing to the console and nothing shows up when the stream freezes. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#3656 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRK2Z3NY5PKOY27ZTT5O2LSNRDNNANCNFSM4SIFKL3Q> .

-- mobile: (917) 626-6465

[dacrypt]

I can confirm this bug is happening to me too

[raevenbauto]

Confirming that this bug is happening to me as well.

[cyril-petit]

Same here, somebody has any idea ? It's a pretty bad bug
here are some details :
npm: '6.14.5',
"@capacitor/core": "^2.4.2",
using :
const image = await Camera.getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.Base64,
encodingType: 1,
mediaType: 0
})

[zsyphon]

@jcesarmobile have you had a moment to look at this issue? Thank you for any guidance you can provide!!

[dotNetkow]

Note that this is likely an issue with PWA Elements, which Capacitor Camera plugin uses when running on the web. Please don't open other issues, there's already several.

Can confirm running Ionifits app in Safari browser or as installed PWA.

Specs:

• iOS 14.2 (latest, currently)
• PWA Elements v3.0.1
• Cap iOS 2.4.3 (2.4.4. is latest)
• Ionifits app code: https://github.com/ionic-team/ionifits
• On the web: https://ionifits.ionicframework.com
• Camera usage code (getPhoto): view this line

To repro, open https://ionifits.ionicframework.com on an iOS device. On login screen, take SKIP button, tap Expenses tab, tap FAB button at bottom to open modal, then tap the Camera FAB to open the device camera. The front facing camera loads and the image freezes right away. after about 2 seconds, the camera window turns to black.

Running on the web (desktop), get this error in console: Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at o.initPhotoCapabilities

separate note @cyril-petit - we highly recommend using CameraResultType.Uri (File URI) instead of base64 to capture images for the best performance. iOS devices these days take incredibly high quality photos, so loading that much base64 data into memory can be too much, even causing the app to crash. See Ionifits or the official First App tutorial for ways to use File URI.

[theproducer]

I was able to repro this in 14.2, and after some investigation, the camera freezes seem to be a bug in iOS Safari. Others are reporting similar issues:
twilio/twilio-video.js#1281
https://developer.apple.com/forums/thread/667453

14.3 RC was released today and after some tests the problem seems to be resolved. Rumor is 14.3 will go live next week.

Running on the web (desktop), get this error in console: Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at o.initPhotoCapabilities

That's a separate issue we are tracking here:
ionic-team/pwa-elements#66

[imhoffd]

Anyone able to verify this is fixed with iOS 14.3?

[AlexKvazos]

Yes, no longer an issue with 14.3.

…

On 13 Jan 2021 15:54 -0600, Dan Imhoff ***@***.***>, wrote: Anyone able to verify this is fixed with iOS 14.3? — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.