如何在网络应用程序的手机中连接外部USB相机？

编程问答 2022-08-13

问题描述

我正在尝试将外部微型USB相机连接到手机上的Web应用程序。

我已经可以在笔记本电脑和其他计算机上连接它，但无法在电话浏览器（例如Chrome浏览器）中连接外部USB摄像头。

我已经构建了reactjs Web应用程序，并在获得许可后检索设备中的媒体设备。

 navigator.mediaDevices.getUserMedia()

我使用上面的代码从设备获取许可以检索存在的所有媒体设备

  navigator.mediaDevices
     .enumerateDevices()
     .then(devices => {})

我使用上面的代码来获取所有媒体设备。 然后将它们连接到名为react-webcam的程序包。 我将要连接的媒体设备的设备ID链接到react-webcam组件。

现在，它可以完美地在计算机中使用，但不适用于电话。 在电话中，它仅检索设备内部的媒体设备，而不检索外部USB相机。

所以我写了一些代码，以便获得插入设备的USB许可。 （我使用OTG插入相机）。 但是一旦获得USB许可，我就拥有了供应商ID和产品ID。但它未连接到网络应用中的react网络摄像头组件。由于react webcam组件会接受设备ID，而不会接受供应商ID和产品ID，因此只有在手机的Chrome浏览器中获得USB许可后，我才能获取产品ID和供应商ID。

  navigator.usb.requestDevice({ filters: [] })
    .then(selectedDevice => {
 selectedDevice.open()

    }).then(data=>{

navigator.mediaDevices
         .enumerateDevices()
         .then(devices => {})

})

在上面的代码中，当我获得手机的USB许可时，我会检索媒体设备，但在媒体设备列表中仍未获得外接USB摄像头。我只能检索内部的媒体设备。 如果我可以在媒体设备列表中列出外接USB摄像头，则可以将其连接到react网络摄像头组件并获取预览。

const videoConstraints1 = {
      width: { min: 1920 },height: { min: 1920 },facingMode: "user",deviceid: { exact: "xxxxxxxxxxxxxxxxxxxxxxxxxxx"}
    };

以上是我可以传递给react-webcam组件的视频限制，我只能定义要连接的设备ID，USB许可承诺只能检索供应商ID和产品ID。

是否可以将外部网络摄像头连接到网页并在移动设备中获取预览？

预期结果：

在授予chrome权限以访问手机浏览器中的外部USB摄像头时，在枚举设备功能中获取外部媒体设备将返回或检索设备ID。

实际结果：

enumerateDevices（）函数不会在电话浏览器的媒体列表中返回外部USB摄像机， 即使授予USB权限，也无法从手机浏览器中的外部USB摄像头获取预览。

是否可以在手机中连接外部USB相机并在网络应用中提供相机预览？

谢谢

解决方法

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

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

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

cameracameragoogle-chromereactjsreactjsreactjsreactjsusbusb