Handtrack.js — let the flames dancing in your hands

栏目: IT技术 · 发布时间: 4年前

内容简介：First of all, simply include the scriptOr you can install it via npm for use in a TypeScript / ES6 projectTo stream your webcam into the browser, I utilize the npm JavaScript module

Implementation

# Step 1 : Include handtrack.js

First of all, simply include the script handtrack.js in the <head> section of the html file.

<script src="https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js"> </script>

Or you can install it via npm for use in a TypeScript / ES6 project

npm install --save handtrackjs

# Step 2 : Stream webcam to browser

To stream your webcam into the browser, I utilize the npm JavaScript module webcam-easy.js , which provides an easy to use module that can access webcam and take a photo. To find out more details about that, please refer to my previous blog :

# Step 3 : Load HandTrack Model

In order to perform hand tracking, we first need to load the pre-trained HandTrack model, by calling the API of handTrack.load(modelParams) . HandTrack comes with a few optional parameters of the model:

flipHorizontal — default value: True

flip e.g for video

imageScaleFactor — default value: 0.7

reduce input image size for gains in speed

maxNumBoxes — default value: 20

maximum number of boxes to detect

iouThreshold — default value: 0.5

ioU threshold for non-max suppression

scoreThreshold — default value: 0.99

confidence threshold for predictions

const modelParams = {
 flipHorizontal: true, 
 maxNumBoxes: 20, 
 iouThreshold: 0.5,
 scoreThreshold: 0.8
}handTrack.load(modelParams).then(mdl => { 
 model = mdl;
 console.log("model loaded");
});

# Step 4 : Hand detection

Next, we start to feed the webcam stream through the HandTrack model to perform hand detection, by calling the API of model.detect(video) . It takes an input image element (can be an img , video , canvas tag) and returns an array of bounding boxes with class name and confidence level.

model.detect(webcamElement).then(predictions => {
 console.log("Predictions: ", predictions);
 showFire(predictions);
});

Return of predictions would look like:

[{
 bbox: [x, y, width, height],
 class: "hand",
 score: 0.8380282521247864
}, {
 bbox: [x, y, width, height],
 class: "hand",
 score: 0.74644153267145157
}]

# Step 5 : Show magic fire

In the above function, we get the bounding box of the hand position, now we can use it to show the fire GIF image in your hand.

HTML

Overlay the canvas layer on top of the webcam element

<video id="webcam" autoplay playsinline width="640" height="480"></video><div id="canvas" width="640" height="480"></div>

JavaScript

Set the size and position of the fireElement , and append it to the canvas layer.

function showFire(predictions){
 if(handCount != predictions.length){
 $("#canvas").empty();
 fireElements = [];
 } 
 handCount = predictions.length;

 for (let i = 0; i < predictions.length; i++) {
 if (fireElements.length > i) { 
 fireElement = fireElements[i];
 }else{
fireElement = $("<div class='fire_in_hand'></div>");
 fireElements.push(fireElement);
 fireElement.appendTo($("#canvas"));
 }
 var fireSizeWidth = fireElement.css("width").replace("px","");
 var fireSizeHeight = fireElement.css("height").replace("px","");
 var firePositionTop = hand_center_point[0]- fireSizeHeight;
 var firePositionLeft = hand_center_point[1] - fireSizeWidth/2;
fireElement.css({top: firePositionTop, left: firePositionLeft, position:'absolute'});
 }
}

CSS

set the background-image to be the fire.gif image

.fire_in_hand {
 width: 300px;
 height: 300px;
 background-image: url(../images/fire.gif);
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
}

That’s pretty much for the code! Now you should be good to start showing the magic fire in your hands!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

Handtrack.js — let the flames dancing in your hands

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Head First Python（中文版）

巴里（Barry.P.） / 林琪等 / 中国电力出版社 / 2012-3-1 / 68.00元

你想过可以通过一本书就学会Python吗？《Head First Python(中文版)》超越枯燥的语法和甩法手册，通过一种独特的方法教你学习这种语言。你会迅速掌握Python的基础知识，然后转向持久存储、异常处理、Web开发、SQLite、数据加工和lGoogle App Engine。你还将学习如何为Android编写移动应用，这都要归功于Python为你赋予的强大能力。本书会提供充分并且完备......一起来看看《Head First Python（中文版）》这本书的介绍吧!

码农工具