Javascript调用openCV.js网页中使用摄像头进行人脸设别_js调用opencv_allway2的博客-程序员宅基地

技术标签： linq p2p gnu

GitHub - rajeshpachaikani/face-detection-opencv-js: Simple demonstration of utilising OpenCV.js for face recognitionhttps://github.com/rajeshpachaikani/face-detection-opencv-js

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opencv JS</title>
    <script async src="js/opencv.js" onload="openCvReady();"></script>
    <script src="js/utils.js"></script>
</head>
<body>
    <video id="cam_input" height="480" width="640"></video>
    <canvas id="canvas_output"></canvas>
</body>
<script type="text/JavaScript">
function openCvReady() {
  cv['onRuntimeInitialized']=()=>{
    let video = document.getElementById("cam_input"); // video is the id of video tag
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(function(stream) {
        video.srcObject = stream;
        video.play();
    })
    .catch(function(err) {
        console.log("An error occurred! " + err);
    });
    let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
    let dst = new cv.Mat(video.height, video.width, cv.CV_8UC1);
    let gray = new cv.Mat();
    let cap = new cv.VideoCapture(cam_input);
    let faces = new cv.RectVector();
    let classifier = new cv.CascadeClassifier();
    let utils = new Utils('errorMessage');
    let faceCascadeFile = 'haarcascade_frontalface_default.xml'; // path to xml
    utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
    classifier.load(faceCascadeFile); // in the callback, load the cascade from file 
});
    const FPS = 24;
    function processVideo() {
        let begin = Date.now();
        cap.read(src);
        src.copyTo(dst);
        cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);
        try{
            classifier.detectMultiScale(gray, faces, 1.1, 3, 0);
            console.log(faces.size());
        }catch(err){
            console.log(err);
        }
        for (let i = 0; i < faces.size(); ++i) {
            let face = faces.get(i);
            let point1 = new cv.Point(face.x, face.y);
            let point2 = new cv.Point(face.x + face.width, face.y + face.height);
            cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
        }
        cv.imshow("canvas_output", dst);
        // schedule next one.
        let delay = 1000/FPS - (Date.now() - begin);
        setTimeout(processVideo, delay);
}
// schedule first one.
setTimeout(processVideo, 0);
  };
}
</script>
</html>

utils.js

