Capacitor: bug: Camera freeze in iOS safari browser (PWA)

Created on 8 Oct 2020 · 12Comments · Source: ionic-team/capacitor

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

ios

Source

dodomui

👍8 👀1

Most helpful comment

Nope, it still not working.

dodomui on 11 Oct 2020

👍2

All 12 comments

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

zsyphon on 9 Oct 2020

👍2

Nope, it still not working.

dodomui on 11 Oct 2020

👍2

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

zsyphon on 12 Oct 2020

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

Me neither.

andrewrains on 21 Oct 2020

Screen Shot 2020-10-31 at 11 36 34
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.

AlexKvazos on 31 Oct 2020

Same I still have yet to resolve the issue.

On Sat, Oct 31, 2020 at 1:37 PM Alex Cavazos notifications@github.com
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
https://github.com/ionic-team/capacitor/issues/3656#issuecomment-719964549,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABRK2Z3NY5PKOY27ZTT5O2LSNRDNNANCNFSM4SIFKL3Q
.

--
mobile: (917) 626-6465

zsyphon on 31 Oct 2020

I can confirm this bug is happening to me too

dacrypt on 5 Nov 2020

Confirming that this bug is happening to me as well.

raevenbauto on 6 Nov 2020

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
})

cyril-petit on 16 Nov 2020

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

zsyphon on 16 Nov 2020

👍1

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.

dotNetkow on 4 Dec 2020

👍1

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:
https://github.com/twilio/twilio-video.js/issues/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:
https://github.com/ionic-team/pwa-elements/issues/66