Handtrack.js-Bibliothek zur Echtzeitüberwachung von Handbewegungen (empfohlen)

【Einführung】: Handtrack.js ist eine Prototypbibliothek, die Echtzeitverfolgung und -erkennung von Handbewegungen direkt im Browser implementieren kann. Es handelt sich um ein von Tensorflow trainiertes Open-Source-Modell, für das Benutzer kein eigenes Training benötigen. Damit können Sie mit nur wenigen Codezeilen Handbewegungen in Bildern erkennen.

GitHub Homepage

https://github.com/victordibi...

1. Einleitung

Handtrack.js basiert auf dem Trainingsmodell TensorFlow -API zur Objekterkennung. Es kann Handbewegungen in Echtzeit über die Kamera überwachen. Zu den Hauptfunktionen gehören:

handtrack.js 

2. Anwendungsszenarien

Wenn Sie an gestenbasierten interaktiven Erlebnissen interessiert sind, könnte Handtrack.js hilfreich sein. Benutzer können sofort ein gestenbasiertes interaktives Erlebnis erhalten, ohne zusätzliche Sensoren oder Hardware zu verwenden.

Einige relevante Anwendungsszenarien:

• Ordnen Sie Mausbewegungen Handbewegungen zu, um Steuerungszwecke zu erreichen.
• Wenn sich die Hand mit anderen Objekten überlappt, kann dies einige bedeutsame Interaktionssignale anzeigen (wie das Berühren oder Auswählen eines Objekts).
• Szenarien, in denen menschliche Handbewegungen als Mittel zur Aktivitätserkennung dienen können (z. B. das automatische Verfolgen der Bewegungen von Schachspielern in einem Video oder Bild) oder einfach das Zählen, wie viele Personen in einem Bild oder Videobild zu sehen sind;
• Erstellen Sie mit diesen Dingen Demos, die jeder mit minimalem Setup problemlos ausführen oder erleben kann.

3. Nutzung

Sie können die Bibliotheks-URL direkt in den script -Tag aufnehmen oder sie mithilfe eines Build-Tools aus npm importieren.

3.1 Verwenden des Skript-Tags

Die minimierte JS-Datei von Handtrack.js wird derzeit auf jsdelivr gehostet, einem kostenlosen Open-Source-CDN, das es Ihnen ermöglicht, jedes NPM-Paket in Ihre Webanwendung einzubinden.

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

<img id="img" src="hand.jpg"/> 
<canvas id="canvas" class="border"></canvas>

Nachdem Sie das obige script Tag zu Ihrer html Seite hinzugefügt haben, können Sie mit der Variable handTrack auf handtrack.js verweisen, wie unten gezeigt:

<Skript>
 const img = document.getElementById('img'); 
 const canvas = document.getElementById('canvas');
 const Kontext = Canvas.getContext('2d');
 
 // Laden Sie das Modell.
 handTrack.load().then(Modell => {
 model.detect(img).then(predictions => {
  console.log('Vorhersagen: ', Vorhersagen); 
 });
 });
</Skript>

Der obige Codeausschnitt gibt die vorhergesagten Begrenzungsrahmen für das über das img -Tag übergebene Bild aus. Wenn Sie stattdessen Einzelbilder über Video oder Webcam einspeisen, können Sie die Hand „verfolgen“, wie sie in jedem Einzelbild erscheint.

3.2 Verwenden von NPM

Sie können handtrack.js mit dem folgenden Befehl als npm-Paket installieren:

npm install --save handtrackjs

Sie können das Beispiel dann in Ihre Webanwendung importieren und verwenden:

importiere * als handTrack von „handtrackjs“;

const img = document.getElementById('img');

// Laden Sie das Modell.
handTrack.load().then(Modell => {
 // Objekte im Bild erkennen.
 console.log("Modell geladen")
 model.detect(img).then(predictions => {
 console.log('Vorhersagen: ', Vorhersagen); 
 });
});

