容器{

Question

使用javascript或Jquery我想从我的页面上的网络摄像头源获取当前图像并将其放入标签中。

我有一些脚本可以使用唯一的Id动态生成标签，所以在生成一个之后我想要做的就是在那个确切的时刻从网络摄像头捕获图像并将图像保存在生成的标签中。拍摄图像后，我只想让网络摄像头一直运行，直到下次拍照。

我已经有一个使用图书馆进行面部追踪的网络摄像头Feed，但我希望通过此功能扩展此功能，以便在页面上创建捕获图像库。

我使用的库是ClmTracker

库的创建者建议在视频元素上调用getImageData（x，y，w，h），我试过这个。还试图实现我在其他网站上看到的教程，但无济于事。似乎答案需要特定于我的代码。我尝试使用canvas而不是标签来放入图像，但由于它们是在代码中动态创建的，因此我一直收到错误。

var vid = document.getElementById('videoel');
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');

/********** check and set up video/webcam **********/

function enablestart() {
    var startbutton = document.getElementById('startbutton');
    startbutton.value = "start";
    startbutton.disabled = null;
}


navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL;

// check for camerasupport
if (navigator.getUserMedia) {
    // set up stream

    var videoSelector = {
        video: true
    };
    if (window.navigator.appVersion.match(/Chrome\/(.*?) /)) {
        var chromeVersion = parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10);
        if (chromeVersion < 20) {
            videoSelector = "video";
        }
    };

    navigator.getUserMedia(videoSelector, function (stream) {
        if (vid.mozCaptureStream) {
            vid.mozSrcObject = stream;
        } else {
            vid.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
        }
        vid.play();
    }, function () {
        //insertAltVideo(vid);
        alert("There was some problem trying to fetch video from your webcam. If you have a webcam, please make sure to accept when the browser asks for access to your webcam.");
    });
} else {
    //insertAltVideo(vid);
    alert("This demo depends on getUserMedia, which your browser does not seem to support. :(");
}

vid.addEventListener('canplay', enablestart, false);

如何使用上面的代码作为基础从网络摄像头捕获图像并将其放入div中？

我不确定是否可以提供更多细节，因为我还没有了解如何做到这一点。

Answer 1

首先，将它绘制到画布上：

var canvas = document.createElement('canvas');
canvas.height = video.height;
canvas.width = video.width;
canvas.getContext('2d').drawImage(video, 0, 0);

现在你可以创建图像了：

var img = document.createElement('img');
img.src = canvas.toDataURL();

Answer 2

我似乎无法让屏幕截图移植工作，但网络摄像头部分工作正常，我会在完成后更新。

JSFiddle

<强> HTML

<div id="container">
    <video autoplay="true" id="videoElement">dsasd</video>
    <br>
    <button onclick="snap()">Screenshot</button>
    <canvas></canvas>
</div>

<强> JS

var video = document.querySelector("#videoElement");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {
    navigator.getUserMedia({
        video: true
    }, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    // do something
}



        // Get handles on the video and canvas elements
        var video = document.querySelector('video');
        var canvas = document.querySelector('canvas');
        // Get a handle on the 2d context of the canvas element
        var context = canvas.getContext('2d');
        // Define some vars required later
        var w, h, ratio;

        // Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
        video.addEventListener('loadedmetadata', function() {
            // Calculate the ratio of the video's width to height
            ratio = video.videoWidth / video.videoHeight;
            // Define the required width as 100 pixels smaller than the actual video's width
            w = video.videoWidth - 100;
            // Calculate the height based on the video's width and the ratio
            h = parseInt(w / ratio, 10);
            // Set the canvas width and height to the values just calculated
            canvas.width = w;
            canvas.height = h;          
        }, false);

        // Takes a snapshot of the video
        function snap() {
            // Define the size of the rectangle that will be filled (basically the entire element)
            context.fillRect(0, 0, w, h);
            // Grab the image from the video
            context.drawImage(video, 0, 0, w, h);
        }

<强> CSS

容器{

margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;

}

videoElement，canvas {

width: 500px;
height: 375px;
background-color: #666;

}

网络摄像头捕获到<img/>

2 个答案:

容器{

videoElement，canvas {