Camera appears and disappears...

[marcelo-jrkiko]

Describe the bug When i trigger the startScan, the camera view appears, but soon after its disappears and all webview is reloaded..

To Reproduce Just run the startScan

document.querySelector('body')!.classList.add('scanner-active'); await BarcodeScanner.checkPermission({force: true});

//  await BarcodeScanner.hideBackground();

  const res = await BarcodeScanner.startScan();

  if(res.hasContent) {
    this.codigoDigitado = res.content!;        
    this.onAdicionarProduto();
  }

  document.querySelector('body')!.classList.remove('scanner-active');

Screenshots Video of the issue

Version v3.0.0

• OS: Android 11
• Runnig In IONIC with Capacitor 4.3.0

[thegnuu]

I am not able to reproduce it with my available test devices, it might be related to the camera of your device or something. Unfortunately I am not really able to help you if I am not able to reproduce the behaviour on my end...

For me it looks like the camera in the video starts properly, but it seems to have issues adapting to the current environment lighting, since the image is never completely faded out, only the image brightness changes.

Have you tested it with another device?

[marcelo-jrkiko]

I haven't tested it, I don't have another device to test, some logs of the logcat:

12-14 10:14:34.529  9320  9320 V Capacitor/Plugin: To native (Capacitor plugin): callbackId: 97890976, pluginId: BarcodeScanner, methodName: checkPermission
12-14 10:14:34.529  9320  9320 V Capacitor: callback: 97890976, pluginId: BarcodeScanner, methodName: checkPermission, methodData: {"force":true}
12-14 10:14:34.553  9320 10416 D Capacitor: Handling local request: http://localhost/assets/icon/favicon.png
12-14 10:14:34.562  9320 10416 D Capacitor: Handling local request: http://localhost/vendadireta/carrinho?ion-input-5=&ion-input-6=
12-14 10:14:34.570  9320  9320 V Capacitor/Plugin: To native (Capacitor plugin): callbackId: 97890977, pluginId: BarcodeScanner, methodName: hideBackground
12-14 10:14:34.570  9320  9320 V Capacitor: callback: 97890977, pluginId: BarcodeScanner, methodName: hideBackground, methodData: {}
12-14 10:14:34.597  9320  9320 I Capacitor/Console: File: http://localhost/ - Line 228 - Msg: undefined
12-14 10:14:34.602  9320  9320 V Capacitor/Plugin: To native (Capacitor plugin): callbackId: 97890978, pluginId: BarcodeScanner, methodName: startScan
12-14 10:14:34.603  9320  9320 V Capacitor: callback: 97890978, pluginId: BarcodeScanner, methodName: startScan, methodData: {}
12-14 10:14:34.648  9320 10416 D Capacitor: Handling local request: http://localhost/js/chunk-vendors.b9d21203.js
12-14 10:14:34.650  9320 10459 D Capacitor: Handling local request: http://localhost/js/app.4db677f6.js
12-14 10:14:34.651  9320 10430 D Capacitor: Handling local request: http://localhost/css/chunk-vendors.f457f5de.css
12-14 10:14:34.652  9320 10416 D Capacitor: Handling local request: http://localhost/css/app.9e67e52a.css
12-14 10:14:34.732  9320  9320 I Capacitor/Console: File: http://localhost/vendadireta/carrinho?ion-input-5=&ion-input-6= - Line 2587 - Msg: onscript loading complete
12-14 10:14:34.743  9320  9320 V Capacitor/Plugin: To native (Cordova plugin): callbackId: Device1333199086, service: Device, action: getDeviceInfo, actionArgs: []
12-14 10:calhost/js/541.c072c52c.js
12-14 10:14:36.782  9320 10430 D Capacitor: Handling local request: http://localhost/js/544.20f64eb0.js

It looks like the camera is still running, but the IONIC reloads and became on top of the camera view.

