3

我想使用 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;
        }
    };
}

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

4

1 回答 1

3

因为您使用的是 RecordRTC.js，所以我假设您的目标浏览器是 Google Chrome，因为这是目前唯一支持的浏览器。

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

在此处输入图像描述

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

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

于 2013-05-22T05:05:03.370 回答