this.codeReader.reset() does not seem to turn off webcam.

[kodecharlie]

I've set up a simple vueJS (3.x) component for barcode-scanning:

<template>
  <StreamBarcodeReader v-if="isMounted" @decode="onDecode" @loaded="onLoaded"></StreamBarcodeReader>
</template>

<script>
import { StreamBarcodeReader } from "vue-barcode-reader"

export default {
  name: "ScanBarcode",
  components: {
    StreamBarcodeReader
  },
  methods: {
    onDecode(result) {
      console.log(result);
    },
    onLoaded() {
      console.log("load");
    }
  },
  data() {
    return {
      isMounted: false
    }
  },
  mounted() {
    this.isMounted = true
  },
  unmounted() {
    this.isMounted = false
  }
}
</script>

<style scoped>
</style>

My expectation is that v-if results in component-destruction when the boolean it tests becomes false. In particular, I would expect the logic in StreamBarcodeReader.beforeDestroy to be called when v-if condition becomes false:

    beforeDestroy() {
        this.codeReader.reset();
    },

I believe this sort of happens: namely, it appears the StreamBarcodeReader component in fact is destroyed, but that the reset() does not result in my webcam being turned off.

Can you make sure that the webcam is turned off when StreamBarcodeReader component is destroyed?

BTW, I am on macOS Big Sur (11.6) and Chrome 94.x.

[alirezaalavi87]

Hi, I had this same problem. I looked into the files and saw the reset() method is in beforeUnmount() hook. but there is no such hook as beforeUnmount. changed it to beforeDestroy() and it got fixed i will send a pull request .

[SilvestreRamirez]

Hi, this works for me

<div class="barcode-scanner-container"> <StreamBarcodeReader ref="scanner" @decode="onDecode" @loaded="onLoaded" ></StreamBarcodeReader> </div>

methods: { onDecode(text) { this.code = text; console.log(Decode text from QR code is ${text}); }, onLoaded() { console.log(Ready to start scanning barcodes`); }, stopBarcodeScanner() { // Suponiendo que el componente StreamBarcodeReader tiene un método stop() // que detiene el stream del lector de códigos de barras this.$refs.scanner.codeReader.stream .getTracks() .forEach(function (track) { track.stop(); }); }, },

`

beforeDestroy() { this.stopBarcodeScanner(); },