CameraResultType is undefined only in mobile

Capacitor
1

Hi, I got a strange bug. When I develop on my local browser, CameraResultType is defined, and my code works exactly as I want.
But I run it in capacitor on android 10 (Galaxy a51), this variable is undefined.
The console says : "TypeError: Cannot read property 'base64' of undefined"

I don’t know because how can it work on my browser but not in the app.

async function initIA() {
    const {CameraResultType} = await Capacitor.Plugins
    console.log(CameraResultType);
    const Camera = Capacitor.Plugins.Camera;
    const image = await Camera.getPhoto({
    quality: 80,
    allowEditing: true,
    resultType: CameraResultType.base64
    })
    .then(CameraPhoto => {
      const ImgFromHtml = document.getElementById("previewIA")
      ImgFromHtml.src = `data:image/png;base64, ${CameraPhoto.base64String}`
      DetectFromAI(ImgFromHtml)

    })

To import Capacitor, I don’t use import { Plugins, CameraResultType } from '@capacitor/core'
But <script src="capacitor.js"></script>

What npx cap doctorreturn :

Capacitor Doctor

Latest Dependencies:

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

Installed Dependencies:

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

[success] Android looking great! 👌

Thanks to anyone reading or answering
Have a great day

2

I may be should try to figure out what browser capacitor is running to ?
What’s the difference between Webview and Firefox ?

Or maybe Capacitor is not creating this element because he could not open the camera. I don’t know. Still investigating

3

When using capacitor.js file instead of using imports, the CameraResultType and other plugin types are not available.
You’ll need to check the types and check their value, in example CameraResultType.base64 is 'base64', so resultType: 'base64' should work.

2 Likes
4

You’re awesome. Thank you a lot.

5

------ Versions: ------
Ionic: 6.17.1
“@ionic/angular”: “^6.0.0”,
“@capacitor/camera”: “^4.0.1”,

Since you used await in the method Camera.getPhoto({…}) using the .then(…) method is not so necessary. This work fine for me:

…
import { Camera, CameraResultType } from ‘@capacitor/camera’;
…
public async initIA(): Promise {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Base64
});

console.log(`img base64: ${image.base64String}`);

let ImgFromHtml = document.getElementById("previewIA")
ImgFromHtml.src = `data:image/png;base64,${image.base64String}`
DetectFromAI(ImgFromHtml)

}