Question

我正在使用此插件为浏览器创建QR码扫描程序

它工作正常，除了一个让每件事情都很糟糕的错误，扫描我的键盘键或我的家用垫子也会显示一些中文字符，为什么我选择这个插件几乎可以在除IOS Chrome，Firefox之外的每个浏览器中运行

这是我的代码

      var video = document.createElement("video");
        var canvasElement = document.getElementById("canvas");
        var canvas = canvasElement.getContext("2d");
        var loadingMessage = document.getElementById("loadingMessage");
        var outputContainer = document.getElementById("output");
        var outputMessage = document.getElementById("outputMessage");
        //var outputData = document.getElementById("outputData");
        //var outputData = document.getElementById("outputData");

        function drawLine(begin, end, color) {
          canvas.beginPath();
          canvas.moveTo(begin.x, begin.y);
          canvas.lineTo(end.x, end.y);
          canvas.lineWidth = 4;
          canvas.strokeStyle = color;
          canvas.stroke();
        }

        // Use facingMode: environment to attemt to get the front camera on phones
        navigator.mediaDevices.getUserMedia({ video: { facingMode: { exact: "environment" } } }).then(function(stream) {
          video.srcObject = stream;
          video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
          video.play();
          requestAnimationFrame(tick);
          localStream = stream;
        })
        .catch(function(err) {
            console.log(err);
              /* handle the error */
            loader(false)

        });

        function tick() {
              loadingMessage.innerText = "⌛ Loading video..."
              if (video.readyState === video.HAVE_ENOUGH_DATA) {
                loadingMessage.hidden = true;
                canvasElement.hidden = false;
                outputContainer.hidden = false;

                canvasElement.height = video.videoHeight;
                canvasElement.width = video.videoWidth;
                canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
                var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
                var code = jsQR(imageData.data, imageData.width, imageData.height);
                if (code) {
                  drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
                  drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
                  drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
                  drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
                  outputMessage.hidden = true;
                  if(code.data != "" && code.data != undefined){
                      var dataQR = "qrData=" + code.data;
                      document.cookie = dataQR;

                      frmAction('serviceid',true,false);
                dataQR)
                      alert(code.data);
                      vidOff();

                  } else {
                      var dataQR = "qrData=";
                      document.cookie = dataQR;
                      document.cookie = "toastMsg=Yes";
                     frmAction('serviceid',true,false);
                      vidOff();

                  }

                } else {    
                  outputMessage.hidden = false;
                }
              }
              requestAnimationFrame(tick);
              function vidOff() {
                    video.pause();
                    video.src = "";
                    video.srcObject.getVideoTracks().forEach(track => track.stop());
                    console.log("camera off");
                }
            }

如何使qrcode扫描程序只扫描qr代码而不是其他事情

0 个答案: