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 就会输入下面的检测结果
图
来源: http://www.jianshu.com/p/8d63ad51fd78