1.添加camera摄像头与画布
- index.wxml
<!-- 配置依次为后置摄像头、关闭闪光灯、绑定错误、设置全屏 -->
<camera device-position="back"
flash="off"
binderror="error"
style="width:100%;height:100%">
<!-- 填充画布 -->
<canvas canvas-id="pose"
style="width: 100%; height: 100%;"></canvas>
</camera>
- index.js
// 创建camera
const camera = wx.createCameraContext(this)
// 计数 防止程序卡死,每隔4输出frame
let count = 0
// 创建监听
const listener = camera.onCameraFrame((frame) => {
count++
if (count === 4) {
console.log(frame)
count = 0
}
})
// listener.start()
// 获取画布
this.canvas = wx.createCanvas('pose', this)
2.下载获取模型组件
命令行中：
npm install @tensorflow-models/posenet
// index.js
const posenet = require('@tensorflow-models/posenet')
3.下载regenerator让模型组件支持异步加载
命令行中
npm install regenerator-runtime
4.小程序后台配置域名白名单
- 这样才能让模型下载成功
- 右侧开发管理->开发设置
5.加载PoseNet
async onReady() {
this.net = await posenet.load({
architecture: 'MobileNetV1', // 架构
outputStride: 16, // 步幅。该值越小，输出分辨率越大，越准确，反之速度越快，牺牲准确性
inputResolution: 193, // 加载进模型前的宽高，一个参数默认宽高相同，越小越快，越大越准确
multiplier: 0.5, // 卷积深度，越大越准确，牺牲速度
})
console.log(this.net)
}
6.处理imgData
// frame 四通道数据，模型需要三通道数据，需转换成三通道数据
// 1.创建三通道数据集
const imgData = { data: new Uint8Array(frame, this.data), width: frame.width, height: frame.height }
// 2.优化内存空间tidy,防止内存泄漏
const imgSlice = tf.tidy(() => {
// 3. 转换TF可识别的对象 参考文档：https://js.tensorflow.org/api/latest/
const imgTensor = tf.browser.fromPixels(imgData, 4)
// 4. 切取tf一部分张量
// 参数：宽，高，通道 （宽高从0开始，-1保留结束，通道只需要3通道，去除aphi 透明通道，所以设置3）
return tf.slice(imgTensor,[0, 0, 0], [-1, -1, 3])
})
console.log(imgSlice)
}
7.获取预测模型
// 5.获取Pose预测数据
const pose = await net.estimateSinglePose(imgSlice,{flipHorizontal:false})
console.log(pose)
8.问题
发现识别后准确度老是小于0.3，绘制不了，有木有大佬知道是怎么回戏嗷嗷嗷(=￣ω￣=)喵了个咪
8.参考代码
链接：pan.baidu.com/s/1lr2-YUqu… 提取码：j53z
