I'm trying to show up to 4 different USB Webcams in a single HTML page using JavaScript, here's the code I made:
<html>
<body>
<style>
.webcamBox {
width: 500px;
height: 350px;
background-color: grey;
}
</style>
<video autoplay="true" id="webcam1" class="webcamBox"></video>
<video autoplay="true" id="webcam2" class="webcamBox"></video>
<video autoplay="true" id="webcam3" class="webcamBox"></video>
<video autoplay="true" id="webcam4" class="webcamBox"></video>
</body>
</html>
<script>
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
console.log("enumerateDevices() not supported.");
}
var i = 0 ;
var webcam = document.getElementsByClassName("webcamBox");
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
if (device.kind == "videoinput") {
if (navigator.mediaDevices.getUserMedia) {
console.log("ID: "+device.deviceId);
navigator.mediaDevices.getUserMedia({
video: { deviceId: { exact: device.deviceId } }
})
.then(function (stream) {
console.log(i+"] Webcam is working") ;
webcam[i].srcObject = stream;
i++ ;
})
.catch(function (err0r) {
console.log(i+"] Webcam error") ;
i++ ;
});
}
}
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
</script>
The only browser able to find and print the device id is Firefox, this code doesn't work on Chrome.
Everything seems to work, but I can show only 2 webcams at the same time. I tried to change USB webcams but nothing's changed, Firefox shows different webcams but always just 2 at the same time.
Are there some limitations, maybe something related to performance, or am i doing something wrong?
How can i make this work?
Thanks in advance