We are building flutter Windows application. We have 2 cameras streaming to the same USB port via usb hub. We have tested the javascript code below on jsfiddle (chrome on Windows 11). The code recognizes both camera feeds. However, the same code applied within Flutter recognizes only 1 camera. We have checked the USB permissions to ensure full access to flutter app.
Stripping the code to relevant parts:
CSS
body {
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100vh;
}
div {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
HTML
<div>
<video id="camera1" autoplay playsinline></video>
</div>
<div>
<video id="camera2" controls autoplay></video>
</div>
JS
var camera1 = document.getElementById('camera1')
var camera2 = document.getElementById('camera2')
navigator.mediaDevices.enumerateDevices().then((devices) => {
console.log('TAG:: available devices ====:: ' + devices.length);
const cameras = devices.filter(device => device.kind === 'videoinput');
console.log('TAG:: available cameras ====:: ' + cameras.length);
cameras.forEach(device => {
console.log(`TAG:: available camera: ====:: ${device.kind} :: ${device.label} :: ${device.deviceId}`);
console.log(device.toJSON());
});
}
In the above code, available cameras should show 2. On the browser, it shows 2 correctly but on flutter, it just shows 1. Is there any other libraries we should explore? We have tried all camera based flutter libraries without any luck.
TAG:: available devices ====:: 9
TAG:: available camera: ====:: videoinput :: USB GS Camera Right (0edc:2076) :: f53ef6f475edcc92d8a115adb3c6d43eed136ac763b6b61d81481924e2d6ea03
TAG:: available camera: ====:: videoinput :: USB GS Camera Left (0edc:2076) :: 51094bae387955f5bcede4e2c49a5650b4c839233e9a9de2bc263548e6254e02