hmacsha1 小程序js_【开源项目WebAR】微信小程序AR和Tacking.js计算机视觉库实现颜色识别和跟踪AR...

1、项目背景

微信小程序近日增加了实现Web AR的基础功能API，该API能实时从摄像头获取每帧图像。

但是，微信小程序官方没有提供图像识别和跟踪的功能。于是，大家尝试移植TensorflowJS等各种计算机视觉库到微信小程序。

Tacking.js是一个轻量型的计算机视觉库，能实现颜色跟踪、人脸检测等功能。比移植TensorflowJS简单了很多。

本演示项目的源代码在GitHub上，地址请见文章末尾。

2、准备步骤

下载源代码，用微信开发者工具打开源代码，点击工具栏上的“预览“按钮，微信扫一扫会启动微信小程序。

微信小程序会请求使用摄像头权限，选择“允许“。如果“拒绝”了，在小程序右上角的设置按钮中找到“摄像头“启用即可。

因为是新的小程序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、开源代码地址

https://github.com/sanyuered/WeChat-MiniProgram-WebAR