Accessing two different web camera in HTML5 and jQuery

Question

I want to make a simple web cam viewer using HTML5 and jQuery. I find some code for that,this is as under

    <script src="RecordRTC.js"></script>
div>
    <video id="client-video" autoplay loop controls muted></video>
    <button id="record-video">Record Video</button>
</div>
<script>
    var video = document.getElementById('client-video');
    var videoConstraints = {
        audio: false,
        video: {
            mandatory: {},
            optional: []
        }
    };
      var  videoStream;
</script>
<script>
    function getByID(id) 
    {
        return document.getElementById(id);
    }
    var recordVideo = getByID('record-video');

    var recorder;
    recordVideo.onclick = function () 
    {
        if (!videoStream) navigator.webkitGetUserMedia(videoConstraints, function (stream) 
        {
            video.src = window.webkitURL.createObjectURL(stream);
            videoStream = stream;
            recorder = RecordRTC({
                video: video
            });
            recorder.recordVideo();
        });
        else 
        {
             video.src = window.webkitURL.createObjectURL(videoStream);
             recorder.recordVideo();
        }

        window.isAudio = false;
        this.disabled = true;
        stopRecordingVideo.disabled = false;
    };
</script>

RecordRTC.js

function RecordRTC(config) 
{
    var win = window,
        requestAnimationFrame = win.webkitRequestAnimationFrame || win.mozRequestAnimationFrame,
        cancelAnimationFrame = win.webkitCancelAnimationFrame || win.mozCancelAnimationFrame,
        URL = win.URL || win.webkitURL,
        canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        video = config.video;
    if (video) 
    {
        video.width = canvas.width = 320;
        video.height = canvas.height = 240;
    }

    var requestedAnimationFrame, frames = [];
    function recordVideo() 
    {
        if (!video) 
        {
            alert('No video element found.');
            return;
        }
        console.log('started recording video frames');

        var height = canvas.height,
            width = canvas.width;

        frames = [];

        function drawVideoFrame() 
        {
            requestedAnimationFrame = requestAnimationFrame(drawVideoFrame);
            context.drawImage(video, 0, 0, width, height);
            frames.push(canvas.toDataURL('image/webp', 1));
        }
        requestedAnimationFrame = requestAnimationFrame(drawVideoFrame);
    }

    var blobURL, blobURL2, fileType;
    function setBlob(blob, callback)
    {
        blobURL = blob;
        var config = {
            blob: blobURL,
            type: fileType === 'webm' ? 'video/webm' : 'audio/wav',
            fileName: (Math.random() * 1000 << 1000) + '.' + fileType,
            size: blobURL.length,
            onsuccess: function (fileEntry) 
            {
                console.log(fileEntry);
                fileSystemURL = fileEntry.toURL();
                if (callback)
                {   
                    callback(fileSystemURL);
                }
             }, 
            onerror: function (errorMessage) 
            {
                console.debug('Unabled to write temporary recorded file using FileWriter APIs.');
                var url = writer.toURL();
                if (url)
                {
                    return window.open(url);
                }
                else 
                {
                    console.debug('Unabled to write temporary recorded file using FileWriter APIs.');
                    if (callback) 
                        callback(blobURL2);
                }
            }
        };
    }

    return {
        recordVideo: recordVideo,
        getBlob: function () {
            return blobURL2;
        }
    };
}

This code properly working and display single web cam view but i want to display two web cam view in the same page how could i second web cam on my web page. i am new with HTML5 and JQuery . Please help me in this . Thanks in advance

Answer 1

Because you're using RecordRTC.js, I'll presume your target browser is Google Chrome, as that is the only supported browser at this time.

Unfortunately browsers that support this feature (such as Google Chrome) support just one webcam, as evidenced by the fact that you must nominate the camera you would like to use under the content settings at chrome://settings/content

If you are wanting to put together a security camera system that monitors multiple cameras for your own use, you would need to set up some kind of server (i.e., outside of the browser) to capture the video stream of each camera. Once broadcast, you could use the video element to build a web page incorporating each of the video streams.

If you are wanting to create a page where people on the web with multiple webcams could go and create their own similar multi-cam view, you might need to use a different technology such as a browser plug-in or possibly Flash.