【WebAR】开源项目：微信小程序AR实现颜色跟踪、人脸检测、图像识别、对象跟踪

1、项目可行性

微信公开课微信公众号在2019年7月5日公布了手机微信小程序完成Web AR的基本API，该API能即时从摄像头获得每帧图象。可是，手机微信小程序沒有给予图像识别技术和人脸识别算法的作用。Tacking.js是一个轻巧型的机器视觉库，能完成颜色追踪、人脸识别算法等作用。JSFeat是一个机器视觉优化算法库，相近OpenCV的图像算法。

本演试新项目的源码在GitHub上，详细地址请见文章内容结尾。

2、提前准备流程

用微信web专用工具导进源码，点一下工具条上的“浏览“按键，微信扫一扫会运行手机微信小程序。假如“浏览”按键是深灰色不能点一下，则必须为小程序新项目填好一个检测ID。

手机微信小程序会要求应用摄像头管理权限，挑选“容许“。假如挑选“回绝”了，在小程序右上方的设定按键中再次开启就可以。

由于是新的小程序API，iOS版手机微信必须7.0.4版，Android版手机微信必须7.0.5版。现阶段，大部分人沒有安裝新版微信，可以挑选“take a photo”方式感受，而不是“access a camera”方式。由于“take a photo”方式沒有采用新API，因此在所有新版本的手机微信都可以用。

3、操作方法

应用Demo小程序，扫描仪这张图片就可以。您还可以扫描仪身旁鲜红色、淡黄色、蓝色的东西。

扫描仪取得成功后的作用如下所示：

“take a photo”方式的截屏

操作步骤：点一下“take a photo”按键拍照，点一下“retry”再次拍照。

“access a camera”方式的截屏

操作步骤：网页页面会自动识别摄像头界面中是不是存有蓝紫色、淡黄色、深蓝色，沒有手动式实际操作。

4、图象颜色追踪的主要用途

尽管依据颜色不可以分辨是啥物件，但能在已经知道颜色的一堆物件中，区别是啥物件。颜色剖析比轮廊剖析等图象技术性的效率要快许多，但准确度要低。适用对精确度规定较低的场所。

5、人脸识别算法

应用Demo小程序，扫描仪面部或图片就可以。

鉴别完成后，面部会展现一个方块，而且表明了眼眉、双眼、鼻部、嘴、脸的轮廊等31个特点点。

点一下“change camera direction”按键，转换后置摄像头和外置摄像头。

2019.8.1升级：完成了透视变换的面部。

透视变换的人脸：当面部特点点不确切时，2D纸贴的地方都不精确。

调节面部识别的技术参数后，特点点越来越接近面部，2D纸贴的地方越来越精确。

6、图像识别技术

图像识别分成2个一部分，一个是被鉴别的图片，另一个是拍照或摄像头即时获得的图片。

必须在拍照或摄像头图象中，测算出被鉴别图片的部位、尺寸、转动等转换。

被鉴别图片如下所示：

扫描仪一个转动的图片

期待結果如下所示：

透明色的灰黑色遮罩层遮盖了被鉴别的图片。

扫描仪一个切角的图片

期待結果如下所示：

扫描仪一个移动和放大的图片

期待結果如下所示：

作用限定：现阶段适用鉴别图片的移动、转动、切角、放缩等2D转换。

2019.8.1升级：完成了鉴别图片的透视变换。

扫描仪一个透视变换的图片

期待結果如下所示：

7、目标追踪（不强烈推荐）

在面部、双眼、嘴等部位表明一个方块，该作用的速率比面部识别慢，精确度也差。这个是tracking.js的一个事例。

8、技术性问题和加工处理方式

8.1 将原生态部件camera和canvas累加，camera表明摄像头视频，canvas显示，第一次开启小程序时，下边的camera部件会挡住上边的canvas部件。

解决方式：为camera部件和canvas组件各自设定CSS的z-index特性。

8.2 即时获得摄像头图象，方式context.onCameraFrame的frame.data值是ArrayBuffer种类，如何转换成图片的基本数据类型？

解决方式：图象目标 = new Uint8ClampedArray(frame.data);

8.3 机器视觉库tracking.js移殖到手机微信小程序，必须做什么改动？

解决方式：手机微信小程序中不会有电脑浏览器目标的window和navigator，需更换掉。tracking.js库在小程序中无法打开摄像头，需将小程序的摄像头图象数据信息赠给tracking.js库。

8.4 即时获得摄像头图象，目标CameraFrameListener的stop()方式停不下来监听摄像头，即使撤出小程序网页页面都没有用。

再现流程：CameraFrameListener的start()方式开启监听摄像头后，在小程序调节系统日志中看到不断輸出console.log纪录。然后，启用CameraFrameListener的stop()方式通告CameraFrameListener终止，小程序调节系统日志依然不断地輸出console.log纪录。最终，点一下左上方回到退出页面，在html页面的小程序调节系统日志依然不断地輸出console.log纪录。

