Wenn Sie sich jemals gefragt haben, wie Sie Ihre Bilder mit React Native OpenCV verarbeiten können, dann sind Sie hier richtig. Im Folgenden zeigen wir Ihnen Schritt für Schritt, wie Sie React Native und OpenCV verwenden.
A QUICK SUMMARY – FOR THE BUSY ONES
Was ist OpenCV: Die Open Source Computer Vision Library (OpenCV) ist eine Open-Source-Softwarebibliothek für Computer Vision und maschinelles Lernen. Sie bietet über 2500 optimierte Algorithmen für Aufgaben wie Gesichtserkennung, Objektidentifikation, Bewegungsverfolgung und mehr.
OpenCV und React Native: Obwohl die Integration von OpenCV in React Native einige Herausforderungen mit sich bringt, ist sie möglich und nützlich für Aufgaben, die eine Bildverarbeitung erfordern. Bestehende Ressourcen und Bibliotheken können Ihnen dabei helfen, diese Integration zu erreichen.
Überblick über das Tutorial: Das Tutorial führt Sie durch die Erstellung eines React Native-Projekts, das OpenCV verwendet, um festzustellen, ob ein aufgenommenes Foto klar oder unscharf ist. Die Schritte sind in Android- und iOS-Setups unterteilt, für die jeweils Codefragmente bereitgestellt werden.
TABLE OF CONTENTS
OpenCV ermöglicht es React Native-Entwicklern Bilder auf Mobilgeräten verarbeiten (höchstwahrscheinlich möchten Sie Bilder verarbeiten, die von der Kamera Ihres Geräts aufgenommen wurden).
Die wichtigsten Vorteile liegen auf der Hand:
Lassen Sie mich Ihnen Schritt für Schritt zeigen, wie ich OpenCV und React Native verwendet habe, um meine Bilder zu verarbeiten, aber zuerst ein paar Worte zur Einführung.
OpenCV (Open Source Computer Vision Library) ist eine Open-Source-Softwarebibliothek für Computer Vision und maschinelles Lernen. OpenCV wurde entwickelt, um eine gemeinsame Infrastruktur für Computer-Vision-Anwendungen bereitzustellen und den Einsatz der maschinellen Wahrnehmung in kommerziellen Produkten zu beschleunigen.
Die Bibliothek hat mehr als 2500 optimierte Algorithmen, einschließlich eines umfassenden Satzes an klassischen und hochmodernen Algorithmen für Computervision und maschinelles Lernen.
Diese Algorithmen können verwendet werden, um Gesichter zu erkennen und zu erkennen, Objekte zu identifizieren, menschliche Handlungen in Videos zu klassifizieren, Kamerabewegungen zu verfolgen, sich bewegende Objekte zu verfolgen, 3D-Modelle von Objekten zu extrahieren, 3D-Punktwolken von Stereokameras zu erzeugen und Bilder zusammenzufügen, um ein hochauflösendes Bild einer gesamten Szene zu erzeugen.
Es kann auch ähnliche Bilder aus einer Bilddatenbank finden, rote Augen aus Bildern entfernen, die mit Blitz aufgenommen wurden, Augenbewegungen verfolgen, Szenerien erkennen und Markierungen erstellen, um sie mit Augmented Reality zu überlagern usw.
OpenCV hat mehr als 47k Menschen in der Community und eine geschätzte Anzahl von Downloads von über 14 Millionen. Die Bibliothek wird in Unternehmen, Forschungsgruppen und Regierungsbehörden intensiv genutzt. OpenCV ist nativ in C++ geschrieben.
Seit 2010 wurde OpenCV auf die Android-Umgebung portiert, sodass die volle Leistungsfähigkeit der Bibliothek bei der Entwicklung mobiler Anwendungen genutzt werden kann. 2012 arbeitete das OpenCV-Entwicklungsteam aktiv daran, erweiterte Unterstützung für iOS hinzuzufügen. Die vollständige Integration ist seit Version 2.4.2 (2012) verfügbar.
React Native wurde erstmals 2015 von Facebook veröffentlicht. Mit React Native können Sie mobile Apps nur mit JavaScript erstellen. Es verwendet dasselbe Design wie React, sodass Sie eine umfangreiche mobile Benutzeroberfläche aus deklarativen Komponenten zusammenstellen können.
Wenn wir nach „React Native OpenCV“ googeln, stoßen wir auf folgende Links:
In diesem Tutorial werden wir ein Beispielprojekt erstellen, das die Kamera des Geräts verwendet, um ein Foto aufzunehmen, es mit nativem Code verarbeitet und die Information zurückgibt, ob das aufgenommene Bild verschwommen oder klar ist. Es in einfachem JavaScript zu tun, wäre höchst ineffektiv. JavaScript reicht für sehr umfangreiche Berechnungen nicht aus.
Beachten Sie, dass wir keineswegs Java- oder Objective-C-Entwickler sind, daher ist unser Java/Objective-C-Code möglicherweise alles andere als gut. Wenn Sie zu diesem Thema beitragen möchten, kontaktieren Sie uns bitte.
Folgendes werden wir tun:
Android-Einrichtung:
iOS-Einrichtung:
JavaScript-Integration:
Lassen Sie uns nun diese Schritte genauer durchgehen.
react-native init ReactNativeOpenCVTutorial
Führen Sie das Skript downloadAndInsertOpenCV.sh im Katalog Ihres Projekts aus (finden Sie hier), das OpenCV-Dateien für Android und iOS herunterlädt und einfügt. Die Pfade in der Datei entsprechen möglicherweise nicht Ihren Einstellungen, sodass Sie sie möglicherweise ändern müssen.
Öffnen Sie Ihr Projekt in Android Studio.
Folgen Sie den Tipps in Android Studio zum Synchronisieren Ihres Projekts.
Laden Sie die neueste Version von OpenCV für Android herunter. In meinem Fall ist es 3.4.1.
Importieren Sie OpenCV in Android Studio — wählen Sie unter Datei -> Neu -> Modul importieren den Ordner sdk/java im entpackten OpenCV-Archiv.
Aktualisieren Sie build.gradle unter dem importierten OpenCV-Modul, um 4 Felder so zu aktualisieren, dass sie dem build.gradle Ihres Projekts entsprechen:
Modulabhängigkeit hinzufügen:
Anwendung -> Moduleinstellungen und wählen Sie die Registerkarte „Abhängigkeiten“. Klicken Sie unten auf das Symbol „+“, wählen Sie „Modulabhängigkeit“ und wählen Sie das importierte OpenCV-Modul aus.
Um in Android Studio v1.2.2 in der Projektansicht auf die Moduleinstellungen zuzugreifen, klicken Sie mit der rechten Maustaste auf das abhängige Modul -> Moduleinstellungen öffnen.
Klicken Sie auf das „+“, wählen Sie „Modulabhängigkeit“ und wählen Sie die OpenCV-Bibliothek aus der Liste aus.
Erstellen Sie in android/app/src/java ein Paket namens zB „com.reactlibrary“.
Aktualisiere dein Manifest mit den richtigen Berechtigungen:
siehe die ganze Datei.
Erstellen Sie eine Datei RNOpenCvLibraryModule.java in Ihrem neu erstellten Paket und fülle es wie hier gezeigt.
Erstellen Sie eine Datei namens RNOpenCvLibraryPackage.java in Ihrem neu erstellten Paket und fülle es wie hier gezeigt.
Fügen Sie Ihrer Datei MainApplication.java die richtigen Importe hinzu, fügen Sie Ihr OpenCV-Paket zur Liste hinzu und fügen Sie der MainApplication-Klasse den richtigen Code wie folgt hinzu:
Fügen Sie Ihrer Paketliste ein neues rnOpenCVLibraryPackage () hinzu.
Fügen Sie BaseLoaderCallback in Ihre MainApplication-Klasse ein:
Fügen Sie Ihrer MainApplication-Klasse außerdem die folgenden Callbacks hinzu:
Sehen Sie die ganze Datei hier.
Öffnen Sie das iOS-Projekt in XCode.
Fügen Sie opencv2.framework zu Ihren Linked Frameworks und Bibliotheken hinzu.
Erstellen Sie eine neue Gruppe im iOS-Katalog. Ich habe es „OpenCV“ genannt.
Fügen Sie eine.pch-Datei hinzu und fügen Sie sie in den OpenCV-Katalog ein.
Fügen Sie Ihrer PCH-Datei den richtigen Inhalt hinzu — hier gezeigt.
Erstellen Sie eine Datei mit dem Namen rnOpencvLibrary.h und fülle es wie hier gezeigt.
Erstellen Sie eine Datei mit dem Namen rnOpencvLibrary.mm und fülle es wie hier gezeigt.
Setzen Sie „Precompile Precompile Prefix Header“ auf „Yes“ und legen Sie den Pfad „Prefix Header“ wie folgt fest:
Fügen Sie Ihrer Info.plist-Datei Folgendes hinzu:
siehe die ganze Datei.
Erstellen Sie in Ihrem src-Ordner einen Ordner mit dem Namen zB „NativeModules“ und eine Datei namens OpenCV.js und füllen Sie ihn mit:
siehe die ganze Datei.
Wir werden einige Bibliotheken von Drittanbietern für die schnelle Einrichtung verwenden. Öffnen Sie das Terminal und geben Sie Folgendes ein:
Vergiss nicht, die Bibliotheken zu verlinken: react-native link.
Wir werden verwenden die folgende Datei als Referenz.
In Zeile 126 richten wir die Kamera ein und in Zeile 135 erstellen wir ein berührbares Element für das Fotografieren. Das Aufnehmen von Fotos erfolgt über die TakePicture-Funktion. Es macht ein Foto, speichert die Daten im lokalen Zustand und überprüft, ob das Foto unscharf ist.
Die Funktion ProceedWithCheckingBlurryImage verwendet die native Funktion checkForBlurryImage und gibt eine einfache Information zurück, ob das Foto verschwommen ist oder nicht.
Wenn Sie auf Build-Probleme für Android stoßen, das an die Kamera angeschlossen ist, lesen Sie meine .gradle-Datei erstellen, insbesondere maven {url „https://jitpack.io“} line und synchronisiere das Projekt erneut in Android Studio.
Wenn Sie Fehler im Zusammenhang mit Google Play-Diensten haben, überprüfen Sie dies Ausgabe auf GitHub.
Wenn Sie Fehler im Zusammenhang mit React-Native-Camera haben, überprüfen Sie den Master-Zweig, indem Sie die Version in package.json wie folgt ändern:
Ein Beispiel für ein klares Foto. Wir erhalten eine Vorschau des Fotos und haben die Möglichkeit, es entweder zu verwenden oder zu wiederholen.
Ein Beispiel für ein verschwommenes Foto. Wir erhalten eine Nachricht, die uns darüber informiert, dass das Foto unscharf ist und wir es wiederholen müssen.
Vergiss nicht, das zu sehen Endprodukt auf unserem GitHub!
Our promise
Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.
Authors
Full-Stack-Softwareingenieur mit 8 Jahren Berufserfahrung. Leidenschaft für React.js und React Native. Absolvent der Schlesischen Technischen Universität.
Enthusiast für Softwareentwicklung mit 9 Jahren Berufserfahrung in dieser Branche.
Full-Stack-Softwareingenieur mit 8 Jahren Berufserfahrung. Leidenschaft für React.js und React Native. Absolvent der Schlesischen Technischen Universität.
Enthusiast für Softwareentwicklung mit 9 Jahren Berufserfahrung in dieser Branche.
Read next
Popular this month
previous article in this collection
It's the first one.
