在微信小游戏中使用tensorflow的face-landmarks-detection

这篇文章有讲如何在微信小程序中用tensorflow做人脸识别。

https://zhuanlan.zhihu.com/p/81636351

做人脸识别，先要检测到人脸，获取面部特征，然后去数据库比对。

先看如何做人脸检测，获取轮廓和面部特征。

https://www.npmjs.com/package/@tensorflow-models/face-landmarks-detection

这个包可以检测到人脸468个点。查看这个包的源码，发现要下载3个模型文件：

facemesh：https://tfhub.dev/mediapipe/tfjs-model/facemesh/1/default/1
iris：https://tfhub.dev/mediapipe/tfjs-model/iris/1/default/2
blazeface：https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1

很不幸，大概https://tfhub.dev被国内封锁了或者我们被封锁了，下载不了。

找来找去，找到中国区的这个网站：https://hub.tensorflow.google.cn/s?deployment-format=tfjs，分别去下载下来：

facemesh：https://r2---sn-2x3elnes.gvt1.com/edgedl/tfhub-tfjs-modules/mediapipe/tfjs-model/facemesh/1/default/1.tar.gz
iris：https://r2---sn-2x3elnes.gvt1.com/edgedl/tfhub-tfjs-modules/mediapipe/tfjs-model/iris/1/default/2.tar.gz
blazeface：https://r2---sn-2x3elnes.gvt1.com/edgedl/tfhub-tfjs-modules/tensorflow/tfjs-model/blazeface/1/default/1.tar.gz

因为微信小程序不能从本地加载文件，所以必须解压，找个服务器传上去。可以开通“云开发”-“存储”或“云开发”-“静态网站”，把文件传上去。

