openCV.js简单几个demo(-09-08)

时间:2024-03-25 18:23:43

     在做项目中,后台是基于openCV获取图像帧进行处理,所以我就好奇去看看是否有openCV JS端的库,传送门OpenCV.js教程,虽然最后没选用,但是我还是贴上官网的demo记录一下。

1、视频的渲染

openCV.js简单几个demo(2018-09-08)

    所有的demo视频源均通过MediaDevices.getUserMedia()获取本机摄像头,左侧videoInput为video展示的原视频流,右侧canvasOutput顾名思义为canvas渲染处理后的视频帧,这个就是最简单的视频渲染。看官网上的介绍,有一个canvasFrame直接将相机视频流绘制出来,然后src.data.set 传入getImageData获取到的像素点信息,有个cvtColor方法传入想渲染的颜色,在调用imshow传入要展示的canvas对象➕数据。这个后台使用的opencv API几乎没什么差异,我们项目没有流媒体服务器,考虑是通过websocket进行每帧的推送,后台通过VideoCapture获取是一个三位像素点的数组(GBR具体顺序忘了),前端使用getImageData获取的是RGBA,本身我想要个二进制数组自己转换,技术太菜了后来就没按这个方案做下去...看下一个demo吧

openCV.js简单几个demo(2018-09-08)

2、视频人脸捕获

openCV.js简单几个demo(2018-09-08)

3.图像人脸处理    

openCV.js简单几个demo(2018-09-08)

     总结,可以看到openCV几乎能满足很多比如前端人脸画框、颜色处理、图像的识别渲染等等,结合node.js也可以做人脸识别,但是这个JS库我现在用的压缩的就有6M,而且编译过程有点复杂,我编译了好多次都是97%就挂掉了,可惜我python不是很熟悉,祝你们编译成功。demo代码放在https://github.com/mtgr1020/OpenCVDemo