Accessing Multiple camera javascript getusermedia

Question

guys i have two cameras that is
-the web camera
-the laptop camera

i want to stream those camera in a website
i already have some reference
here is some code that is working on jsfiddle here

<video id="video" width="640" height="480" autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

<script>

    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", function() {
        // Grab elements, create settings, etc.
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),
            video = document.getElementById("video"),
            videoObj = { "video": true },
            errBack = function(error) {
                console.log("Video capture error: ", error.code); 
            };

        // Put video listeners into place
        if(navigator.getUserMedia) { // Standard
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }

        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function() {
            context.drawImage(video, 0, 0, 640, 480);
        });
    }, false);

</script>

that example can only connects and select 1 camera
i want to select and view two of my camera, any suggestion or solution guys?
you can also give me the JS fiddle

Solution

You can create two different streams, one for each camera, and show them simultaneously in two <video> tags.

The list of available devices is available using navigator.mediaDevices.enumerateDevices(). After filtering the resulting list for only videoinputs, you have access to the deviceIds without needing permission from the user.

With getUserMedia you can then request a stream from the camera with id camera1Id using

navigator.mediaDevices.getUserMedia({
  video: {
    deviceId: { exact: camera1Id }
  }
});

The resulting stream can be fed into a <video> (referenced here by vid) by calling vid.srcObject = stream.

I have done this for two streams from two webcams simultaneously.

Comments

[J0hj0h]

As of 2018, the linked website works and multiple video streams can be shown simultaneously.

[J0hj0h]

Correction: Video streams can be shown in two tabs or windows simultaneously, as long as they belong to the same browser. If Firefox has opened a stream, then Chrome will fail, and vice versa, but when using the same browser, everything works.

[patrick]

Not working with Chrome on Android front and back camera

[dǝɥɔS ʇoıןןƎ]

@astronought. Sure that the device can actually do that natively?

[amIllusionist]

@J0hj0h navigator.mediaDevices.enumerateDevices() can not detect both webcam in my laptop. It only detects [audioinput, videoinput, audiooutput]. I have two videoinput but it does not have access to another. I use latest version of chrome in windows.