0

我正在使用一个名为 QuaggaJs 的条形码库，我试图让它为相机生成的画布占据 100% 的浏览器屏幕，而没有任何滚动条。

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
  <script src="bootstrap.js"></script>
  <script src="all.js"></script>

  <script src="main.js"></script>

  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="all.css">

</head>

<body>
  <section class="test">
    <div id="container">
      <select id="cameras-selection">
      </select>
      <div id="close-camera-container">
        <i class="far fa-times-circle fa-2x"></i>
      </div>
    </div>
    <div class="form-group has-feedback">
      <input type="text" class="form-control search-box" />
      <i class="fas fa-barcode form-control-feedback glyphicon fa-5x"></i>
    </div>
  </section>
</body>

</html>

js

$(function () {
  $("#close-camera-container").click(function () {
    hideCamera();
  });

  function hideCamera() {
    $("#container").hide();
    $(".form-group").show();
    Quagga.stop();
  }

  function startCamera() {
    Quagga.start();
    $("#container").show();
    $(".form-group").hide();
  }

  function setupCameraSelectList() {
    navigator.mediaDevices.enumerateDevices().then(function (devices) {
      var $cameras = $("#cameras-selection");
      $cameras.empty();
      var videoInputs = devices.filter(function (device) {
        return device.kind === "videoinput";
      });

      if (videoInputs.length == 1) {
        $cameras.append(
          new Option(videoInputs[0].label, videoInputs[0].deviceId)
        );
      } else {
        $cameras.append(new Option("Select a Camera", ""));
        devices.forEach((device) => {
          if(device.deviceId !== "default"){
            $cameras.append(new Option(device.label, device.deviceId));
          }
        });
      }
    });
  }

  $(".fa-barcode").click(function () {

    $("#container").hide();
    Quagga.init(
      {
        inputStream: {
          name: "Live",
          type: "LiveStream",
          target: "#container",
          constraints: {
            width: {min: 320},
            height: {min: 240},
            facing: "environment", // or user
          },
        },
        decoder: {
          readers: ["upc_reader", "ean_reader"],
        },
      },
      function (err) {
        if (err) {
          console.log(err);
          return;
        }

        startCamera();
        setupCameraSelectList();
      }
    );
  });

  Quagga.onDetected(function (result) {
    if (result.codeResult) {
      $(".search-box").val(result.codeResult.code);
      hideCamera();
    }
  });

  Quagga.onProcessed(function (result) {
    var 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: "green",
              lineWidth: 2,
            });
          });
      }

      if (result.box) {
        Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, {
          color: "#00F",
          lineWidth: 2,
        });
      }

      if (result.codeResult && result.codeResult.code) {
        Quagga.ImageDebug.drawPath(
          result.line,
          { x: "x", y: "y" },
          drawingCtx,
          { color: "red", lineWidth: 3 }
        );
      }
    }
  });
});

样式.css

@media only screen and (max-width: 600px) {
  .fa-barcode {
    right: 20px !important;
  }

  #cameras-selection {
    position: absolute;
    pointer-events: visible;
    margin: 10px;
  }

  #close-camera-container {
    position: absolute;
    right: 0;
    margin: 10px;
    pointer-events: visible;
  }
}

#container {
  display: none;
  pointer-events: none;
  width: 320px;
  height: 240px;
}

.test {
  width: 100%;
}

现场演示可以在这里看到。

https://barcodes.z4.web.core.windows.net/

4

0 回答 0