Hand tracking detects and follows human hands in visual input. A trained model runs in the browser through TensorFlow.js, while a Web Component hides the video, canvas, and machine-learning complexity behind a reusable interface. section 15.4
Listing 15.20. Hand-tracking Web Component
import Video from './video.js';
export default class HandTracker extends Video { #1
static get HAND_LOCATION() { return 'onHandLocation'; }
constructor() {
super();
const modelParams = {
flipHorizontal: true, // flip e.g for video
maxNumBoxes: 20, // maximum number of boxes to detect
iouThreshold: 0.5, // ioU threshold for non-max suppression
scoreThreshold: 0.6, // confidence threshold for predictions.
};
handTrack.load(modelParams) #2
.then(lmodel => {
this._model = lmodel;
});
}
runDetection() {
if (!this._model) { return; }
this._model.detect(this.dom.video).then(predictions => {
const pts = [];
for (let c = 0; c < predictions.length; c++) {
const centerpoint = {};
centerpoint.x = (predictions[c].bbox[0] +
(predictions[c].bbox[2] / 2));
centerpoint.y = (predictions[c].bbox[1] +
(predictions[c].bbox[3] / 2));
pts.push(centerpoint);
}
this._model.renderPredictions(predictions, this.dom.canvas,
this.canvasContext, this.dom.video);
const ce = new CustomEvent( HandTracker.HAND_LOCATION,
{ detail: { points: pts }, bubbles: true, composed: true });
this.dispatchEvent(ce); #3
});
}
init() { #4
super.init();
handTrack.startVideo(this.dom.video).then((status) => {
this.onResize();
console.log(this.visibleVideoRect)
if (status) { this.runDetection(); }
});
}
getCurrentFrameData(mode, noredraw) { #5
this.runDetection();
}
}
if (!customElements.get('wcia-handtracker')) {
customElements.define('wcia-handtracker', HandTracker);
}
Extend a video component, configure Handtrack.js, load its model, and detect hands from the component’s video element. section 15.4
Camera-based hand tracker
A custom element combines camera input with canvas display and reports tracked points through an onHandLocation event. The same component can drive an interactive Web Harp interface. section 15.4
