Question

我已经构建了一个Web应用程序（使用reactjs），该应用程序可以检测USB摄像头并将预览加载到网站上。我已经使用react-webcam包构建了它。我使用

连接了设备

navigator.mediaDevices.getUserMedia(constraints);

该应用程序在桌面上的多种浏览器（chrome，firefox，edge）中都可以正常工作。但不适用于移动浏览器（chrome，firefox，edge）。

如果我尝试使用移动应用程序连接USB摄像头以检测摄像头，则该摄像头可以正常运行，但无法正常运行我建立的网站。并且我确定我已授予浏览器（网站）相机权限。我有两个，三个USB相机，它们是为移动和Web应用程序构建的，但是在移动浏览器中，网站都没有检测到它们。（但在桌面浏览器中被检测到）。

我试图通过https://webcamtests.com/检测到我的USB摄像头，并且网络摄像头测试网站通过我的桌面浏览器检测到了这些摄像头，但未通过移动浏览器检测到。（我的外接USB摄像头）

我无法理解可能出了什么问题，因为仅在移动浏览器中并未发现该问题。我确保使用Android移动应用程序正确连接了该设备，并且确实在手机上的移动应用程序中检测到了该设备，但在我的网站上却未检测到它。

componentdidmount函数


componentDidMount=()=>{


    let self = this
    // code to get access to the camera
    navigator.mediaDevices.getUserMedia({video: {
      width: { min: 1920, ideal: 1920 },
      height: { min: 1920, ideal: 1080 },
    }})


  navigator.mediaDevices.enumerateDevices()
.then(devices => {
  devices.forEach(function(device) {

    if (device.label.startsWith("Doccamera") || device.label=="LiteArray USB2.0") {  
self.setState({did:device.deviceId})
    }

  });

  this.setState({initialRender: true})
}).catch(err => console.log(err.name + ": " + err.message))
}

渲染功能


render(){
  const videoConstraints = {

    width: { min: 1920 },
    height: { min: 1920  },

    aspectRatio: 1.777777778,
      facingMode: "user",
      deviceId : { exact: this.state.did } 
    }
return(
      <Webcam
                  className="mt-2"
                  width="53%"
                  height="53%"
          audio={false}
          ref={this.setRef}
          screenshotFormat="image/jpeg"
          onUserMedia={this.previewLoadComplete}

          onUserMediaError={previewLoadError}
          screenshotQuality={1}
          minScreenshotWidth={1280}
          minScreenshotHeight={960}
          videoConstraints={videoConstraints}
          id="webcamscreen" href="#"
        data-toggle="tooltip" data-placement="top" title="Tooltip on top"/>
)
}

预期结果：当我将USB摄像头插入手机并在chrome浏览器（移动浏览器）中拥有权限打开我的网站时，屏幕上会显示摄像头预览

实际结果：将USB摄像头插入手机并在chrome浏览器（移动浏览器）中具有权限打开我的网站时，屏幕上没有显示摄像头预览

谢谢您的时间

在移动浏览器中未检测到USB网络摄像头

0 个答案: