Search code examples
reactjswindowsusblibusbuvc

How can I access UVC-Camera from USB (set/get -commands) while it is "videoinput" device for ReactCam in Windows environment?

I have several UVC-Cameras. When I plug them in they appear as "videoinout" into device manager and I can see them thru browser when I try to access them via navigator:

// Just driven straight inside empty browsers console.
navigator.mediaDevices.enumerateDevices( ).then( res => {
    res.filter( ( d ) => {
        console.log( d.kind + ":" + d.label )
    })
})

.
.
.
videoinput:NanoCam Go (0edc:58b0)
.
.
.

Which gives me list where I can see camera. Now I can use e.g. **ReactCam **with it. But if I try read anything from it or sets its values via LibUsb I get error and it cannot be done.

Yes, I know I should use e.g. WebUSB driver when using Libusb with Windows and it is very simple to install with Zadig. But when I do exactly that it cannot be found from media devices anymore. So now I can adjust its UVC-values but I cannot use it anymore with e.g. **ReactCam **to get video out of it.

This same thing can be seen when accessing cameras via navigator.usb as when accessing via Libusb as well as in media internals when trying to read descriptions (see pictures).

This is from usb log with both options:

guid=f280b010-8ce2-465a-a62a-809b4e6837a3, interface_number=0, path="\\?\usb#vid_0edc&pid_58b0&mi_00#6&1c36a8d6&0&0000#{ad7c0c59-f7e1-4995-9ee4-d96476b6bca0}", driver="WinUSB"

guid=f280b010-8ce2-465a-a62a-809b4e6837a3, interface_number=0, path="\\?\usb#vid_0edc&pid_58b0&mi_00#6&1c36a8d6&0&0000#{e5323777-f976-4f5b-9b55-b94699c46e44}\global", driver="usbvideo"

This is how browser shows it in Media Internals with both options:

[
  {
    "captureApi": "Media Foundation",
    "controlSupport": "pan tilt zoom",
    "formats": [
      {
        "resolution": "160x120",
        "fps": "30.00"
      },
.
.
.

      {
        "resolution": "1920x1080",
        "fps": "15.00"
      },
      {
        "resolution": "1920x1080",
        "fps": "5.00"
      }
    ],
    "id": "\\\\?\\usb#vid_0edc&pid_58b0&mi_00#6&1c36a8d6&0&0000#{e5323777-f976-4f5b-9b55-b94699c46e44}\\global",
    "name": "NanoCam Go (0edc:58b0)"
  }
]

// Cameras cannot be seen anymore when using WebUSB.
navigator.mediaDevices.enumerateDevices( ).then( res => {
    res.filter( ( d ) => {
        console.log( d.kind + ":" + d.label )
    })
})

// With WebUSB, cameras can be adjusted and that cannot be done when they are "videoinput" -devices.
navigator.usb.getDevices( ).then( res => console.log( res ))

I expected to use cameras as "inputvideo" -devices so that I can use them with e.g. ReactCam while being able to adjust their control values with USB.

USB-Internals when "videoinput"

USB-Internals when using "WebUSB"

So, my question is: What I am missing? How can do both?

Thank you in advance!

Solution

  • You can use the Image Capture Web API to set/get UVC controls. Here's a demo I've been maintaining that lets you play in Chrome browser with those that are supported by your USB camera: https://beaufortfrancois.github.io/sandbox/image-capture/playground.html

    Source: https://twitter.com/quicksave2k/status/1628727073048088577