I need to show 2 videos capturing from 2 different cameras attached to my laptop. One is my laptop camera and other one is attached USB webcam. I have tried with below code but both videos are coming from same camera but not different. Below my code. Can anyone help me to sort this please? TIA
<video id="cameraModule1" width="100%" height="100%" autoplay></video>
<video id="cameraModule2" width="100%" height="100%" autoplay></video>
<script>
//Selector for your <video> element
const cam1 = document.querySelector('#cameraModule1');
//Core
window.navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
cam1.srcObject = stream;
cam1.onloadedmetadata = (e) => {
cam1.play();
};
})
.catch( () => {
alert('You have give browser the permission to run Webcam and mic ;( ');
});
</script>
<script>
//Selector for your <video> element
const cam2 = document.querySelector('#cameraModule2');
//Core
window.navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
cam2.srcObject = stream;
cam2.onloadedmetadata = (e) => {
cam2.play();
};
})
.catch( () => {
alert('You have give browser the permission to run Webcam and mic ;( ');
});
</script>
Each camera has a uniqueId stored in an array. If you don't specify which camera - it just grabs index[0]:
Here's sample code to get all the devices (this adds each device to a dropdown menu for the use to select which to use):
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
console.log("device", device);
deviceName = device.label;
if(deviceName == "" ){
deviceName = device.deviceId;
}
console.log(device.kind + ": named: " + deviceName +" id = " + device.deviceId);
var audioSelect = document.getElementById("audioPicker-select");
var cameraSelect = document.getElementById("cameraPicker-select");
if(device.kind=="audioinput"){
//add a select to the audio dropdown list
var option = document.createElement("option");
option.value = device.deviceId;
option.text = deviceName;
audioSelect.appendChild(option);
}else if(device.kind =="videoinput"){
//add a select to the camera dropdown list
var option = document.createElement("option");
option.value = device.deviceId;
option.text = deviceName;
cameraSelect.appendChild(option);
}
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
Now that you have the devices, you must insert the cameraId into the getUserMedia:
(this is a few snips from my code):
var videoOptions = {
deviceId: cameraId,
width: { min: 100, ideal: cameraW, max: 1920 },
height: { min: 100, ideal: cameraH, max: 1080 },
frameRate: {ideal: cameraFR}
};
cameraMediaOptions = {
audio: false,
video: videoOptions
};
cameraStream = await navigator.mediaDevices.getUserMedia(cameraMediaOptions);
This is all from https://record.a.video - and the code is all on GitHub: https://github.com/apivideo/recordavideo