javascript - 在nodejs中使用cv.readImage()和流

Question

我正在尝试构建这样的东西 https://github.com/xenomuta/caraweb 使用 OpenCV 和 Nodejs 进行人脸检测。

我正在使用 Ubuntu，并且我已经能够从我的网络摄像头流式传输图片。

这是我的网络摄像头 .js

var socket = io.connect();
var fps = 30;

socket.on('connect', function () {
    $('.serverStatus').text('Connected')
});
socket.on('connecting', function () {
    $('.serverStatus').text('Connecting')
});
socket.on('disconnect', function () {
    $('.serverStatus').text('Disconnected')
});

var declinedCam = function(e) {
    alert('You have to enable the webcam');

};


window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = (navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);


var video = document.querySelector('video');

if (navigator.getUserMedia) {
    navigator.getUserMedia({video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);
    }, declinedCam);
} else {
    alert('Your browser does not support the webcamcontrol');
}

video.addEventListener('play', function(e) {
    var canvas = document.getElementById('frontendCanvas');

    var goByScale = (video.videoHeight >= video.videoWidth) ? 'Height':'Width';
    var scale = (300/ video['video'+goByScale]);

    canvas.width = video.videoWidth * scale;
    canvas.style.width = canvas.width + 'px';
    canvas.height = video.videoHeight * scale;
    canvas.style.height = canvas.height + 'px';

    var ctx = canvas.getContext('2d');
    setInterval(function() {
        if(video.paused !== true){
            ctx.drawImage(video, 0, 0, video.videoWidth*scale, video.videoHeight*scale);
            socket.emit('videoStream', canvas.toDataURL('image/webp'));

        }
    }, 1000 / fps)
}, false);

和app.js

var express = require('express.io');
var app = express();
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var backend = require('./routes/backend');
var cv = require('opencv');
var fs = require('fs');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');


// connection setup
app.http().io();




app.io.sockets.on('connection', function(socket) {
        socket.on('videoStream', function(data) {

            socket.broadcast.emit('sendVideo', data);
var buffer = new Buffer(data, 'base64');



});
})

当我尝试检测图片中的脸部时，我使用如下方法:

cv.readImage("/picture.png", function(err, im){});

但是我如何使用网络摄像头流中的数据来检测摄像头前面的人？ 谢谢你!

Answer 1

我知道它有点旧，但它可能会对某人有所帮助。

您不必将 Canvas 图像编码为 dataURL，您可以将 blob 直接发送到服务器。在您的 HTML(客户端)上:

function processCanvas(){
    // You call processCanvas() only once, after that is socket `canvasModified` 
    // event who calls it everytime it gets refreshed (see below)   

    var cnv = document.getElementById("canvasOutput")

    cnv.toBlob(function(blb){
        socket.emit('canvasUpdated', blb);
    }, 'image/jpeg', 0.8);
}

然后，在您的 Node.js 服务器上:

let modifyCanvas = (canvasBlob) => {
    return new Promise((resolve, reject) => {
        cv.readImage(canvasBlob, function(err, im){
            // Here you can process and do whatever with your image (im)
            ...

            // Once done everything, you can pass it again to JS by doing
            let arraybuffer = im.toBuffer();
            resolve(arraybuffer);
        });
    });
}

socket.on('connection', function(client){
    client.on('canvasUpdated', function(b){
        let buffer = Buffer.from(b);

        modifyCanvas(buffer).then((blb) => {
            try{
                socket.emit('canvasModified', blb);
            }catch(e){
                console.log(e);
            }
        });
    });
});

最后，再次在客户端，当事件发出时，您将其绘制在图像元素上(这更容易):

socket.on('canvasModified', function(blb){
    var b = new Blob([blb]);
    document.getElementById('imgModified').src = URL.createObjectURL(b);
    processCanvas();
});

如果您想将其绘制到 Canvas 上，您可以抓取该图像元素并将其绘制到 Canvas 上，方法如下:

var imageElement = document.getElementById("imgModified");
document.getElementById("canvasOutput").getContext('2d').drawImage(imageElement, 0, 0);

希望对你有帮助!