在具有多个摄像头的手机上使用浏览器流答案

【问题标题】：Using a browser stream on phones with more than one Camera在具有多个摄像头的手机上使用浏览器流
【发布时间】：2023-01-31 06:28:34
【问题描述】：

我目前有一个使用 QuaggaJS 创建条形码扫描器组件的 React 应用程序。扫描仪适用于只有一个摄像头的手机摄像头。在处理具有多个摄像头的较新手机时，扫描仪无法工作，因为无法对摄像头进行对焦，因此它会在所有摄像头之间不断变化。

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import Quagga from "@ericblade/quagga2";
import adapter from "webrtc-adapter";
import "./BarcodeScanner.css";

const BarcodeScanner = (props) => {
  const navigate = useNavigate();

  useEffect(() => {
    startQuagga();
  }, []);

  if (
    !navigator.mediaDevices &&
    !(typeof navigator.mediaDevices.getUserMedia === "function")
  ) {
    console.log("getUserMedia function is not available in this browser.");
    props.onError("getUserMedia function is not available in this browser");
    return;
  }

  function startQuagga() {
    try{
      Quagga.init(
        {
          inputStream: {
            name: "Live",
            type: "LiveStream",
            target: document.querySelector("#interactive"),
            constraints: {
              width: 640,
              height: 480,
              facingMode: "environment",
              
            },
            
          },
          locate: true,
          decoder: {
            readers: ["upc_reader", "code_128_reader"],
            
          },
        },
        function (err) {
          if (err != null) {
            console.log(err);
            props.onError(err);
            stopScanner();
            return;
          }
          console.log("Initialization finished. Ready to start");
          Quagga.start();
        }
      );
    }catch {
      props.onError("Failed to open camera");
    }
    
  }

  Quagga.onDetected((data) =>  {
    let countDecodedCodes = 0;
    let err = 0;
    for (let id in data.codeResult.decodedCodes) {
      let error = data.codeResult.decodedCodes[id];
      if (error.error != undefined) {
        countDecodedCodes++;
        err += parseFloat(error.error);
      }
    }
    if (err / countDecodedCodes < 0.9) {
      props.onDetected(data.codeResult.code);
      Quagga.stop();
    } 
  });

  const stopScanner = () => {
    console.log("stopping Quagga")
    Quagga.stop();
  };


  useEffect(() => {
    if (props.showBottomSheet === "false") {
      stopScanner();
    } 
  }, [props.showBottomSheet]);

  return <div className="barcode-scanner viewport" id="interactive"></div>;
};

export default BarcodeScanner;```

【问题讨论】：

标签： javascript reactjs camera barcode-scanner quaggajs

【解决方案1】：

我发现通过将分辨率更改为 1281（更改约束中的高度），Quagga 会自动选择高分辨率相机。添加一个框覆盖以引导用户似乎已经解决了这个问题。

【讨论】：