const tf_face=require('@tensorflow-models/face-landmarks-detection');
let canvas_camera,ctx_camera;
async function main() {console.log('load....');console.log(tf_face.SupportedPackages.mediapipeFacemesh);// Load the MediaPipe Facemesh package.const model = await tf_face.load(tf_face.SupportedPackages.mediapipeFacemesh,{//detectorModelUrl:'https://tfhub.dev/mediapipe/tfjs-model/facemesh/1/default/1',detectorModelUrl:'https://???.tcloudbaseapp.com/model/facemesh/model.json',//irisModelUrl:'https://tfhub.dev/mediapipe/tfjs-model/iris/1/default/2',irisModelUrl:'https://???.tcloudbaseapp.com/model/iris/model.json',//modelUrl:'https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1'modelUrl:'https://???.tcloudbaseapp.com/model/blazeface/model.json'});console.log('aa');canvas_camera=wx.createCanvas();canvas_camera.width=300;canvas_camera.height=400;ctx_camera=canvas_camera.getContext('2d');ctx_camera.drawImage(wx.tmGlobal.imgs['wxh'],0,0,canvas_camera.width,canvas_camera.height);// Pass in a video stream (or an image, canvas, or 3D tensor) to obtain an// array of detected faces from the MediaPipe graph. If passing in a video// stream, a single prediction per frame will be returned.const predictions = await model.estimateFaces({input: canvas_camera//document.querySelector("video")});console.log('bb');

pc上，检测一张小图片，用web-gl，大概1.7秒。

再改进一下，不要每次都从云端加载模型文件，保存在本地文件系统，下次从手机本地加载。

const tf_core = require('@tensorflow/tfjs-core');
const tf_plugin = require('./js/libs/@tensorflow/tfjs-plugin/index.js');
const tf_face=require('@tensorflow-models/face-landmarks-detection');
tf_plugin.configPlugin({//backendName:'wechat-webgl',fetchFunc: fetchWechat.fetchFunc(),tf:tf_core,webgl:tf_webgl,canvas: tf_canvas
},true);
let fs=wx.getFileSystemManager();
//const c_modelUrl='https://tfhub.dev/mediapipe/tfjs-model/facemesh/1/default/1';
const c_modelUrl='https://???.tcloudbaseapp.com/model/facemesh/model.json';
//const c_irisModelUrl='https://tfhub.dev/mediapipe/tfjs-model/iris/1/default/2';
const c_irisModelUrl='https://???.tcloudbaseapp.com/model/iris/model.json';
//const c_detectorModelUrl:'https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1';
const c_detectorModelUrl='https://???.tcloudbaseapp.com/model/blazeface/model.json';const fileStorageHandler_blazeface = tf_plugin.fileStorageIO('face_blazeface', fs);
const fileStorageHandler_iris = tf_plugin.fileStorageIO('face_iris', fs);
const fileStorageHandler_facemesh = tf_plugin.fileStorageIO('face_facemesh', fs);
......let isFaceModelSaved=wx.getStorageSync('isFaceModelSaved');let model=null;if (isFaceModelSaved!='yes'){console.log('load model from server');model = await tf_face.load(tf_face.SupportedPackages.mediapipeFacemesh,{detectorModelUrl:c_detectorModelUrl,irisModelUrl:c_irisModelUrl,modelUrl:c_modelUrl,shouldLoadIrisModel:true});console.log(model);model.pipeline.irisModel.save(fileStorageHandler_iris)model.pipeline.meshDetector.save(fileStorageHandler_facemesh);model.pipeline.boundingBoxDetector.blazeFaceModel.save(fileStorageHandler_blazeface);wx.setStorage({key:'isFaceModelSaved',data:'yes'});}else{console.log('from model from locale');model = await tf_face.load(tf_face.SupportedPackages.mediapipeFacemesh,{detectorModelUrl:fileStorageHandler_blazeface,irisModelUrl:fileStorageHandler_iris,modelUrl:fileStorageHandler_facemesh,shouldLoadIrisModel:true});console.log(model);}

在微信小游戏中使用tensorflow的face-landmarks-detection相关推荐

解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题
解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题参考文章: (1)解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题 (2)https:// ...
在微信小游戏中实现语音互动
之前在unity里尝试用过语音控制,当时的想法是实时控制游戏角色的移动与攻击,这在通过在线api解析语义的方式下体验一般,不过也想到在实时性要求不那么高的互动场景应该可以用起来.这里就在微信小游戏中尝 ...
h5小游戏嵌入到微信小游戏中（以egret为例）
H5小游戏源代码不能直接转换为微信小游戏发布,但是可以把现有的h5小游戏嵌入到微信小游戏中,这里使用egret举例.使用egret创建一个空的微信小游戏,在main.ts中资源加载完成后执行Webvi ...
在微信小游戏中开发一个贪食蛇
为什么80%的码农都做不了架构师?>>> 我自己也写过一个贪食蛇的小游戏,不过是对dom的操作,微信小游戏是采用js语法基于canvas的开发.为了省事在网上直接搜了一个基于c ...
threejs 微信小游戏中的离屏渲染做UI和排行榜
微信小游戏对threejs真的是一次桎酷啊...呵呵. 规定不能用html锁死了我们之前两个html标签的可能了... 不过微信还是允许了大家的离屏渲染,要不是我们在跳一跳之类的游戏中也看不到排行榜和 ...
egret引擎中使用tiled运行在微信小游戏中
egret的官方文档,对tiled的介绍不是很细致,很多东西都需要摸索.现在把踩的坑记录下来.作为一个备忘引用tiledmap的库在GitHub上下载egret的tiledmap支持库:https ...
微信3D小游戏系列一：在微信小游戏中使用threejs
文章目录环境配置下载开发者工具目录结构引入Three.js 在小程序中运行 threejs 目标效果小程序代码环境配置下载开发者工具下载地址: https://developers.w ...
Cocos Creator开发技术研究：微信小游戏中音效中断问题处理
转载自麒麟子博客:https://qilinzi.blog.csdn.net/article/details/89488323 音效可谓是一个小游戏的灵魂了. 某些玩法离开了音效更是不可能,比如别踩白 ...
在微信小游戏中使用three.js显示3D图形
年前,微信发布了一个重磅消息:微信小程序的小游戏功能,千呼万唤始出来! 笔者之前从未接触过微信小程序和WebGL的开发,但是却一直有留意相关技术的发展,大概听说原来微信小程序是不支持WebGL 3D技 ...
在微信小程序中引用tensorflow.js坑向总结（一）
各种坑 1. Error:No backend found in registry 2. Error: This application has not registered any plugins ...

在微信小游戏中使用tensorflow的face-landmarks-detection

在微信小游戏中使用tensorflow的face-landmarks-detection相关推荐

最新文章

热门文章