In diesem Artikel erfahren Sie, wie Sie TrackingJs für die Bild- und Videoverfolgung verwenden, um Computer Vision- und Objekt- und Farberkennungsverfolgungsfunktionen einzurichten.

Dieser Blog ist eine Übersetzung aus der englischen Version. Sie können das Original von [hier] überprüfen (https://www.alibabacloud.com/blog/computer-vision-on-the-web-with-trackingjs_595406). Einige maschinelle Übersetzungen werden verwendet. Wir würden uns freuen, wenn Sie auf Übersetzungsfehler hinweisen könnten. * *

Was sind TrackingJs?

Tracking.js ist ein JavaScript-Framework, mit dem Entwickler Computer Vision- und Objekterkennungsfunktionen problemlos in Webanwendungen einbetten können, ohne dass Codierung oder komplexe Algorithmen erforderlich sind. Tracking.js ist relativ einfach und benutzerfreundlich und ähnelt in vielerlei Hinsicht JQuery. Es bietet Tracker, Dienstprogrammfunktionen für verschiedene Rechenvorgänge und andere Webkomponenten, um Ihnen das Leben zu erleichtern.

Tracker-Typ

Der Tracker in track.js ist ein JS-Objekt, das Elemente von Bildern und Videos erkennt und verfolgt, einschließlich Gesichter, Farben und Objekte. Tracking.js bietet auch die Möglichkeit, benutzerdefinierte Tracker zu erstellen, um zu erkennen, was Ihnen gefällt. Werfen wir einen Blick auf einen bestimmten Tracker.

Color Tracker Mit dem Color Tracker können Sie einen bestimmten Satz von Farben in einem Bild oder Video verfolgen. Standardmäßig unterstützt dieser Tracker die Farben Magenta, Cyan und Gelb. Sie können jedoch auch andere benutzerdefinierte Farben hinzufügen. Werfen wir einen Blick auf Tracker.

Dies ist ein Ausschnitt aus dem Code, der auf [GitHub] verfügbar ist (https://gist.github.com/dassiorleando/0feb0ce02f2c72ae1ccdd6bf6a855743?spm=a2c65.11461447.0.0.2cc43091iShshP).

Hier ist die Codebeschreibung.

Zeile 6: Enthält Tracking-min.js.
Zeile 14: Definiert eine Videokomponente.
Zeile 21: Erstellen Sie eine Instanz von ColorTracker.

var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

Zeile 23: Definiert, was passiert, wenn ein Track-Ereignis auftritt. Das heißt, wenn das Video ausgeführt wird, beginnt Tracking.js zu analysieren, was das Ereignisobjekt enthält. Das Ereignisobjekt enthält ein Datenattribut, das getestet wird, um festzustellen, ob seine Länge von 0 abweicht. Dies bedeutet, dass Daten vorhanden sind und dass Daten tatsächlich Informationen über die Farbe darstellen, die irgendwo im Video / Bild gefunden wurde. Die Daten befinden sich also dort, wo die Farbe gefunden wurde (x-Achse, y-Achse). Enthält die Höhe und Breite des Bereichs, in dem es enthalten ist, sowie ein Farbetikett. Dies ist in Zeile 29 abgedruckt.
Zeile 34 Startet die Verfolgung von Videokomponenten im DOM. Nun wollen wir sehen, wie man eine benutzerdefinierte Farbe hinzufügt. Ich benutze die Funktion registerColor mit Farbetiketten und Rückruffunktionen als Parameter.

Ich habe versucht, den in [GitHub] veröffentlichten Code (https://gist.github.com/dassiorleando/d3fa7e40811ef0953f0203753fe85394?spm=a2c65.11461447.0.0.2cc43091iShshP) zu extrahieren.

In den Zeilen 27 und 34 sehen Sie, dass wir diese Funktion verwendet haben, um zwei neue Farben zu erstellen. Tatsächlich verwendet Tracking.js die RGB-Darstellung, um Farben zu verarbeiten. Daher sind standardmäßig nur Magenta-, Cyan- und Gelbfarben in der Bibliothek registriert. Wenn Sie jedoch weitere Farben hinzufügen möchten, wird diese Funktion verwendet Sie können lib mitteilen, wie Farben mithilfe von erkannt werden.

In unserem Fall haben wir Grün und Schwarz hinzugefügt, da sie ihre eigenen RGB-Darstellungen haben. (0,255,0) und (0,0,0,0). Der zweite Parameter ist ein Rückruf, der die Logik zum Erkennen der Farbe enthält.

Es ist sehr einfach, Tracking.js sendet die Tracking-Farbe (im RGB-Format) an diesen Rückruf. Im Fall von Grün (absolutes Grün) lautet der RGB-Code beispielsweise (0,255,0). Überprüfen Sie daher, ob die empfangenen Daten diesen entsprechen, und Tracking.js weiß zu diesem Zeitpunkt, ob dieser Bereich berücksichtigt werden sollte. Es wird also nur true / false zurückgegeben.

tracking.ColorTracker.registerColor('green', function(r, g, b) {
  if (r == 0 && g == 250 && b == 0) {
     return true;      
  }
  return false;   
});

Als letztes müssen Sie der Farbliste beim Initialisieren des Trackers ein Farbetikett hinzufügen.

var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow','green']);

Object Tracker Dieser Teil bezieht sich auf das Verfolgen dessen, was Sie in einer Reihe von Bildern und Videos verfolgen möchten. Zu diesem Zweck ist es am besten, trainierte Daten als Eingabe für das zu liefern, was der Tracker verfolgen soll. Glücklicherweise enthält TrackingJs drei Datensätze: Augen, Mund und Gesicht. Mal sehen, wie diese Datensätze funktionieren.

Lassen Sie uns ein Beispiel für die Objekterkennung implementieren. Der Code lautet hier.

Hier fügen wir oben im Dateibaum einen Datensatz ein, der darauf trainiert ist, Gesichter, Augen und Mund zu erkennen. Standardmäßig sind dies die einzigen in dieser Bibliothek verfügbaren Bäume. Dieser [Link](https://medium.com/r?spm=a2c65.11461447.0.0.2cc43091iShshP&url=https%3A%2F%2Fcoding-robin.de%2F2013%2F07%2F22%2Ftrain-your-own-opencv- Klicken Sie auf haar-classifier.html), um zu sehen, wie Sie ein benutzerdefiniertes Dataset erstellen, um neue Objekte zu erkennen.

Es gibt eine plot () -Funktion, deren Aufgabe es ist, ein Rechteck um das erkannte Objekt zu zeichnen.

Das Ergebnis ist wie folgt.

Nützlichkeit

Das Erstellen eines Programms, das etwas mithilfe eines Computers visualisiert, ist in vielerlei Hinsicht sehr schwierig. Sie müssen beispielsweise überlegen, wie Sie die Kamera des Benutzers öffnen, um mit den verfügbaren Pixeln umzugehen, Kurven im Bild zu erkennen und andere umfangreiche Berechnungen durchzuführen. Dienstprogramme sind leichte, benutzerfreundliche APIs für Webentwickler. In der Tat sind einige der verfügbaren Dienstprogramme: Funktionserkennung, Faltung, Graustufen, Bildunschärfe, Integralbild, Sobel, Viola-Jones.

Funktionserkennung

Diese Funktion sucht nach den Ecken der im Bild verfügbaren Objekte. Die API sieht folgendermaßen aus:

var corners = tracking.Fast.findCorners(pixels, width, height);

Faltung (Faltungsberechnung)

Als nächstes kommt der Faltungsfilter, der zum Erkennen, Verwischen, Schärfen, Prägen usw. von Kanten im Bild nützlich ist. Es gibt drei Möglichkeiten, ein Bild zu falten: horizontale, vertikale und separate Falten.

tracking.Image.horizontalConvolve(pixels, width, height, weightsVector, opaque);
tracking.Image.verticalConvolve(pixels, width, height, weightsVector, opaque);
tracking.Image.separableConvolve(pixels, width, height, horizWeights, vertWeights, opaque);

Gray Scale Graustufen werden verwendet, um den Helligkeitswert auf der Tonseite der Graustufen des Bildes zu ermitteln.

tracking.Image.grayscale(pixels, width, height, fillRGBA);

Bildunschärfe

Tracking.js implementiert einen Unschärfealgorithmus namens Gaußscher Weichzeichner, bei dem es sich um eine Art Unschärfeeffekt handelt. Dieser besondere Unschärfeeffekt wird hauptsächlich in Multimedia-Software verwendet und hilft, Bildrauschen und unerwünschte Details zu reduzieren. Die Syntax zum Verwischen eines Bildes mit einer einzelnen Codezeile lautet:

tracking.Image.blur(pixels, width, height, diameter);

Integrales Bild

Mit dieser Funktion können Entwickler Wertesummen in einer rechteckigen Teilmenge des Rasters haben, die auch als summierte Flächentabelle bezeichnet wird. Auf dem Gebiet der Bildverarbeitung wird es auch als integriertes Bild bezeichnet. So berechnen Sie dies mit Tracking.js:

tracking.Image.computeIntegralImage(
  pixels, width, height,
  opt_integralImage,opt_integralImageSquare,opt_tiltedIntegralImage,
  opt_integralImageSobel
 );

Sobel Diese Funktion berechnet die vertikalen und horizontalen Farbverläufe des Bildes und kombiniert die berechneten Bilder, um die Bildränder zu ermitteln. Der Sobel-Filter wird implementiert, indem zuerst das Bild grau skaliert, dann die horizontalen und vertikalen Verläufe berechnet und schließlich die Verlaufsbilder kombiniert werden, um das endgültige Bild zu erstellen.

Die API lautet wie folgt.

tracking.Image.sobel(pixels, width, height);

Viola-Jones Viola-Jones Das Objekterkennungsframework bietet Echtzeit- und wettbewerbsfähige Objekterkennungsraten. Ist das erste Objekterkennungsframework, das in Echtzeit bereitgestellt wird. Diese Technik wird in der Implementierung von "Tracking.ObjectTracker" verwendet.

So verwenden Sie Viola-Jones zum Erkennen von Objekten in Bildpixeln mithilfe von Tracking.js:

tracking.ViolaJones.detect(pixels, width, height, initialScale, scaleFactor, stepSize, edgesDensity, classifier);

Webkomponente

Das Schreiben von Computer-Vision-Programmen war oft schwierig, selbst einfache Aufgaben erforderten viel Rechenaufwand, und das Codieren war sehr iterativ. Der Hauptzweck dieser großartigen Bibliothek besteht darin, eine komplexe Verarbeitung im Web mit einer intuitiven API, Web Components (https://developer.mozilla.org/en-US/docs/), bereitzustellen. Web / Web_Components? Spm = a2c65.11461447.0.0.2cc43091iShshP) ist enthalten.

Webkomponenten sind in vielerlei Hinsicht ein neues Konzept in der modernen Webentwicklung. Ihr Zweck ist es, ein einfacheres logisches Kapselungsmodell einzuführen. Auf diese Weise können Entwickler die gesamte Logik ihrer Funktionalität in HTML-Elementen zusammenfassen und sie so natürlich wie DOM-Elemente verwenden. Es verwendet dieselben Konzepte hinter Bibliotheken wie "Reagieren" und "Winkel". Im Gegensatz zu diesen sind die Webkomponenten jedoch vollständig in den Webbrowser integriert.

Daher bietet Tracking.js eine einfache Möglichkeit, Computer Vision im Web zu realisieren, indem ein Teil der API eingebettet wird, wie oben im oben beschriebenen Webkomponentenelement erläutert. Um sie zu verwenden, müssen Sie sie zuerst über das Paket bower installieren. Sie können die TrakingJs-Webkomponente einfach installieren, indem Sie den folgenden Befehl eingeben:

bower install tracking-elements --save

Dies kann verwendet werden, um einige grundlegende Elemente wie das Farbelement (zum Erkennen von Farben) und das Objektelement (zum Erkennen von Elementen) bereitzustellen. Das Hauptprinzip der TrackingJ-Webkomponenten besteht darin, native Webelemente "(

Farbelement

Lassen Sie uns einige Farben erkennen: Magenta, Cyan, Gelb:

<!-- detect colors into an image -->
<img is="image-color-tracking" target="magenta cyan yellow" />
<canvas is="canvas-color-tracking" target="magenta cyan yellow"></canvas>
<video is="video-color-tracking" target="magenta cyan yellow"></video>

Der obige Code verwendet "is =" image-color-tracking "", um anzugeben, dass das native "" -Element erweitert wird, um den Tracker über die Zielfarbe zu informieren. Ich benutze target =" magenta cyan gelb ".

Objektelement

Lass es uns in der Praxis tun.

Hier ist das Code-Snippet (https://gist.github.com/dassiorleando/fb5c5f71ad76e3ec360530c2d0ac339e?spm=a2c65.11461447.0.0.2cc43091iShshP).

Zeile 5: Importieren Sie die Polyfüllung, um die Funktionalität der Webkomponente zu aktivieren.
Zeile 7: Importieren Sie die Webkomponente.
Zeile 11: Die Webkomponente selbst wird verwendet, indem die native Komponente mit dem Attribut "is" erweitert und das zu verfolgende Objekt mit dem Attribut "target" definiert wird.
Zeile 18: Fügt dem Element einen Ereignis-Listener hinzu, um auf Track-Ereignisse zu warten, die auftreten, wenn ein Gesicht erkannt wird.
Zeile 20: Rufen Sie die Funktion plotRectagle () auf, um ein Rechteck um den erkannten Bereich zu zeichnen.

Fazit

In diesem Artikel haben wir gesehen, wie Sie Computer Vision im Web installieren und anwenden und TrackingJs verwenden, um einige Objekt- und Farberkennungsfunktionen auszuführen.

Alibaba Cloud ist der Cloud-Infrastrukturbetreiber Nr. 1 (2019 Gartner) im asiatisch-pazifischen Raum mit zwei Rechenzentren in Japan und mehr als 60 Verfügbarkeitszonen weltweit. Klicken Sie hier, um weitere Informationen zu Alibaba Cloud zu erhalten. Offizielle Seite von Alibaba Cloud Japan *

[JAVA] So richten Sie Computer Vision für die Verfolgung von Bildern und Videos mit TrackingJs ein