在HTML5和jQuery中访问两个不同的web摄像头

我想使用HTML5和jQuery制作一个简单的web cam查看器。我找到了一些代码，如下所示

    <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>

div>
录制视频
var video=document.getElementById（'client-video'）；
var videoConstraints={
音频：错，
视频：{
强制性：{}，
可选：[]
}
};
视频流；
函数getByID（id）
{
返回文档.getElementById（id）；
}
var recordVideo=getByID（'record-video'）；
无功记录仪；
recordVideo.onclick=函数（）
{
if（！videoStream）navigator.webkitGetUserMedia（videoConstraints，function（stream）
{
video.src=window.webkitURL.createObjectURL（流）；
视频流=视频流；
记录器=记录器({
视频：视频
});
recorder.recordVideo（）；
});
其他的
{
video.src=window.webkitURL.createObjectURL（视频流）；
recorder.recordVideo（）；
}
window.isAudio=false；
this.disabled=true；
stopRecordingVideo.disabled=假；
};

RecordRTC.js

功能记录RTC（配置）
{
var win=窗口，
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.width=canvas.width=320；
video.height=canvas.height=240；
}
var requestedAnimationFrame，frames=[]；
函数recordVideo（）
{
如果（！视频）
{
警报（“未找到视频元素”）；
返回；
}
log（“开始录制视频帧”）；
var height=canvas.height，
宽度=画布宽度；
帧=[]；
函数drawVideoFrame（）
{
requestedAnimationFrame=requestAnimationFrame（drawVideoFrame）；
drawImage（视频，0，0，宽度，高度）；
frames.push（canvas.toDataURL（'image/webp'，1））；
}
requestedAnimationFrame=requestAnimationFrame（drawVideoFrame）；
}
变量blobURL，blobURL2，文件类型；
函数setBlob（blob，回调）
{
blobURL=blob；
变量配置={
blob:blobURL，
类型：fileType=='webm'？'video/webm'：'audio/wav'，
fileName:（Math.random（）*1000因为您使用的是RecordRTC.js，所以我假设您的目标浏览器是Google Chrome，因为这是目前最流行的浏览器

不幸的是，支持此功能的浏览器（如Google Chrome）只支持一个网络摄像头，这一点可以从以下事实中得到证明：您必须在网站的内容设置下指定要使用的摄像头chrome://settings/content 


如果您想组装一个监控多个摄像头供自己使用的安全摄像头系统，则需要设置某种服务器（即，在浏览器之外）捕获每个摄像头的视频流。一旦播放，您可以使用
视频
元素构建包含每个视频流的网页

如果你想创建一个网页，在这个网页上有多个摄像头的人可以去创建他们自己相似的多摄像头视图，你可能需要使用不同的技术，如浏览器插件或Flash

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;
        }
    };
}