How to access video coming from two webcams?

Question

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>

score 2 · Answer 1 · answered Nov 01 '21 at 16:40

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

How to access video coming from two webcams?

1 Answers1