javascript - 网络摄像头捕获到 <img>

Question

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

我有一些脚本，可以使用唯一的 ID 动态生成标签，因此在生成标签后，我想做的就是在该时刻从网络摄像头捕获图像并将图像保存在生成​​的标签中。拍摄图像后，我只想让网络摄像头一直保留到下次拍照为止。

我已经有一个使用进行面部跟踪的库运行的网络摄像头提要，但是我想通过此功能扩展它以在页面上创建捕获图像的图库。

我正在使用的库是 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

首先，将其绘制到 Canvas 上:

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();