how to create a barcode scanner with quagga with fixed scanning canvas

Question

I'm on Nuxt 2.15.4 and using Quagga2. I want to create a scanner like mobile scanners where the camera is full screen and there is a blue rectangle that the barcode must be placed inside of, and after scanning there will be a red line through the barcode canvas. With Quagga.js I can manipulate the CSS and area property in canvas but it cause 2 problems:

1. The actual scanning zone will be messed up and I don't know where the scanning exactly happens.
2. The successful red line-through style will be messed up.

Also, after a successful scan I need the red line-through to remain and not disappear and no scanning happen for a period of time (so I can decide to continue scanning or do something with result).

Here is the code I implemented on in app (also need help on activating torch and zoom):

<template>
    <section id="container" class="container">
      <div id="interactive" class="viewport"></div>
      {{code}}
    </section>
</template>

<script>
import Quagga from '@ericblade/quagga2';
export default {
  data() {
    return {
      code:[]
    };
  },
  methods:{
    async checkDevice() {
      let md = navigator.mediaDevices;
      if (!md || !md.enumerateDevices) return false;
      const devices = await navigator.mediaDevices.enumerateDevices();
      return devices.some((device) => "videoinput" === device.kind);
    },
    initQuagga(){
      Quagga.init({
        inputStream : {
          name : "Live",
          type : "LiveStream",
          area: {
            top: "0%",
            right: "0%",
            left: "0%",
            bottom: "0%",
          },
        },
        locate: false,
        decoder : {
          readers : [
            "ean_reader",
          ],
        }
      },(err)=>{
        if(err){
          return
        }
        // this.checkCapabilities();
        this.startQuagga()
      });
    },
    // checkCapabilities(){
    //   var track = Quagga.CameraAccess.getActiveTrack();
    //   var capabilities = {};
    //   if (typeof track.getCapabilities === 'function') {
    //       capabilities = track.getCapabilities();
    //   }
    //   this.applySettingsVisibility('zoom', capabilities.zoom);
    //   this.applySettingsVisibility('torch', capabilities.torch);
    // },
    // applySetting: function(setting, value) {
    //     var track = Quagga.CameraAccess.getActiveTrack();
    //     if (track && typeof track.getCapabilities === 'function') {
    //         switch (setting) {
    //         case 'zoom':
    //             return track.applyConstraints({advanced: [{zoom: parseFloat(value)}]});
    //         case 'torch':
    //             return track.applyConstraints({advanced: [{torch: !!value}]});
    //         }
    //     }
    // },
    startQuagga(){
      Quagga.start()
      Quagga.onProcessed(function (result) {
        let drawingCtx = Quagga.canvas.ctx.overlay,
          drawingCanvas = Quagga.canvas.dom.overlay;
        if (result) {
          if (result.boxes) {
            drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
            result.boxes.filter(function (box) {
              return box !== result.box;
            }).forEach(function (box) {
              Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
            });
          }
          if (result.box) {
            Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#008", lineWidth: 2});
          }
      
          if (result.codeResult && result.codeResult.code) {
            Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
          }
        }
      })
      Quagga.onDetected(this.onDetected);
    },
    onDetected(data) {
      let barCodeData = data.codeResult.code;
      console.log(barCodeData);
    },
  },
  async mounted(){
    let data = await this.checkDevice();
    if (data) {
      this.initQuagga();
    }
  },
  beforeDestroy(){
    Quagga.stop()
  }
}
</script>

<style lang="scss">
#container {
  width: 640px;
  margin: 20px auto;
  padding: 10px;
}

#interactive.viewport {
  width: 640px;
  height: 480px;
}


#interactive.viewport canvas, video {
  float: left;
  width: 640px;
  height: 480px;
}

#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
  margin-left: -640px;
}
</style>