function Utils(errorOutputId) { // eslint-disable-line no-unused-vars
    let self = this;
    this.errorOutput = document.getElementById(errorOutputId);

    const OPENCV_URL = 'opencv.js';
    this.loadOpenCv = function(onloadCallback) {
        let script = document.createElement('script');
        script.setAttribute('async', '');
        script.setAttribute('type', 'text/javascript');
        script.addEventListener('load', () => {
            if (cv.getBuildInformation)
            {
                console.log(cv.getBuildInformation());
                onloadCallback();
            }
            else
            {
                // WASM
                cv['onRuntimeInitialized']=()=>{
                    console.log(cv.getBuildInformation());
                    onloadCallback();
                }
            }
        });
        script.addEventListener('error', () => {
            self.printError('Failed to load ' + OPENCV_URL);
        });
        script.src = OPENCV_URL;
        let node = document.getElementsByTagName('script')[0];
        node.parentNode.insertBefore(script, node);
    };

    this.createFileFromUrl = function(path, url, callback) {
        let request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'arraybuffer';
        request.onload = function(ev) {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    let data = new Uint8Array(request.response);
                    cv.FS_createDataFile('/', path, data, true, false, false);
                    callback();
                } else {
                    self.printError('Failed to load ' + url + ' status: ' + request.status);
                }
            }
        };
        request.send();
    };

    this.loadImageToCanvas = function(url, cavansId) {
        let canvas = document.getElementById(cavansId);
        let ctx = canvas.getContext('2d');
        let img = new Image();
        img.crossOrigin = 'anonymous';
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
        };
        img.src = url;
    };

    this.executeCode = function(textAreaId) {
        try {
            this.clearError();
            let code = document.getElementById(textAreaId).value;
            eval(code);
        } catch (err) {
            this.printError(err);
        }
    };

    this.clearError = function() {
        this.errorOutput.innerHTML = '';
    };

    this.printError = function(err) {
        if (typeof err === 'undefined') {
            err = '';
        } else if (typeof err === 'number') {
            if (!isNaN(err)) {
                if (typeof cv !== 'undefined') {
                    err = 'Exception: ' + cv.exceptionFromPtr(err).msg;
                }
            }
        } else if (typeof err === 'string') {
            let ptr = Number(err.split(' ')[0]);
            if (!isNaN(ptr)) {
                if (typeof cv !== 'undefined') {
                    err = 'Exception: ' + cv.exceptionFromPtr(ptr).msg;
                }
            }
        } else if (err instanceof Error) {
            err = err.stack.replace(/\n/g, '<br>');
        }
        this.errorOutput.innerHTML = err;
    };

    this.loadCode = function(scriptId, textAreaId) {
        let scriptNode = document.getElementById(scriptId);
        let textArea = document.getElementById(textAreaId);
        if (scriptNode.type !== 'text/code-snippet') {
            throw Error('Unknown code snippet type');
        }
        textArea.value = scriptNode.text.replace(/^\n/, '');
    };

    this.addFileInputHandler = function(fileInputId, canvasId) {
        let inputElement = document.getElementById(fileInputId);
        inputElement.addEventListener('change', (e) => {
            let files = e.target.files;
            if (files.length > 0) {
                let imgUrl = URL.createObjectURL(files[0]);
                self.loadImageToCanvas(imgUrl, canvasId);
            }
        }, false);
    };

    function onVideoCanPlay() {
        if (self.onCameraStartedCallback) {
            self.onCameraStartedCallback(self.stream, self.video);
        }
    };

    this.startCamera = function(resolution, callback, videoId) {
        const constraints = {
            'qvga': {width: {exact: 320}, height: {exact: 240}},
            'vga': {width: {exact: 640}, height: {exact: 480}}};
        let video = document.getElementById(videoId);
        if (!video) {
            video = document.createElement('video');
        }

        let videoConstraint = constraints[resolution];
        if (!videoConstraint) {
            videoConstraint = true;
        }

        navigator.mediaDevices.getUserMedia({video: videoConstraint, audio: false})
            .then(function(stream) {
                video.srcObject = stream;
                video.play();
                self.video = video;
                self.stream = stream;
                self.onCameraStartedCallback = callback;
                video.addEventListener('canplay', onVideoCanPlay, false);
            })
            .catch(function(err) {
                self.printError('Camera Error: ' + err.name + ' ' + err.message);
            });
    };

    this.stopCamera = function() {
        if (this.video) {
            this.video.pause();
            this.video.srcObject = null;
            this.video.removeEventListener('canplay', onVideoCanPlay);
        }
        if (this.stream) {
            this.stream.getVideoTracks()[0].stop();
        }
    };
};

本文链接：https://blog.csdn.net/allway2/article/details/122619207

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

深入理解卷II ---ICS源代码下载-程序员宅基地

为什么80%的码农都做不了架构师？>>> ...

关系数据库中主键与唯一索引的区别_在关系数据库中唯一索引-程序员宅基地

两者在可空、唯一性、排序等表面特征上并没有什么区别，而且主键都有唯一索引，所以常被人问起它们之间有什么区别。简要地说，主键和唯一索引，或者键和索引之间的最主要区别在于：键是一个逻辑层面的概念，涉及到数据模式的设计。从语法角度看，键被定义为一种约束。比方说，如果想定义外键（或称参考约束），那么相关列就必须先定义为“键”。键在实现上一般都会有自己的索引（主键则是有唯一索引），这个索引可能是用户显式定义_在关系数据库中唯一索引

【C#】委托、事件、回调函数的理解及 delegate、event、Action、Func的区别-程序员宅基地

在C#中我们经常会碰到事件，尤其是在WPF或者WinForm中，窗体加载、或者点击一个按钮，都会触发事件。实际上，事件是对委托的封装。如果不进行封装，让委托暴露给调用者，调用者就可以把委托变量重新引用到新的委托对象，也就删除了当前要调用的方法列表；更糟糕的是，公共的委托成员打破了封装不仅导致代码难以维护和调试，而且会导致应用程序有安全风险。下面分别说明。1、委托委托可以理解为一种协议。委托，是什么意思呢？举个例子，你碰到一件事，你需要让别人来帮你做（可能你还有别的事情要做），这就是委托，把你现在不能做的

JavaWeb---Cookie与Session_web中cookie和session-程序员宅基地

什么是Cookie 与 Session，常用方法是什么，Cookie 与 Session有什么区别，一篇文章带你了解Cookie 与 Session_web中cookie和session

转发微博 Qzone 微信期货终端免费下载，采用VC++6.0开发，图形渲染效率惊人!_vc++6.0公众号-程序员宅基地

