Revolutionary Vision: Industriekameras hochperformant in Electron-Apps einbinden

Du willst leistungsstarke native Bildverarbeitung mit einem flexiblen Web-Framework verbinden? Und fragst Dich, ob hybride Apps dafür schnell genug sind – und wie Spezialgeräte statt Standardhardware hineinkommen?

Bild-Spezialisten: Industriekameras

Industriekameras sind für Bildverarbeitung in der Industrie gebaut – etwa für Qualitätskontrolle, Robotik oder Medizintechnik. Kameras wie die Baumer VLU-02M liefern detaillierte, präzise Bilder:

Hohe Bildrate

160 fps

Ideal für schnelle Bewegungen und Prozesse.

Belichtungszeit

0,004 – 60.000 ms

Passt sich an jedes Licht an.

Herstellerschnittstelle

C/C++ SDK

Für schnelle, systemnahe Verarbeitung.

Hersteller wie Baumer liefern ein SDK (Software Development Kit, also ein Entwickler-Werkzeugkasten) für C/C++. Für Steuerung und Anzeige braucht es trotzdem eine passende Anwendung – und moderne, plattformunabhängige Frameworks nutzen meist andere Sprachen als C++.

Electron: der Allrounder für plattformunabhängige Apps

Electron ist ein Open-Source-Framework auf Basis von Node.js. Damit baust Du Desktop-Apps mit HTML, CSS und JavaScript bzw. TypeScript. Die Vorteile:

• Plattformübergreifend Eine Codebasis für Windows und macOS – mit Ionic Capacitor sogar für Mobile.
• Vertraute Standards Designer und Entwickler nutzen ihr vorhandenes Web-Know-how.
• Anpassbare Oberfläche Moderne UIs, die sich leicht anpassen und skalieren lassen.
• Große Community Viele Bibliotheken und Ressourcen.
• Schnelles Prototyping Live-Reload zeigt Änderungen in Echtzeit.
• Backend-Anbindung Einfache Integration von Services und APIs.
• Sicherheit Funktionen wie Content-Security-Policy gegen Cross-Site-Scripting.

Der Haken: Electron braucht mehr Ressourcen als native Apps – gerade bei Bildverarbeitung. Und für eine spezielle Industriekamera muss eine eigene Erweiterung her, die Steuer- und Bilddaten mit dem Hersteller-SDK austauscht.

C++ trifft Electron: das Beste aus zwei Welten

Das Ziel: eine Brücke zwischen leistungsfähiger nativer Bildverarbeitung und flexiblem App-Framework.

• Direkter Hardware-Zugriff Funktionen und Eigenschaften der Kamera direkt ansteuern.
• Hochperformante Verarbeitung C++ verarbeitet Bilddaten schnell – für hohe Frameraten in Echtzeit.
• Skalierbar und flexibel Electron liefert die plattformübergreifende App, C++ die Leistung.

Herausforderungen bei Electron + Native

1. Nebenläufigkeit Die Kameradaten laufen in den Puffer, ohne dass die App wartet oder blockiert.
2. Komplexe Konfiguration Externe C++-Bibliotheken und SDKs einzubinden ist aufwendig – Fehler lassen sich oft nur per Test eingrenzen.
3. Debugging C++ und JavaScript gemeinsam zu debuggen ist knifflig. Für Konsolen-Ausgaben bleibt nur der Weg über NAPI.
4. Sandboxing & IPC Haupt- und Renderer-Prozess sind getrennt. Daten fließen sicher über IPC und die Context-Bridge.

Der Lösungsweg

1. Erste Test-App in C++ Eine reine C++-Anwendung mit OpenGL-Ausgabe testet das Baumer-GAPI-SDK. Ein eigener Thread (std::thread) liest das Kamerabild regelmäßig aus. Eine Testbild-Funktion prüft die Schnittstellen auch ohne Kamera.
2. NAPI-Addon konfigurieren Daraus wird ein C++-NAPI-Addon: Es reserviert Speicher, schreibt die Bildpuffer hinein und steuert zum Beispiel die Belichtungszeit. NAPI ist die Node.js-Schnittstelle zu nativen Bibliotheken; kompiliert wird mit node-gyp über die binding.gyp.
3. Context-Bridge einrichten Der NAPI-Aufruf läuft im Hauptprozess (main.js). Per IPC und Context-Bridge (preload.js) wird er sicher an die abgeschottete Renderer-Sandbox weitergereicht.
4. Renderer ruft die Daten ab Die Oberfläche (index.html, renderer.js) holt das aktuelle Bild ab. Die Daten kommen direkt als Uint8Array an – für schnellstmöglichen Zugriff.

Häufig gestellte Fragen