MachineLearninginMarketing
这是一个 js 库，其中包括已经训练好的有关跟踪手势的模型，很方便前端开发者通过调用 js 文件来实现前端手势跟踪。具体文档可以通过访问下面的网址
https://www.npmjs.com/package/handtrackjs
项目初衷是提示小朋友不要做一些坏习惯，例如挖鼻屎、咬手。
创建页面
- 在页面中
<body>
<video id="video"></video>
<canvas id="canvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js"> </script>
<script src="app.js"></script>
</body>
页面很简单就是 video 和 canvas 标签，video 用于捕获图像数据，canvas 用于绘制出手位置来提示小朋友不要做一些坏习惯，也可以通过添加 audio 标签来以语音的形式来提示小朋友不要咬手。
其中包括两个 js 一个使我们工作 js app.js 一个就是要引入的 js handtrack.js
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia
//获取 dom
const vidoe = document.querySelector("#video")
const canvas = document.querySelector("#canvas")
const context = canvas.getContext('2d')
let model;
handTrack.load()
.then(model => {
model = model
})
- 首先需要获取到浏览器的媒体对象
- 然后获取 vidoe 和 canvas 两个 dom 元素
- 加载模型，因为模型是一个训练好的文件所以需要一定时间，handTrack 提供 load 方法让我们可以异步地加载想要模型。有了模型我们可以让模型来处理图像数据计算出我们想要结果
handTrack.startVideo(vidoe)
.then(status => {
if(status){
navigator.getUserMedia({
video:{}
},stream => {
}, err => console.log(err))
}
})
然后就是开始跟踪我们手势的方法，在 startVideo 方法中传入 video 对象，我们跟踪的数据都是从这里获取的。然后在回调中我们可以获取到状态。如果 Ok
可以在通过 navigator.getUserMedia 从 video（也就是我们浏览器的 camera）以流的形式获取视频图片数据交个模型来处理。
function runDetection(){
model.detect(vidoe)
.then(predictions => {
console.log(predictions)
});
}
这个方法来输出我们模型处理 video 数据后会发挥一个有关我们手势的对象，包括位置，手数量
const modelParams = {
flipHorizontal: true, // flip e.g for video
imageScaleFactor: 0.7, // reduce input image size for gains in speed.
maxNumBoxes: 20, // maximum number of boxes to detect
iouThreshold: 0.5, // ioU threshold for non-max suppression
scoreThreshold: 0.79, // confidence threshold for predictions.
}
modelParams 是一个模型参数，对手势检测给出一些选项，例如 maxNumBoxes 最多检测手的数量，scoreThreshold 为阈值大家可以自己尝试调整看效果
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia
//获取 dom
const vidoe = document.querySelector("#video")
const canvas = document.querySelector("#canvas")
const context = canvas.getContext('2d')
let model;
handTrack.startVideo(vidoe)
.then(status => {
if(status){
navigator.getUserMedia({
video:{}
},stream => {
vidoe.srcObject = stream;
setInterval(runDetection,1000)
}, err => console.log(err))
}
});
function runDetection(){
model.detect(vidoe)
.then(predictions => {
console.log(predictions)
});
}
handTrack.load(modelParams)
.then(lmodel => {
model = lmodel
})
好了一切准备差不多我们就可以开始检测了，测试一下代码
当我们的手出现在 camera 中在 console 就会输入下面的检测结果
图
网友评论