电脑版下载地址:关注微信公众号【矿洞程序员】，回复【矿洞程序员期货终端】。采用VC++6.0开发，打包后整个程序仅4.5M，内存占用仅14M，图形渲染效率惊人!这是条件单的设置界面!这是清仓全撤的设置!这是白色版的界面风格!这是黑色版的界面风格!这是图形界面!这是添加合约的界面!这是对界面进行DIY的程序!按住CTRL+滑动鼠标..._vc++6.0公众号

WTL-学习疑问_usqqwtl-程序员宅基地

1、double转cstring用format函数报错答：因为WTL版本的Format方法不支持浮点，这跟MFC不一样！！！！我一开始就搞错了2、 WTL的TrimRight() 和TrimLeft()方法是用来剔除多余的空白空间，但是！MFC版本是剔除指定的任何字符/字符组，我之前用它来在MFC中剔除小数点后无效的03、在WTL中使用cstring ，定义在atlmisc.h中，在前面加上#define _WTL_USE_CSTRING，否则会出问题滴~..._usqqwtl

随便推点

Linux基础篇（第一篇）_linux基础篇一 csdn_贫僧爱用飘柔的博客-程序员宅基地

文章目录LInux目录结构为什么是树？绝对路径&相对路径一切皆文件导管重定向&追加重定向重定向追加重定向Linux权限Linux权限的概念LInux切换用户su指令权限管理文件访问者分类（人）文件类型和访问权限文件类型基本权限文件权限值的表示方法文件的默认权限文件目录权限和普通文件权限的区别普通文件权限目录文件权限粘滞位LInux目录结构Linux的目录结构一般是由一棵多叉树组成，而这个多叉树只有一个根，这个根节点一般是/，像windows可以有多棵多叉树来组成目录文件结构.Linux_linux基础篇一 csdn

cmake时Qt5_dir-NOTFOUND_cmake 找不到qt5-程序员宅基地

在使用cmake构建工程时，找不到qt5。方法一：找到qt的安装目录然后选择，windows默认安装的路径一般为C:\Qt\Qt5.5.1\5.5\msvc2012\lib\cmake\Qt5msvc目录有可能也是gcc_64，视安装为准。方法二：编辑系统环境变量，新建一个名为Qt5_DIR环境变量，变量值为上述目录C:\Qt\Qt5.5.1\5.5\msvc2012\lib\cmake\Qt5..._cmake 找不到qt5

ehCache+spring的简单实用-程序员宅基地

1、最近在做一个贷款项目是城市分站的分为贷款前台和贷款机构后台，这个两个平台的二级域名不一样，一个前台是cityname.xx.com,cityname是会地区的不同而变化的，如在北京就是bj.xx.com,机构后台是loan.xx.com,在机构登录的时候，如果把登录信息放在session，会有一个问题，就是当切换到前台的时候，由于域名改变了，此时session就会改变，之前session保

安装使用Ctags-程序员宅基地

CentOS 6.4 系统1. 先下载ctags命令：sudo yum search Ctags -- 看看有无Ctags下载sudo yum install Ctags -- 安装Ctags2. 在~/.vimrc中增加以下这行：map :!ctags -R --c++-kinds=+p --fields=+iaS --extra=+q . (发现在~/

2021-01-18-程序员宅基地

3.8 计算身体质量指数public class Demo02 { public static void main(String[] args) { Scanner input = new Scanner(System.in); System.out.println("请输入一个体重（以磅为单位）"); double weight = input.nextDouble(); System.out.println("输入一个身高（以英寸为单位）"); double hei

【口罩识别】基于matlab GUI RGB滤波+YCbCr+肤色标定口罩识别【含Matlab源码 1895期】_基于matlab的gui口罩识别系统_海神之光的博客-程序员宅基地

口罩规范佩戴识别是基于人脸口罩检测结果进行的，该部分的输入是人脸口罩检测的输出且是有佩戴口罩的人脸。首先，将人脸部分的图像提取出来；然后映射到YCrCb颜色空间并进行非线性变换，经过椭圆肤色模型检测后输出一张灰度图，其中皮肤部分像素点为255（白色），非皮肤部分像素点为0（黑色）；最后再通过遍历人脸中鼻和嘴周围的像素点，得到皮肤暴露状况，从而判断是否规范佩戴口罩了。识别模型结构如图3所示。本节具体介绍了YCrCb椭圆肤色模型、人脸中鼻和嘴部分的划分、以及通过肤色状况判断是否规范佩戴口罩的逻辑关系。_基于matlab的gui口罩识别系统