Quagga stoped but the camera keeps working on background

[RamonDonadeu]

I'm developing an app where a barcode is read, then an API call is made and if the response is 200 you are redirected to another page...
Okay everything works here but, for some reason, ( The computer, and i suppose the same happens in mobile ), thinks that the camera is still being used. I thought it would happen because i changed the page but not stopped quagga correctly. So I made it so after a minute it automatically stops. The first time it is stopped, any indicator in the computer that indicates the camera is working, it's turned off, but when I start again the camera, and it is automatically stopped, those icons don't turn off

I tried stopping the camera from CameraAccess API, but it stays the same, and I'm worried that the camera keeps working and, in a mobile device, it consumes the battery of the user.
I don't know if there is something related to my code, or it is the library, and I don't know how to replicate it in a codepen as every example I've seen is not working.

<template>
  <div class="scannerComponent col column justify-center items-center full-width">
    <q-btn
      v-if="!isQuaggaRunning"
      label="Scan"
      class="full-width bg-k-secondary q-mb-md q-py-md"
      unelevated
      rounded

      @click="startQuagga"
    />
    <div
      v-show="isQuaggaRunning"
      id="scanner"
      class="full-width flex row items-center justify-center col "
    >
      <video
        class="scanner"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import Quagga, {
  QuaggaJSConfigObject
} from '@ericblade/quagga2'

const emits = defineEmits(['detected', 'getStopCallback'])

onMounted(() => {
  startQuagga()
  emits('getStopCallback', () => {
    Quagga.stop()
    isQuaggaRunning.value = false
  })
})

const quaggaState = reactive<QuaggaJSConfigObject>({
  inputStream: {
    name: 'Live',
    type: 'LiveStream',
    target: '#scanner'
  },
  decoder: {
    readers: ['code_128_reader']
  },
  locator: {
    debug: {
      showCanvas: false
    }
  }
})

function startQuagga () {
  Quagga.init(quaggaState, (err: any) => {
    if (err) {
      return console.error(err)
    }
    Quagga.start()
  })
  isQuaggaRunning.value = true
  automaticallyStopQuagga()
}

const isQuaggaRunning = ref(true)
const QUAGGA_TIMEOUT = 1000
function automaticallyStopQuagga () {
  setTimeout(() => {
    Quagga.stop()
    isQuaggaRunning.value = false
  }, QUAGGA_TIMEOUT)
}

Quagga.onDetected((data: any) => {
  emits('detected', data.codeResult.code)
})

</script>

[github-actions]

Thank you for filing an issue! Please be patient. :-) Dont forget to add yourself to the contributors array in package.json! Have a great day!

[RamonDonadeu]

Well... I was doing my tests in local with 1 second, and in this case it fails a lot, but increasing the value to 10 seconds it looks like it works fine. I don't know... Maybe, if Quagga.stop() is called before Quagga.start(). It crashes somehow?

[RamonDonadeu]

Okay, never mind... I'm an idiot. Because my Stop function was hidding the Quagga canvas, and it was actually displaying images but, as it was hidden, i thought it was not working...