想要使用 Quagga 检测来自两个以上多个摄像头的条形码

编程问答 2022-05-30

问题描述

我尝试使用以下代码，但它仅使用第一个摄像头进行检测，即使在查看其文档后，我也无法找到如何在 Quagga 中将多个摄像头一起提供以进行条码检测的解决方案。实际上，我必须为 4 个摄像头供电，而不仅仅是 2 个。

HTML

<!DOCTYPE html>
<html>
<head>
    <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Multiple Camera</title>
    <script src="assets/plugin/jQuery/jquery-2.1.4.min.js"></script>
    <script src="assets/plugin/captureVideoFrame/capturevideoframe.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js" integrity="sha512-bCsBoYoW6zE0aja5xcIyoCDPfT27+cGr7AOCqelttLVRGay6EKGQbR6wm6SUcUGOMGXJpj+jripMS6i80+kZPw==" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="assets/css/index.css">
</head>
<body>
    <div id="loading">
        Loading
    </div>
    <div id="vidCam">

    </div>
    <div id="result">

    </div>

    <div id="interactive" class="viewport">
        <!-- <video autoplay="true" preload="auto"></video> -->
    </div>
    
    <script type="text/javascript" src="assets/js/index.js"></script>
</body>
</html>

JavaScript

let videoInputs = {};
let webCamData = [];
let classNames = {};

getDevices()

async function getDevices() {
    videoInputs = await navigator.mediaDevices.enumerateDevices();
    getdeviceid();
}

function getdeviceid() {
    if(videoInputs.length > 0){
        let filteredVideoInputs = videoInputs.filter(x=>{
        return x.kind == 'videoinput'
    });
        if (filteredVideoInputs.length>1) {
            for (let i = 0; i < filteredVideoInputs.length; i++) {
                webCamData.push({'label':filteredVideoInputs[i]['label'],'id':filteredVideoInputs[i]['deviceid']});
            }
            // console.log(webCamData);
        } else {
            console.log('No Devices Found.')
        }
    }
    displayDevices(); 
}

function displayDevices() {
  $('#loading').hide();
  let i = 0;
  webCamData.forEach(device => {
    let id = "video"+i;
    $('#vidCam').append('<video id='+id+' autoplay="true">No video Device Found....</video>')
    let video = document.getElementById(id);
    const webCamPromise = navigator.mediaDevices
    .getUserMedia({
      audio: false,video: {
        deviceid: { exact: webCamData[i].id }
      },})
    .then((stream) => {
        video.srcObject = stream;
    });
    i = i+1;
  });
  setTimeout(() => {
    detectFrame();
  },5000);
}

async function detectFrame() {
  let allPredictions = [];
      Quagga.init({
        inputStream : {
          name : 'Live',type : 'LiveStream',target: document.querySelector('#vidCam'),// constraints: {
          //     width: 480,//     height: 320,//     facingMode: "environment"
          // },},decoder : {
          readers : ['ean_reader']
        }
      },function(err) {
          if (err) {
              console.log(err);
              return
          }
          console.log('Initialization finished. Ready to start');
          Quagga.start();
          Quagga.onDetected(function(result) {                              
            var last_code = result.codeResult.code;                   
                console.log(last_code); 
         });                  
      }); 

  console.log("render prediction")

};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

barcodebarcodebarcodebarcode-scannerjavascriptquaggaquaggajs