3.3 Handtrack.js API

Handtrack.js bietet zwei Hauptmethoden, load() und detect() , die zum Laden des Handerkennungsmodells bzw. zum Abrufen der Vorhersageergebnisse verwendet werden.

load() -Methode: akzeptiert einen optionalen Modellparameter und gibt ein Modellobjekt zurück, das es dem Benutzer ermöglicht, die Leistung des Modells zu steuern:

const modelParams = {
 flipHorizontal: true, // umdrehen zB für Video 
 imageScaleFactor: 0,7, // Reduzieren Sie die Größe des Eingabebilds, um die Geschwindigkeit zu steigern.
 maxNumBoxes: 20, // maximale Anzahl zu erkennender Boxen
 iouThreshold: 0,5, // ioU-Schwellenwert für Nicht-Max-Unterdrückung
 scoreThreshold: 0,79, // Konfidenzschwelle für Vorhersagen.
}

handTrack.load(modelParams).then(model => {

});

Die Methode detect() verwendet einen Eingabequellenparameter (der ein Bild-, Video- oder Canvas-Objekt sein kann) und gibt das Vorhersageergebnis des Begrenzungsrahmens für die Handposition im Bild zurück:

Ein Array von Begrenzungsrahmen mit Klassennamen und Konfidenzwerten.

model.detect(img).then(predictions => { 
  
});

Das Format der Vorhersageergebnisse ist wie folgt:

[{
 bbox: [x, y, Breite, Höhe],
 Klasse: "Hand",
 Punktzahl: 0,8380282521247864
}, {
 bbox: [x, y, Breite, Höhe],
 Klasse: "Hand",
 Punktzahl: 0,74644153267145157
}]

Handtrack.js bietet auch andere Methoden:

• model.getFPS() : Ruft FPS ab, also die Anzahl der Erkennungen pro Sekunde;
• model.renderPredictions(predictions, canvas, context, mediasource) : Zeichnet den Begrenzungsrahmen (und das Quellbild) auf der angegebenen Leinwand. wobei predictions “ das Ergebnisarray der Methode detect() ist. canvas ist ein Verweis auf html canvas -Objekt, in dem predictions gerendert werden, context ist das 2D-Context-Objekt des Canvas, mediasource ist ein Verweis auf den Eingabe-Frame (Bild, Video, Canvas usw.), der in predictions verwendet wird (er wird zuerst gerendert und der Begrenzungsrahmen wird darauf gezeichnet).
• model.getModelParameters() : gibt Modellparameter zurück;
• model.setModelParameters(modelParams) : Modellparameter aktualisieren;
• dispose() : Löschen Sie die Modellinstanz.
• startVideo(video) : Startet einen Kamera-Videostream für das angegebene Videoelement. Gibt ein promise zurück, mit dem überprüft werden kann, ob der Benutzer Videoberechtigungen erteilt hat.
• stopVideo(video) : Video-Streaming stoppen;

4. Der nächste Schritt ist rechenintensiv, hauptsächlich weil bei der Vorhersage von Begrenzungsrahmen neuronale Netzwerkoperationen erforderlich sind, was ein Punkt ist, der später verbessert und optimiert werden muss; Verfolgen von IDs über Frames hinweg: Weisen Sie jedem Objekt beim Betreten eines Frames eine ID zu und verfolgen Sie es weiter; Fügen Sie einige diskrete Körperhaltungen hinzu: zum Beispiel nicht nur Hände, sondern auch offene Hände und Fäuste erkennen).

5. Referenzen

Quellcode der Handtrack.js-Bibliothek: https://github.com/victordibi...

Online-Demo: https://victordibia.github.io...

Egohands-Datensatz: http://vision.soic.indiana.ed…

Dies ist das Ende dieses Artikels über die Handtrack.js-Bibliothek zur Echtzeitüberwachung von Handbewegungen (empfohlen). Weitere Inhalte der JS-Bibliothek zur Überwachung von Handbewegungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!