jquery - 在 HTML5 和 jQuery 中访问两个不同的网络摄像头

Question

我想使用 HTML5 和 jQuery 制作一个简单的网络摄像头查看器。我为此找到了一些代码，如下所示

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

此代码正常工作并显示单个网络摄像头 View ，但我想在同一页面中显示两个网络摄像头 View ，我如何才能在我的网页上显示第二个网络摄像头。我是 HTML5 和 JQuery 的新手。请帮助我。提前致谢

Answer 1

因为您使用的是 RecordRTC.js，我假设您的目标浏览器是 Google Chrome，因为它是 only supported browser此时。

不幸的是，支持此功能的浏览器(例如 Google Chrome)仅支持一个网络摄像头，事实证明您必须在 chrome://settings/content 的内容设置下指定您想要使用的摄像头

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

如果您想要创建一个页面，让拥有多个网络摄像头的网络用户可以创建他们自己的类似多摄像头 View ，您可能需要使用不同的技术，例如浏览器插件或 Flash。