const listener = context.onCameraFrame(function (frame) { console.log('frame:', frame.width, frame.height); frameData = new Uint8ClampedArray(frame.data); frameWidth = frame.width; frameHeight = frame.height; // 假定在这个部位解决图片数据信息 _that.tracker.track(frameData, frameWidth, frameHeight); });

解决方式：没有在context.onCameraFrame的调用函数中启用tracking.js库，改为用计时器启用tracking.js库。

const intervalId = setInterval(function () { if (frameData) { // 换为在这个部位解决图片数据信息 _that.tracker.track(frameData, frameWidth, frameHeight); } }, intervalTime);

8.5 除开用计时器实行循环系统，也有别的循环系统实行方式吗？

一般应用requestAni ** tionFrame方式，之前在小程序中沒有给予，只在游戏中给予。

如今小程序的canvas提升了webgl的适用，也增多了canvas.requestAni ** tionFrame方式。

9、图像识别技术的优化方法

9.1 提前准备记时器

在要提升的方式启用前和调用后的部位置放记时器，纪录方式的损耗時间。一些优化方法很有可能沒有预期目标，根据记时器能观察出来。

9.2 提升鉴别速率

1、一般要对图像预处理，例如灰度级化、模糊、图像分割等。检测了tracking.js内置的I ** ge.blur()、I ** ge.grayscale()、I ** ge.sobel()等方式，实际效果不理想化。预备处理后，还提升了总体的鉴别時间。

检测結果：沒有预备处理时，用时1600ms。灰度级化时，用时约1660ms。模糊后，用时约2450ms。

2、根据降低图片的规格尺寸，实际效果显著。

检测結果：

图象总宽375清晰度，用时1600ms；

图象总宽180清晰度，用时350ms；

图象总宽90清晰度，用时160ms；

图象总宽50清晰度，用时50ms。

3、手机微信小程序拍照的图像尺寸缩小方式

将图象制作到画板上，运用画板调节图像尺寸。

ctx.drawI ** ge(photoPath, i ** geX, i ** geY, frameWidth, frameHeight); ctx.draw(false, function () { wx.canvasGetI ** geData({ ...

4、手机微信小程序即时获得摄像头的图像尺寸缩小方式

2019.8.6升级：由于经常启用wx.canvasToTempFilePath会让Android版微信闪退，“Access a camera”方式不会再应用该缩小方式。

获得的摄像头图象是一个Arraybuffer种类，并不是文件路径，画板的ctx.drawI ** ge方式没法制作。

第三方构思：先将Arraybuffer种类的图象用wx.canvasPutI ** geData方式制作到画板上，然后用wx.canvasToTempFilePath方式转化成临时文件夹，随后把临时文件夹用画板的ctx.drawI ** ge方式制作。剩余的事儿和拍照的图像压缩方式一样。

wx.canvasPutI ** geData({ wx.canvasToTempFilePath({ ctx.drawI ** ge(photoPath, i ** geX, i ** geY, frameWidth, frameHeight); ctx.draw(false, function () { wx.canvasGetI ** geData({ ...

注：该方 ** 反复建立临时文件夹，若有别的图像压缩方式更强。

9.3 提升鉴别精密度

1、鉴别的图象应当和初始的图象占比一致。例如，初始图象宽高比4：3，为了更好地在系统上表明漂亮，图象被拉申为宽高比4：3.5，被拉申的图象没法被恰当鉴别。

2、在图像尺寸固定不动时，tracking.js库中人脸识别算法的initialScale值和颜色检验的minDimension值越大，检测速率越来越快但鉴别精密度越低。2个值越小，检验速率变慢但鉴别精密度越高。

3、在图像尺寸产生好几倍的转变时，tracking.js库中人脸识别算法的initialScale值和颜色检验的minDimension值能各自地相互配合图像尺寸调节。例如，图像尺寸从宽375清晰度和高458像素，变为宽50清晰度和高61像素。这时几乎没法监测到面部了，但将initialScale值和minDimension值设定的充足小，又可以检验到面部。

9.4 依据情景挑选改进方案

提升鉴别精密度时，鉴别速率会减少；而提升鉴别速率时，鉴别精密度又会减少。在客户点一下按键拍照的情景，鉴别精密度可以设定的高一些。在即时地从摄像头获得图象的情景，鉴别精密度可以设定的低一些，以获得迅速的鉴别速率。

9.5 手机微信小程序没法提升的地区

手机微信小程序的寄主自然环境分成2层：逻辑性层运作在JavaScript模块上，3D渲染层运作在WebView上。小程序的JavaScript处理速度比手机网页快了一点。可是，碰到用JavaScript开展视觉效果测算的状况，计算時间会较长。

例如，PC电脑浏览器上JavaScript测算一个图象转换，耗费300ms，而在浏览器上测算这一图象转换，耗费3秒。估测，PC电脑浏览器比浏览器约快10倍。在微信小程序中，既没法应用WA ** 加快，也没法同时应用硬件加速器。此外，小程序也有2MB的尺寸限定。

提醒：人脸识别算法那一个演试必须的面部练习实体模型（Regressor.js）初始尺寸有4MB，包括4层实体模型。为了更好地合乎手机微信小程序的尺寸限定，改成了1层实体模型。

10、开源代码详细地址sanyuered/WeChat-MiniProgram-WebAR