0

我在 Nuxt 2.15.4 并使用Quagga2。我想创建一个像移动扫描仪一样的扫描仪，其中相机是全屏的，并且有一个蓝色矩形，条形码必须放在里面，扫描后条形码画布上会有一条红线。使用 Quagga.js，我可以area在画布中操作 CSS 和属性，但这会导致 2 个问题：

  1. 实际的扫描区域会被弄乱，我不知道扫描到底发生在哪里。
  2. 成功的红线穿法会搞砸。

此外，在成功扫描后，我需要保留红线并且不会消失，并且一段时间内不会发生扫描（因此我可以决定继续扫描或对结果进行某些操作）。

这是我在应用程序中实现的代码（也需要激活torch和帮助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>
4

0 回答 0