handsfree
Version:
Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap ✨👌
123 lines (109 loc) • 3.11 kB
HTML
<head>
<!-- Include Handsfree.js -->
<link rel="stylesheet" href="https://unpkg.com/handsfree@8.5.1/build/lib/assets/handsfree.css" />
<script src="https://unpkg.com/handsfree@8.5.1/build/lib/handsfree.js"></script>
<style>
.handsfree-canvas-video {
background: #000;
opacity: 0.1;
}
</style>
</head>
<body>
<!-- Start/stop button with helper classes -->
<div class="text-center">
<button class="handsfree-show-when-stopped handsfree-hide-when-loading" onclick="toggleModel('hands')">Start Hand Tracking</button>
<button class="handsfree-show-when-loading" disabled>Loading ...</button>
<button class="handsfree-show-when-started handsfree-hide-when-loading" onclick="handsfree.stop()">Stop Handsfree</button>
</div>
<!-- Pincher table with helper classes to toggle things on/off -->
<section>
<h1>Pinch fingers and drag to scroll the area under the pointers.</h1>
<table class="multi-hand-scrollers">
<tr>
<td width="50%"><div><div></div></div></td>
<td width="50%"><div><div></div></div></td>
</tr>
<tr>
<td width="50%"><div><div></div></div></td>
<td width="50%"><div><div></div></div></td>
</tr>
</table>
<!-- We'll have the debugger injected into here -->
<div id="debugger-holder"></div>
</section>
<!-- Instantiate and start it -->
<script>
const handsfree = new Handsfree({
// Show debug inside a specific element
showDebug: true,
setup: {
wrap: {
$parent: document.querySelector('#debugger-holder')
}
}
})
// Enable browser plugins
handsfree.enablePlugins('browser')
// Toggle Model
// @todo Actually add this to Handsfree
function toggleModel(name) {
const config = {}
config[name] = !handsfree.model[name].enabled
config.autostart = true
handsfree.update(config)
}
</script>
<!-- Demo styles -->
<style>
button {
font-size: 1em;
padding: .5em;
}
h1, table {
margin-top: 60px;
}
section {
width: 800px;
max-width: 100%;
margin: auto;
}
table {
width: 100%
}
.finger-pincher {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 32px;
background: #000;
margin: auto;
}
.finger-pincher:last-child {
background: #f00;
}
.text-center {
text-align: center;
}
table {
width: 100%;
display: table;
table-layout: fixed;
}
.multi-hand-scrollers td {
padding: 0;
}
.multi-hand-scrollers td > div {
max-height: 300px;
overflow: auto;
}
.multi-hand-scrollers td > div > div {
height: 1000px;
width: 1000px;
background: url("https://i.imgur.com/W4ja4fR.png");
background-repeat: space;
background-size: 32px;
opacity: 0.25;
}
</style>
</body>