用 js 搭建神经网络(3) 跟中手势(上)

0.501字数 482阅读 114

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 就会输入下面的检测结果


推荐阅读更多精彩内容