jeelizAR
1.0.0
WARNUNG: Dieses Repository ist veraltet und nicht mehr aufrechterhalten. Bitte verwenden Sie stattdessen Webar.rocks.Object.
Eigenständiger Kaffee - Genießen Sie einen kostenlosen Kaffee von Jeeliz!
Die Kaffeetasse wird erkannt und eine 3D -Animation wird in Augmented Reality gespielt.
Diese Demo stützt sich nur auf Jeelizar und drei.js.
Hier sind die Hauptmerkmale der Bibliothek:
/demos/ : Quellcode der Demonstrationen,/dist/ : Herz der Bibliothek:jeelizAR.js : Main Minified Skript,/helpers/ : Skripte, mit denen Sie diese Bibliothek in bestimmten Anwendungsfällen verwenden können (wie WebXR),/libs/ : 3. Parteibibliotheken und 3D -Motoren, die in den Demos verwendet werden,/neuralNets/ : Neuronale Netzwerkmodelle. Dies sind einige Demonstrationen dieser Bibliothek. Einige benötigen ein bestimmtes Setup.
Sie können den Jeeliz YouTube -Kanal oder den @Startupjeeliz Twitter -Konto abonnieren, um über unsere neuesten Entwicklungen informiert zu werden.
Wenn Sie mit dieser Bibliothek eine Bewerbung oder eine unterhaltsame Demonstration gestellt haben, würden wir sie gerne sehen und hier einen Link einfügen! Kontaktieren Sie uns auf Twitter @Startupjeeliz oder LinkedIn.
Diese Demonstrationen funktionieren in einem Standard -Webbrowser. Sie benötigen nur Webcam -Zugriff.
Um diese Demonstrationen auszuführen, benötigen Sie einen Webbrowser, der WebXR implementiert. Wir hoffen, dass es in allen Webbrowsern bald implementiert wird!
Dann können Sie diese Demos ausführen:
Diese Demos werden in einem Standard -Webbrowser auf Mobilgeräten oder Tablet ausgeführt. Sie verlassen sich auf den erstaunlichen 8. Wandmotor. Wir verwenden die Webversion der Engine und starteten mit dem Web -Proben der drei.js. Die Web -Engine wird noch nicht öffentlich veröffentlicht, daher müssen Sie:
index.html der Demo, die Sie ausprobieren möchten (suchen und ersetzen Sie <WEBAPPKEY> durch Ihren realen Schlüssel).Die Demo:
Das grundlegendste Integrationsbeispiel dieser Bibliothek ist die erste Demo, die Debug -Erkennungsdemo. In index.html geben wir in den Abschnitt <head> das Hauptbibliotheksskript, /dist/jeelizAR.js , die MediaStramAPI (früher als getUserMedia API bezeichnet) Helper, /helpers/JeelizMediaStreamAPIHelper.js und die Demo -Skript, Demo.js: demo.js :
< script src = " ../../dist/jeelizAR.js " > </ script >
< script src = " ../../helpers/JeelizMediaStreamAPIHelper.js " > </ script >
< script src = " demo.js " > </ script > Im Abschnitt <body> von index.html setzen wir ein <canvas> -Element ein, mit dem der von der Bibliothek für Deep Learning -Berechnungen verwendete WebGL -Kontext initialisiert wird, und möglicherweise ein Debug -Rendering anzuzeigen:
< canvas id = ' debugJeeARCanvas ' > </ canvas > In demo.js erhalten wir dann den Webcam -Video -Feed nach dem Laden der Seite mit dem MediaStream API -Helfer:
JeelizMediaStreamAPIHelper . get ( DOMVIDEO , init , function ( ) {
alert ( 'Cannot get video bro :(' ) ;
} , {
video : true //mediaConstraints
audio : false
} ) Sie können diesen Teil durch ein statisches Video ersetzen und Medienkontrakten auch angeben, um die Videoauflösung anzugeben. Wenn der Video -Feed erfasst wird, wird die Callback -Funktion init gestartet. Es initialisiert diese Bibliothek:
function init ( ) {
JEEARAPI . init ( {
canvasId : 'debugJeeARCanvas' ,
video : DOMVIDEO ,
callbackReady : function ( errLabel ) {
if ( errLabel ) {
alert ( 'An error happens bro: ' , errLabel ) ;
} else {
load_neuralNet ( ) ;
}
}
} ) ;
} Die Funktion load_neuralNet lädt das neuronale Netzwerkmodell:
function load_neuralNet ( ) {
JEEARAPI . set_NN ( '../../neuralNets/basic4.json' , function ( errLabel ) {
if ( errLabel ) {
console . log ( 'ERROR: cannot load the neural net' , errLabel ) ;
} else {
iterate ( ) ;
}
} , options ) ;
}Anstatt die URL des neuronalen Netzwerks zu geben, können Sie auch das analysierte JSON -Objekt geben.
Die Funktion iterate startet die Iterationsschleife:
function iterate ( ) {
var detectState = JEEARAPI . detect ( 3 ) ;
if ( detectState . label ) {
console . log ( detectState . label , 'IS DETECTED YEAH !!!' ) ;
}
window . requestAnimationFrame ( iterate ) ;
} Das JEEARAPI.init nimmt ein Wörterbuch als Argument mit diesen Eigenschaften an:
<video> video : HTML5 -Videoelement (kann aus dem Medienstream -API -Helfer kommen). Wenn false , aktualisieren Sie die Quellstextur von einem videoFrameBuffer object , das bei Aufrufen von JEEARAPI.detect(...) (wie in der webxr -Demos) angegeben ist.<dict> videoCrop : Weitere Informationen finden Sie in Video -Ernteabschnitt<function> callbackReady : Rückruffunktion, die bei der Fertigstellung gestartet wurden oder wenn ein Fehler vorliegt. Mit der Fehleretikett aufgerufen oder false ,<string> canvasId : ID der Leinwand, aus der der für Deep Learning -Verarbeitung verwendete WebGL -Kontext erstellt wird,<canvas> canvas <canvas> Wenn keine canvasId bereitgestellt wird<dict> scanSettings : Weitere Informationen finden Sie unter Abschnitt der Scaneinstellungen<boolean> isDebugRender : boolean. Wenn es wahr ist, wird im Element <canvas> ein Debug -Rendering angezeigt. Nützlich zum Debuggen, aber es sollte für die Produktion auf false eingestellt werden, da es GPU -Computerressourcen verschwendet.<int> canvasSize : Größe der Erkennungs -Leinwand in Pixeln (sollte quadratisch sein). Sonderwert -1 Halten Sie die Leinwandgröße. Standard: 512 .<boolean> followZRot : arbeitet nur mit neuronalen Netzwerkmodellen, die Tonhöhe, Rollen- und Gierwinkel ausgeben. Erstellen Sie das Eingangsfenster mit der Rolle der aktuellen Erkennung während der Tracking -Stufe.[<float>, <float>] ZRotRange : funktioniert nur, wenn followZRot = true . Randomisieren Sie den Anfangsdrehungswinkel. Werte sind in Radians. Standard: [0,0] . Die Funktion, die die Erkennung auslöst, lautet JEEARAPI.detect(<int>nDetectionsPerLoop, <videoFrame>frame, <dictionary>options) .
<int> nDetectionPerLoop ist die Anzahl der aufeinanderfolgenden Erkennungen. Je höher es ist, desto schneller wird die Erkennung sein. Aber es kann die gesamte Anwendung verlangsamen, wenn es zu hoch ist, da der Funktionsaufruf zu viel GPU -Ressourcen verbraucht. Ein Wert zwischen 3 und 6 wird empfohlen. Wenn der Wert 0 beträgt, ist die Anzahl der Erkennungen pro Schleife zwischen 1 und 6 mit einem Anfangswert von 3 anpassungsfähig.<videoFrame> frame wird nur mit WebXR -Demos verwendet (siehe Abschnitt "WebXR Integration). Ansonsten auf null einstellen,<dictionary> options sind ein optionales Wörterbuch, das diese Eigenschaften haben kann:<float> thresholdDetectFactor : Ein Faktor, der auf die Erkennungsschwellen für das erkannte Objekt angewendet wird. Der Standardwert ist 1 . Wenn es beispielsweise 0.5 entspricht, ist die Erkennung 2 -mal einfacher.<string> cutShader : Tenden Sie den Standard -Shader, der zum Ernte des Videobereichs verwendet wird. Die möglichen Werte sind:null : Standardwert, wendet keinen Filter an und behält RGBA -Kanäle.IOS : Wert optimiert für iOS -Geräte nur für die Verwendung von WebXR. Kopieren Sie den roten Kanal in die anderen Farbkanäle und wenden Sie einen 5 -Pixel -Medianfilter aufmedian : Wenden Sie einen 3x3 -Medianfilter auf RGB -Kanäle getrennt an,null : Standardwert, wendet keinen Filter an und behält die RGBA -Kanäle auf<boolean> isSkipConfirmation : Erkennung erleichtert (empfindlicher), kann aber mehr falsch positive positive Ergebnisse auslösen. Standard: false ,<boolean> isKeepTracking : Wenn wir nach seiner Erkennung ein Objekt weiter verfolgen sollten. Standard: false ,[<float>,<float>,<float>] trackingFactors : Tracking -Empfindlichkeit für die Übersetzung entlang der x, y -Achse und Skala. Standard: 1.0 ,<float> thresholdDetectFactorUnstitch : Verfolgen Sie die Verfolgung, wenn die Erkennungsschwelle unter diesem Wert liegt. Nur verwendet, wenn isKeepTracking=true . Sollte kleiner sein als thresholdDetectFactor ,<float> secondNeighborFactor : Bestätigen Sie kein Objekt, wenn ein anderes Objekt einen Erkennungsbewertungswert von mindestens secondNeighborFactor * objectDetectionScore hat. Standardwert ist 0.7 ,<int> nLocateAutomoves : Anzahl der Erkennungsschritte in der LOCATE (JUTE verschieben das Eingangserkennungsfenster mit Rauschen) (Standardeinstellung: 10 ),<float> locateMoveNoiseAmplitude : Rauschen während der LOCATE relativ zu den Abmessungen der Eingangsfenster (Standard: 0.01 ),<int> nConfirmAutoMoves : Anzahl der Erkennungsschritte während der CONFIRM (Standardeinstellung: 8 ),<float> thresholdConfirmOffset : ABord bestätigen Stadium, wenn die Erkennungsbewertung unter dem Objekterkennungsschwellenwert + dieser Wert liegt (Standard: -0.02 ).<float> confirmMoveNoiseAmplitude : Rauschen während der CONFIRM relativ zu den Abmessungen für Eingangsfenster (Standard: 0.01 ),<int> nConfirmUnstitchMoves : Im Keep Tracking -Modus ( isKeepTracking = true , stoppen Sie die Verfolgung nach dieser Anzahl der erfolglosen Erkennungen (Standard: 20 ).[<float> position, <float> angle] : Wenn mehrdeutige Erkennung (2 Objekte enge Punktzahlen haben) während der CONFIRM , neigen Sie das Eingangsfenster. Der erste Wert ist relativ zu Fensterabmessungen, der zweite ist der Winkel in Grad (Standard: [0.1, 10] ),<float> confirmScoreMinFactorDuringAutoMove : Während der Bestätigungsstufe minimale Punktzahl für jeden Schritt. Wenn die Punktzahl kleiner als dieser Wert ist, kehren Sie zur Sweep -Stufe zurück. Die Standardeinstellung ist 0.3 . Die Erkennungsfunktion gibt ein Objekt, detectState zurück. Zum Optimierungszweck wird es durch Referenz zugewiesen, nicht durch Wert. Es ist ein Wörterbuch mit diesen Eigenschaften:
<float> distance : Lernabstand, dh Distanz zwischen der Kamera und dem Objekt während des Trainings des Datensatzes. Gibt einen Hinweis auf die tatsächliche Skala des Objekts,<bool/string> label : false Wenn kein Objekt erkannt wird, sonst die Beschriftung des erkannten Objekts. Es befindet sich immer in Großbuchstaben und hängt vom neuronalen Netzwerk ab.<array4> positionScale : Array von Floats, die 4 Werte speichern: [x,y,sx,sy] wobei x und y die normalisierten relativen Positionen des Zentrums des erkannten Objekts sind. sx , sy sind die relativ normalisierten Skalenfaktoren des Erkennungsfensters:x ist die Position auf der horizontalen Achse. Es geht von 0 (links) bis 1 (rechts),y ist die Position auf der vertikalen Achse. Es geht von 0 (unten) auf 1 (oben),sx ist die Skala auf der horizontalen Achse. Es geht von 0 (die Größe ist null) auf 1 (in voller Größe auf der horizontalen Achse).sy ist die Skala auf der vertikalen Achse. Es geht von 0 (Nullgröße) bis 1 (in voller Größe auf der vertikalen Achse).<float> yaw : Der Winkel im Radian der Rotation des Objekts um die vertikale (y) Achse,<float> detectScore : Erkennungsbewertung des erkannten Objekts zwischen 0 (schlechte Erkennung) und 1 (sehr gute Erkennung).JEEARAPI.set_NN(<string> neuralNetworkPath, <function> callback) : Schaltet das neuronale Netzwerk und rufen Sie eine Funktion auf, wenn es fertig ist, entweder mit false als Argument oder mit einer Fehlerbezeichnung.JEEARAPI.reset_state() : Rückkehr zum Sweep -Modus,JEEARAPI.get_aspectRatio() : Gibt das Seitenverhältnis <width>/<height> der Eingangsquelle zurück,JEEARAPI.set_scanSettings(<dict> scanSettings) : Weitere Informationen finden Sie in Abschnitt der Scaneinstellungen. Der webxr Demos Principal Code befindet sich direkt im index.html -Dateien. Der 3D -Teil wird von drei.Js behandelt. Der Ausgangspunkt der Demos sind die Beispiele, die von [Webxr Viewer von der Mozilla -Fundation] (Github -Repository von Demos) bereitgestellt werden.
Wir verwenden Jeeliz AR über einen bestimmten Helfer, helpers/JeelizWebXRHelper.js und raten wir dringend, diesen Helfer für Ihre WebxR -Demos zu verwenden. Mit der iOS -Implementierung übernimmt es die Video -Stream -Konvertierung (der Video -Stream wird als YCBCR -Puffer angegeben. Wir nehmen nur den Y -Puffer und wenden einen medianen Filter darauf an.).
JEEARAPI.init callbackReady Callback):"GL_INCOMPATIBLE" : WebGL ist nicht verfügbar, oder diese WebGL -Konfiguration reicht nicht aus (es gibt kein WebGl2 oder es gibt WebGL1 ohne OES_TEXTURE_FLOAT oder OES_TEXTURE_HALF_FLOATE -Erweiterung),"ALREADY_INITIALIZED" : Die API wurde bereits initialisiert,"GLCONTEXT_LOST" : Der WebGL -Kontext ging verloren. Wenn der Kontext nach der Initialisierung verloren geht, wird die callbackReady -Funktion ein zweites Mal mit diesem Wert als Fehlercode gestartet."INVALID_CANVASID" : Kann das <canvas> -Element im DOM nicht gefunden. Dieser Fehler kann nur ausgelöst werden, wenn der init() -Methode canvasId bereitgestellt wird.JEEARAPI.set_NN Callback -Funktion):"INVALID_NN" : Das neuronale Netzwerkmodell ist ungültig oder beschädigt,"NOTFOUND_NN" : Das neuronale Netzwerkmodell wird nicht gefunden oder ein HTTP -Fehler ist während der Anforderung aufgetreten. Die Video -Ernte -Parameter können bereitgestellt werden. Es funktioniert nur, wenn das Eingabeelement ein <video> -Element ist. Standardmäßig gibt es kein Video -Zuschneiden (das gesamte Videobild wird als Eingabe angenommen). Die Videoernungseinstellungen können bereitgestellt werden:
JEEARAPI.init aufgerufen wird, unter Verwendung des Parameter videoCrop ,JEEARAPI.set_videoCrop(<dict> videoCrop) Der Diktion videoCrop ist entweder falsch (kein Videokrop) oder hat die folgenden Parameter:
<int> x : Horizontale Position der unteren linken Ecke des kurzen Bereichs, in Pixeln,<int> y : vertikale Position der unteren linken Ecke des beschnittenen Bereichs, in Pixel, in Pixel,<int> w : Breite des beschnittenen Bereichs in Pixeln,<int> h : Höhe des beschnittenen Bereichs in Pixeln.Scaneinstellungen können bereitgestellt werden:
JEEARAPI.init aufgerufen wird, unter Verwendung der Parameter scanSettingsJEEARAPI.set_scanSettings(<dict> scanSettings) Die DictionNary scanSettings haben die folgenden Eigenschaften:
<float> margins : Rand. Versuchen Sie nicht, festzustellen, ob die Mitte des Erkennungsfensters zu nahe an den Grenzen liegt. 0 → Rand, 1 → 100% Ränder. Standard: 0.1 ,<int> nSweepXYsteps : Anzahl der Übersetzungsschritte für eine bestimmte Skala. Standard: 6*6=36 ,<int> nSweepSsteps : Anzahl der Skalenschritte. Gesamtzahl der Übersetzungsschritte =nSweepXYsteps*nSweepSsteps . Standard: 4 ,[<float>,<float>] sweepScaleRange : Bereich der Erkennungsfensterskala. 1 → Mindestdimension des gesamten Fensters (zwischen Breite und Höhe). Berücksichtigen Sie keine Ränder. Standardeinstellung: [0.3, 0.7] ,<int> sweepStepMinPx : Mindestgröße eines Schritts in Pixeln. Standard: 16 ,<boolean> sweepShuffle : Wenn wir Scan -Positionen mischen sollten oder nicht. Standard: true .Die Demonstrationen sollten auf einem statischen HTTPS -Server mit einem gültigen Zertifikat gehostet werden. Andernfalls sind die WebXR- oder MediaStream -API möglicherweise nicht verfügbar.
Achten Sie darauf, die GZIP -Komprimierung für mindestens JSON -Dateien zu aktivieren. Das Neuron -Netzwerkmodell kann ziemlich schwer sein, aber zum Glück ist es gut mit GZIP komprimiert.
/dist/jeelizAR.module.js ist genau das gleiche wie /dist/jeelizAR.js , außer dass es mit ES6 funktioniert, sodass Sie es direkt mit:
import 'dist/jeelizAR.module.js' Wir bieten mehrere neuronale Netzwerkmodelle in / neuralnets / Pfad. Wir werden in diesem Git -Repository regelmäßig neue neuronale Netze hinzufügen. Wir können auch spezifische Schulungsdienste für neuronale Netzwerke anbieten. Bitte kontaktieren Sie uns hier, um Preise und Details zu erhalten. Sie können hier finden:
| Modelldatei | Entdeckte Etiketten | Eingangsgröße | Erkennungskosten | Zuverlässigkeit | Anmerkungen |
|---|---|---|---|---|---|
basic4.json | Tasse, Stuhl, Fahrrad, Laptop | 128*128px | ** | ** | |
basic4Light.json | Tasse, Stuhl, Fahrrad, Laptop | 64*64px | * | * | |
cat.json | KATZE | 64*64px | *** | *** | Katzengesicht erkennen |
sprite0.json | Spritecan | 128*128px | *** | *** | eigenständiges Netzwerk (6D -Erkennung) |
ARCoffeeStandalone01.json | TASSE | 64*64px | ** | *** | eigenständiges Netzwerk (6D -Erkennung) |
Die Eingangsgröße ist die Auflösung des Eingabebildes des Netzwerks. Das Erkennungsfenster ist nicht statisch: Es gleitet sowohl für Position als auch für die Skala entlang des Videos. Wenn Sie diese Bibliothek mit WebXR und iOS verwenden, beträgt die Videoauflösung 480*270 Pixel, sodass eine Eingabe von 64*64 Pixel ausreicht. Wenn Sie beispielsweise ein 128*128 Pixel -Eingangsmodell für neuronale Netzwerke verwendet haben, müsste das Eingabebild häufig vergrößert werden, bevor sie als Eingabe angegeben werden.
Diese Bibliothek verwendet Jeeliz WebGL Deep Learning Technology, um Objekte zu erkennen. Das neuronale Netzwerk wird mit einer 3D -Engine und einem Datensatz von 3D -Modellen geschult. Alles wird kundenseitig verarbeitet.
WebGL2 verfügbar ist, verwendet es WebGL2 und es ist keine spezifische Erweiterung erforderlich.WebGL2 nicht verfügbar ist, aber WebGL1 , benötigen wir entweder OES_TEXTURE_FLOAT -Erweiterung oder OES_TEXTURE_HALF_FLOAT -Erweiterung.WebGL2 nicht verfügbar ist und WebGL1 nicht verfügbar ist oder weder OES_TEXTURE_FLOAT noch OES_HALF_TEXTURE_FLOAT implementiert sind, ist der Benutzer nicht kompatibel.Wenn ein Kompatibilitätsfehler ausgelöst wird, veröffentlichen Sie bitte ein Problem in diesem Repository. Wenn dies ein Problem mit dem Webcam -Zugriff ist, geben Sie bitte zunächst nach dem Schließen aller Anwendungen, die Ihr Gerät verwenden könnten (Skype, Messenger, andere Browser -Registerkarten und Windows, ...). Bitte geben Sie ein:
WebGL1 -Implementierung),WebGL2 -Implementierung),Apache 2.0. Diese Anwendung ist sowohl für den kommerziellen als auch für den nichtkommerziellen Gebrauch kostenlos.
Wir schätzen die Zuschreibung, indem wir das Jeeliz -Logo und einen Link zur Jeeliz -Website in Ihre Anwendung oder Desktop -Website einbeziehen. Natürlich erwarten wir keinen großen Link zu Jeeliz über Ihren Gesichtsfilter, aber wenn Sie den Link in den Abschnitt "Credits/Help/Help/Fußzeile" einfügen können, wäre es großartig.
Jeeliz Main Face Detection and Tracking Library ist die Cjeeliz FaceFilter -API. Es behandelt die Multi-Face-Verfolgung und bietet für jedes verfolgte Gesicht die Rotationswinkel und den Mundöffnungsfaktor. Es ist perfekt, um Ihr eigenes Snapchat/MSQRD wie Gesichtsfilter im Browser zu erstellen. Es kommt mit Dutzend Integrationsdemo, einschließlich eines Gesichts -Tauschs.
Unsere Deep Learning -basierte Bibliothek Weboji erkennt 11 Gesichtsausdrücke in Echtzeit aus dem Webcam -Video -Feed. Dann werden sie auf einem Avatar reproduziert, entweder in 3D mit einem Renderer von Drei.Js oder in 2D mit einem SVG -Renderer (so können Sie ihn auch dann verwenden, wenn Sie kein 3D -Entwickler sind). Hier können Sie auf das Github -Repository zugreifen.
Wenn Sie nur feststellen möchten, ob der Benutzer auf den Bildschirm schaut oder nicht, ist Jeeliz Blend Tracker das, wonach Sie suchen. Es kann nützlich sein, ein Video abzuspielen und pausieren, unabhängig davon, ob der Benutzer sich ansieht oder nicht. Diese Bibliothek benötigt weniger Ressourcen und die neuronale Netzwerkdatei ist viel leichter.
Wenn Sie diese Bibliothek für eine virtuelle Probe (Sonnenbrille, Brillen, Skigasken) verwenden möchten, können Sie sich Jeeliz VTO Widget ansehen. Es enthält eine hochwertige und leichte 3D -Motor, die die folgenden Merkmale implementiert: aufgeschobene Schattierung, PBR, Raytrace -Schatten, normale Zuordnung, ... es rekonstruiert auch die Beleuchtungsumgebung um den Benutzer (Umgebungs- und Richtungsbeleuchtung). Aber die Brille stammt aus einer Datenbank, die auf unseren Servern gehostet wird. Wenn Sie einige Modelle hinzufügen möchten, kontaktieren Sie uns bitte.