12-14 10:16:23.014   669  8411 I Camera2-Parameters: eisMode = 0
12-14 10:16:23.015   669  8411 I Camera2-Parameters: eisMode = 0
12-14 10:16:23.017  9320  9320 I CameraPreview: Starting preview
12-14 10:16:23.018  9320 10680 D CameraInstance: Starting preview
12-14 10:16:23.020   669  8411 I Camera2-Parameters: eisMode = 0
12-14 10:16:23.021   669  8411 E Camera3-Device: configureStreams: Stream 1: DataSpace override not allowed for format 0x21
12-14 10:16:23.024   669  8411 D Camera3-Device: Set real time priority for request queue thread (tid 11223)
12-14 10:16:23.031   669 11223 I CameraProviderManager: Camera device device@3.3/legacy/0 torch status is now NOT_AVAILABLE
12-14 10:16:23.031   669 11223 I CameraService: onTorchStatusChangedLocked: Torch status changed for cameraId=0, newStatus=0
12-14 10:16:23.335   555 11214 I Cam3OEMIf: 4521, receivePreviewFrame: Launch Camera Time:404(ms).
12-14 10:16:23.339   555   922 I Cam3OEMIf: 3374, stopPreviewInternal: E mCameraId=0
12-14 10:16:23.363   669  8411 E Camera3-Device: configureStreams: Stream 1: DataSpace override not allowed for format 0x21
12-14 10:16:23.363   669  8411 E Camera3-Device: configureStreams: Stream 2: DataSpace override not allowed for format 0x23
12-14 10:16:23.369   669  8411 D Camera3-Device: Set real time priority for request queue thread (tid 11223)
12-14 10:16:23.370   669  8411 E Camera2-Metadata: unlock: Can't unlock a non-locked CameraMetadata!

[marcelo-jrkiko]

Addendum

Include preventDefault and stopPropagation in the Button Click Event code:

 e.preventDefault();
      e.stopPropagation();

      await BarcodeScanner.checkPermission({ force: true });

      await BarcodeScanner.hideBackground();
      document.querySelector('body')!.classList.add('scanner-active');

      const res = await BarcodeScanner.startScan();

      if (res.hasContent) {
        this.codigoDigitado = res.content!
        this.onAdicionarProduto();

      document.querySelector('body')!.classList.remove('scanner-active');

Now the ionic doesnt reload, however the camera does not appear... Console log:

VM4:243 native BarcodeScanner.checkPermission (#99121081)
VM4:250 ObjectcallbackId: "99121081"methodName: "checkPermission"options: {force: true}pluginId: "BarcodeScanner"[[Prototype]]: Object
VM4:217 result BarcodeScanner.checkPermission (#99121081)
VM4:228 Objectgranted: true[[Prototype]]: Object
VM4:243 native BarcodeScanner.hideBackground (#99121082)
VM4:250 ObjectcallbackId: "99121082"methodName: "hideBackground"options: {}pluginId: "BarcodeScanner"[[Prototype]]: Object
VM4:217 result BarcodeScanner.hideBackground (#99121082)
VM4:228 undefined
VM4:243 native BarcodeScanner.startScan (#99121083)
VM4:250 ObjectcallbackId: "99121083"methodName: "startScan"options: {}pluginId: "BarcodeScanner"[[Prototype]]: Object

My HTML tag:

<html lang="en" class="ion-ce plt-android plt-tablet plt-cordova plt-capacitor plt-mobile plt-hybrid md" mode="md" style="background-color: transparent;"><head>

Cant find the CAMERA div.

[thegnuu]

Thank you for providing additional information. But as I said, I am not able to reproduce it on my end which makes it hard to help you in that case.

The only way I am able to check and debug it is with an example repo which helps me to reproduce your issue, if I have code that behaves in this way I might be able to reproduce it with one of my devices and help you find a solution.

My test repository based on Ionic/Angular works as expected.

[marcelo-jrkiko]

Well I solved it, I don't understand exactly where the problem is. The code was being triggered through the 'click' of a button that was inside the view, inside a IonContent element. As a test, I created a new view, without the IonContent. In this view in the "mounted" method , i call after a certain time for the "startScan". After scanning, I save the data and send a 'router.push' to the previous view. So I managed to create a mechanism to use the scanner.

And it works. I just need to push a route to this view , then its scans and go back to my original view.

<template>

</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
import { BarcodeScannerRuntime } from '@/core/BarcodeScanner';
import { useRouter } from 'vue-router';

export default defineComponent({
    name: 'BarcodeScanner',
    setup() {
        const router = useRouter();
        return { router };
    },
    mounted() {
        setTimeout(() => {
            this.doScan().then(() => {
                this.router.push(BarcodeScannerRuntime.LastPage!);
            });
        }, 200);
    },
    methods: {
        async doScan() {
            await BarcodeScanner.checkPermission({ force: true });

            await BarcodeScanner.hideBackground();
            document.querySelector('body')!.classList.add('scanner-active');

            const res = await BarcodeScanner.startScan();
            BarcodeScannerRuntime.HasScanned = res.hasContent;
            BarcodeScannerRuntime.Data = res.content;

            document.querySelector('body')!.classList.remove('scanner-active');
        },
    }
});
</script>

Now I'm curious to know what component of the Ionic was causing problems...

[thegnuu]

Glad you found a solution for your issue. This seems indeed weird, my setup with the ionContent is more or less the same, but I am using angular and not vue.

Sorry I was not able to help you, I have no idea what might cause an issue like this.