内容简介：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!
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
白话机器学习算法
[新加坡] 黄莉婷、[新加坡] 苏川集 / 武传海 / 人民邮电出版社 / 2019-2 / 49.00元
与使用数学语言或计算机编程语言讲解算法的书不同，本书另辟蹊径，用通俗易懂的人类语言以及大量有趣的示例和插图讲解10多种前沿的机器学习算法。内容涵盖k均值聚类、主成分分析、关联规则、社会网络分析等无监督学习算法，以及回归分析、k最近邻、支持向量机、决策树、随机森林、神经网络等监督学习算法，并概述强化学习算法的思想。任何对机器学习和数据科学怀有好奇心的人都可以通过本书构建知识体系。一起来看看 《白话机器学习算法》 这本书的介绍吧!
