\n
Voraussetzungen<\/h2>\n
Hier eine \u00dcbersicht \u00fcber die wichtigsten Technologien, die in diesem Leitfaden verwendet werden:<\/p>\n
- \n
- React<\/strong>: React wird verwendet, um die Benutzeroberfl\u00e4che (UI) der Anwendung zu erstellen. React eignet sich hervorragend f\u00fcr das Rendern dynamischer Inhalte<\/a> und wird bei der Darstellung des Webcam-Feeds und der erkannten Objekte im Browser n\u00fctzlich sein.<\/li>\n
- TensorFlow.js<\/strong>: TensorFlow.js<\/a> ist eine JavaScript-Bibliothek, die die M\u00f6glichkeiten des maschinellen Lernens in den Browser bringt. Sie erm\u00f6glicht es dir, trainierte Modelle f\u00fcr die Objekterkennung zu laden und direkt im Browser auszuf\u00fchren, sodass keine komplexe serverseitige Verarbeitung erforderlich ist.<\/li>\n
- Coco SSD<\/strong>: Die Anwendung verwendet ein vortrainiertes Objekterkennungsmodell namens Coco SSD<\/a>, ein leichtgewichtiges Modell, das in der Lage ist, eine Vielzahl von Alltagsgegenst\u00e4nden in Echtzeit zu erkennen. Coco SSD ist zwar ein leistungsf\u00e4higes Werkzeug, aber es ist wichtig zu wissen, dass es auf einem allgemeinen Datensatz von Objekten trainiert wurde. Wenn du spezielle Anforderungen an die Erkennung hast, kannst du ein eigenes Modell mit TensorFlow.js trainieren, indem du diese Anleitung befolgst<\/a>.<\/li>\n<\/ul>\n
Richte ein neues React-Projekt ein<\/h2>\n
- \n
- Erstelle ein neues React-Projekt. Dazu f\u00fchrst du den folgenden Befehl aus:\n
npm create vite@latest kinsta-object-detection --template react<\/code><\/pre>\nDadurch wird mit vite<\/a> ein React-Basisprojekt f\u00fcr dich erstellt.<\/li>\n
- Als N\u00e4chstes installierst du die TensorFlow- und Coco SSD-Bibliotheken, indem du die folgenden Befehle im Projekt ausf\u00fchrst:\n
npm i @tensorflow-models\/coco-ssd @tensorflow\/tfjs<\/code><\/pre>\n<\/li>\n<\/ol>\nJetzt kannst du mit der Entwicklung deiner Anwendung beginnen.<\/p>\n
Konfigurieren der Anwendung<\/h2>\n
Bevor du den Code f\u00fcr die Objekterkennungslogik schreibst, solltest du verstehen, was in diesem Leitfaden entwickelt wird. So w\u00fcrde die Benutzeroberfl\u00e4che der Anwendung aussehen:<\/p>\n
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-app-ui-1024x502.png\")
UI-Design der Anwendung<\/figcaption><\/figure>\n Wenn ein Nutzer auf die Schaltfl\u00e4che Webcam starten<\/strong> klickt, wird er aufgefordert, der Anwendung den Zugriff auf den Webcam-Feed zu gestatten. Wenn die Erlaubnis erteilt wurde, zeigt die Anwendung den Webcam-Feed an und erkennt Objekte im Feed. Anschlie\u00dfend zeigt sie die erkannten Objekte im Live-Feed in einem Kasten an und versieht ihn mit einer Beschriftung.<\/p>\n
Erstelle zun\u00e4chst die Benutzeroberfl\u00e4che f\u00fcr die Anwendung, indem du den folgenden Code in die Datei App.jsx<\/strong> einf\u00fcgst:<\/p>\n
import ObjectDetection from '.\/ObjectDetection';\nfunction App() {\n return (\n <div className=\"app\">\n <h1>Image Object Detection<\/h1>\n <ObjectDetection \/>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\nDieser Codeschnipsel legt eine Kopfzeile f\u00fcr die Seite fest und importiert eine benutzerdefinierte Komponente namens
ObjectDetection<\/code>. Diese Komponente enth\u00e4lt die Logik f\u00fcr die Erfassung des Webcam-Feeds und die Erkennung von Objekten in Echtzeit.<\/p>\nUm diese Komponente zu erstellen, erstelle eine neue Datei namens ObjectDetection.jsx<\/strong> in deinem src-Verzeichnis <\/strong>und f\u00fcge den folgenden Code darin ein:<\/p>\n
import { useEffect, useRef, useState } from 'react';\n\nconst ObjectDetection = () => {\n const videoRef = useRef(null);\n const [isWebcamStarted, setIsWebcamStarted] = useState(false)\n\n const startWebcam = async () => {\n \/\/ TODO\n };\n\n const stopWebcam = () => {\n \/\/ TODO\n };\n\n return (\n <div className=\"object-detection\">\n <div className=\"buttons\">\n <button onClick={isWebcamStarted ? stopWebcam : startWebcam}>{isWebcamStarted ? \"Stop\" : \"Start\"} Webcam<\/button>\n <\/div>\n <div className=\"feed\">\n {isWebcamStarted ? <video ref={videoRef} autoPlay muted \/> : <div \/>}\n <\/div>\n <\/div>\n );\n};\n\nexport default ObjectDetection;<\/code><\/pre>\nDer obige Code definiert eine HTML-Struktur<\/a> mit einer Schaltfl\u00e4che zum Starten und Stoppen des Webcam-Feeds und einem
<video><\/code> Element, das verwendet wird, um dem Benutzer den Webcam-Feed zu zeigen, sobald er aktiv ist. Ein StatuscontainerisWebcamStarted<\/code> wird verwendet, um den Status des Webcam-Feeds zu speichern. Zwei Funktionen,startWebcam<\/code> undstopWebcam<\/code>, werden zum Starten und Stoppen des Webcam-Feeds verwendet. Definieren wir sie:<\/p>\nHier ist der Code f\u00fcr die Funktion
startWebcam<\/code>:<\/p>\nconst startWebcam = async () => {\n try {\n setIsWebcamStarted(true)\n const stream = await navigator.mediaDevices.getUserMedia({ video: true });\n\n if (videoRef.current) {\n videoRef.current.srcObject = stream;\n }\n } catch (error) {\n setIsWebcamStarted(false)\n console.error('Error accessing webcam:', error);\n }\n };<\/code><\/pre>\nDiese Funktion fordert den Benutzer auf, den Webcam-Zugang zu gew\u00e4hren. Sobald die Erlaubnis erteilt wurde, wird die
<video><\/code> so eingestellt, dass sie dem Benutzer den Live-Webcam-Feed zeigt.<\/p>\nWenn der Code nicht auf den Webcam-Feed zugreifen kann (z. B. weil auf dem aktuellen Ger\u00e4t keine Webcam vorhanden ist oder dem Benutzer die Erlaubnis verweigert wird), gibt die Funktion eine Meldung auf der Konsole aus. Du kannst einen Fehlerblock verwenden, um dem Benutzer den Grund f\u00fcr den Fehler anzuzeigen.<\/p>\n
Ersetze als N\u00e4chstes die Funktion
stopWebcam<\/code> durch den folgenden Code:<\/p>\nconst stopWebcam = () => {\n const video = videoRef.current;\n\n if (video) {\n const stream = video.srcObject;\n const tracks = stream.getTracks();\n\n tracks.forEach((track) => {\n track.stop();\n });\n\n video.srcObject = null;\n setPredictions([])\n setIsWebcamStarted(false)\n }\n };<\/code><\/pre>\nDieser Code pr\u00fcft die laufenden Videostreams, auf die das Objekt
<video><\/code> zugreift, und stoppt jeden einzelnen davon. Zum Schluss setzt er den Status vonisWebcamStarted<\/code> auffalse<\/code>.<\/p>\nVersuche nun, die Anwendung zu starten, um zu pr\u00fcfen, ob du auf den Webcam-Feed zugreifen und ihn ansehen kannst.<\/p>\n
F\u00fcge den folgenden Code in die Datei index.css<\/strong> ein, um sicherzustellen, dass die Anwendung genauso aussieht wie in der Vorschau, die du vorhin gesehen hast:<\/p>\n
#root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n color-scheme: light dark;\n color: rgba(255, 255, 255, 0.87);\n background-color: #242424;\n min-width: 100vw;\n min-height: 100vh;\n font-synthesis: none;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\na {\n font-weight: 500;\n color: #646cff;\n text-decoration: inherit;\n}\n\na:hover {\n color: #535bf2;\n}\n\nbody {\n margin: 0;\n display: flex;\n place-items: center;\n min-width: 100vw;\n min-height: 100vh;\n}\n\nh1 {\n font-size: 3.2em;\n line-height: 1.1;\n}\n\nbutton {\n border-radius: 8px;\n border: 1px solid transparent;\n padding: 0.6em 1.2em;\n font-size: 1em;\n font-weight: 500;\n font-family: inherit;\n background-color: #1a1a1a;\n cursor: pointer;\n transition: border-color 0.25s;\n}\n\nbutton:hover {\n border-color: #646cff;\n}\n\nbutton:focus,\n\nbutton:focus-visible {\n outline: 4px auto -webkit-focus-ring-color;\n}\n\n@media (prefers-color-scheme: light) {\n :root {\n color: #213547;\n background-color: #ffffff;\n }\n\n a:hover {\n color: #747bff;\n }\n\n button {\n background-color: #f9f9f9;\n }\n}\n\n.app {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n\n.object-detection {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n .buttons {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n\n button {\n margin: 2px;\n }\n }\n\n div {\n margin: 4px;\n }\n}<\/code><\/pre>\nEntferne au\u00dferdem die Datei App.css<\/strong>, damit die Stile der Komponenten nicht durcheinander geraten. Jetzt kannst du die Logik f\u00fcr die Integration der Echtzeit-Objekterkennung in deiner Anwendung schreiben.<\/p>\n
Echtzeit-Objekterkennung einrichten<\/h2>\n
- \n
- Beginne damit, die Importe f\u00fcr Tensorflow und Coco SSD oben in ObjectDetection.jsx<\/strong> hinzuzuf\u00fcgen:\n
import * as cocoSsd from '@tensorflow-models\/coco-ssd';\n\nimport '@tensorflow\/tfjs';<\/code><\/pre>\n<\/li>\n- Als N\u00e4chstes erstellst du einen Status in der Komponente
ObjectDetection<\/code>, um das Array der Vorhersagen zu speichern, die vom Coco SSD-Modell erstellt wurden:\nconst [predictions, setPredictions] = useState([]);<\/code><\/pre>\n<\/li>\n- Als N\u00e4chstes erstellst du eine Funktion, die das Coco SSD-Modell l\u00e4dt, den Video-Feed sammelt und die Vorhersagen erstellt:\n
const predictObject = async () => {\n const model = await cocoSsd.load();\n\n model.detect(videoRef.current).then((predictions) => {\n setPredictions(predictions);\n })\n\n .catch(err => {\n console.error(err)\n });\n };<\/code><\/pre>\nDiese Funktion verwendet den Video-Feed und erstellt Vorhersagen f\u00fcr die im Feed enthaltenen Objekte. Sie liefert dir ein Array mit den vorhergesagten Objekten, die jeweils ein Label, einen Konfidenzgrad und eine Reihe von Koordinaten enthalten, die die Position des Objekts im Videobild angeben.<\/p>\n
Du musst diese Funktion fortlaufend aufrufen, um die eintreffenden Videobilder zu verarbeiten, und dann die im Status
predictions<\/code> gespeicherten Vorhersagen verwenden, um K\u00e4stchen und Beschriftungen f\u00fcr jedes erkannte Objekt im Live-Videofeed anzuzeigen.<\/li>\n- Als N\u00e4chstes musst du die Funktion
setInterval<\/code> verwenden, um die Funktion kontinuierlich aufzurufen. Du musst auch daf\u00fcr sorgen, dass diese Funktion nicht mehr aufgerufen wird, nachdem der Nutzer den Webcam-Feed gestoppt hat.clearInterval<\/code> F\u00fcge den folgenden Zustandscontainer und denuseEffect<\/code> -Hook in die KomponenteObjectDetection<\/code> ein, um die FunktionpredictObject<\/code> so einzurichten, dass sie kontinuierlich aufgerufen wird, wenn die Webcam aktiviert ist, und entfernt wird, wenn die Webcam deaktiviert wird:\nconst [detectionInterval, setDetectionInterval] = useState()\n\n useEffect(() => {\n if (isWebcamStarted) {\n setDetectionInterval(setInterval(predictObject, 500))\n } else {\n if (detectionInterval) {\n clearInterval(detectionInterval)\n setDetectionInterval(null)\n }\n }\n }, [isWebcamStarted])<\/code><\/pre>\nDamit wird die Anwendung so eingestellt, dass sie alle 500 Millisekunden die Objekte vor der Webcam erkennt. Du kannst diesen Wert \u00e4ndern, je nachdem, wie schnell die Objekterkennung sein soll, aber bedenke, dass eine zu h\u00e4ufige Ausf\u00fchrung dazu f\u00fchren kann, dass deine Anwendung viel Speicherplatz im Browser verbraucht.<\/li>\n
- Jetzt, da du die Vorhersagedaten im Container
prediction<\/code> hast, kannst du sie verwenden, um eine Beschriftung und einen Rahmen um das Objekt im Live-Video-Feed anzuzeigen. Dazu aktualisierst du die Anweisungreturn<\/code> derObjectDetection<\/code> so, dass sie Folgendes zur\u00fcckgibt:\nreturn (\n <div className=\"object-detection\">\n <div className=\"buttons\">\n <button onClick={isWebcamStarted ? stopWebcam : startWebcam}>{isWebcamStarted ? \"Stop\" : \"Start\"} Webcam<\/button>\n <\/div>\n <div className=\"feed\">\n {isWebcamStarted ? <video ref={videoRef} autoPlay muted \/> : <div \/>}\n {\/* Add the tags below to show a label using the p element and a box using the div element *\/}\n {predictions.length > 0 && (\n predictions.map(prediction => {\n return <>\n <p style={{\n left: `${prediction.bbox[0]}px`, \n top: `${prediction.bbox[1]}px`,\n width: `${prediction.bbox[2] - 100}px`\n }}>{prediction.class + ' - with ' \n + Math.round(parseFloat(prediction.score) * 100) \n + '% confidence.'}<\/p>\n <div className={\"marker\"} style={{\n left: `${prediction.bbox[0]}px`,\n top: `${prediction.bbox[1]}px`,\n width: `${prediction.bbox[2]}px`,\n height: `${prediction.bbox[3]}px`\n }} \/>\n <\/>\n })\n )}\n <\/div>\n {\/* Add the tags below to show a list of predictions to user *\/}\n {predictions.length > 0 && (\n <div>\n <h3>Predictions:<\/h3>\n <ul>\n {predictions.map((prediction, index) => (\n <li key={index}>\n {`${prediction.class} (${(prediction.score * 100).toFixed(2)}%)`}\n <\/li>\n ))}\n <\/ul>\n <\/div>\n )}\n\n <\/div>\n );<\/code><\/pre>\nDies rendert eine Liste von Vorhersagen direkt unter dem Webcam-Feed und zeichnet einen Rahmen um das vorhergesagte Objekt mit den Koordinaten von Coco SSD sowie eine Beschriftung am oberen Rand des Rahmens.<\/li>\n
- Um die Boxen und die Beschriftung richtig zu gestalten, f\u00fcge den folgenden Code in die Datei index.css<\/strong> ein:\n
.feed {\n position: relative;\n\n p {\n position: absolute;\n padding: 5px;\n background-color: rgba(255, 111, 0, 0.85);\n color: #FFF;\n border: 1px dashed rgba(255, 255, 255, 0.7);\n z-index: 2;\n font-size: 12px;\n margin: 0;\n }\n\n .marker {\n background: rgba(0, 255, 0, 0.25);\n border: 1px dashed #fff;\n z-index: 1;\n position: absolute;\n }\n\n}<\/code><\/pre>\nDamit ist die Entwicklung der Anwendung abgeschlossen. Du kannst jetzt den Dev-Server neu starten, um die Anwendung zu testen. So sollte sie nach der Fertigstellung aussehen:<\/p>\n
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-demo.gif\")
Demo der Echtzeit-Objekterkennung mit der Webcam<\/figcaption><\/figure><\/li>\n<\/ol>\n Den vollst\u00e4ndigen Code findest du in diesem GitHub-Repository<\/a>.<\/p>\n
Die fertige Anwendung auf Kinsta bereitstellen<\/h2>\n
Im letzten Schritt musst du die Anwendung auf Kinsta bereitstellen, um sie f\u00fcr deine Nutzer\/innen verf\u00fcgbar zu machen. Dazu kannst du bei Kinsta bis zu 100 statische Websites<\/a> kostenlos<\/strong> direkt von deinem bevorzugten Git-Anbieter (Bitbucket<\/a>, GitHub<\/a> oder GitLab<\/a>) hosten.<\/p>\n
Sobald dein Git-Repository fertig ist, befolge diese Schritte, um deine Objekterkennungs-Anwendung auf Kinsta bereitzustellen:<\/p>\n
- \n
- Logge dich ein oder erstelle ein Konto, um dein MyKinsta-Dashboard<\/a> zu sehen.<\/li>\n
- Autorisiere Kinsta mit deinem Git-Anbieter.<\/li>\n
- Klicke in der linken Seitenleiste auf Statische Websites<\/strong> und dann auf Website hinzuf\u00fcgen<\/strong>.<\/li>\n
- W\u00e4hle das Repository und den Zweig aus, von dem aus du bereitstellen m\u00f6chtest.<\/li>\n
- Gib deiner Website einen eindeutigen Namen.<\/li>\n
- F\u00fcge die Build-Einstellungen in folgendem Format hinzu:\n
- \n
- Build-Befehl:<\/strong>
yarn build<\/code> odernpm run build<\/code><\/li>\n- Node-Version:<\/strong>
20.2.0<\/code><\/li>\n- Verzeichnis ver\u00f6ffentlichen:<\/strong>
dist<\/code><\/li>\n<\/ul>\n<\/li>\n- Zum Schluss klickst du auf Site erstellen<\/strong>.<\/li>\n<\/ol>\n
Sobald die Anwendung bereitgestellt ist, kannst du im Dashboard auf Website besuchen<\/strong> klicken, um auf die Anwendung zuzugreifen. Jetzt kannst du die Anwendung auf verschiedenen Ger\u00e4ten mit Kameras ausprobieren, um zu sehen, wie sie sich verh\u00e4lt.<\/p>\n
Als Alternative zum Statischen-Seiten-Hosting kannst du deine statische Website auch mit dem Anwendungs-Hosting<\/a> von Kinsta bereitstellen, das eine gr\u00f6\u00dfere Hosting-Flexibilit\u00e4t, eine breitere Palette von Vorteilen und Zugang zu robusteren Funktionen bietet. Dazu geh\u00f6ren z. B. Skalierbarkeit, benutzerdefinierte Bereitstellung mithilfe eines Dockerfiles<\/a> und umfassende Analysen<\/a>, die Echtzeit- und historische Daten umfassen.<\/p>\n
Zusammenfassung<\/h2>\n
Du hast erfolgreich eine Echtzeit-Anwendung zur Objekterkennung mit React, TensorFlow.js und Kinsta erstellt. Damit kannst du die aufregende Welt der Computer Vision erkunden und interaktive Erlebnisse direkt im Browser des Nutzers schaffen.<\/p>\n
Denk daran, dass das von uns verwendete Coco SSD-Modell nur ein Ausgangspunkt ist. Wenn du weiter forschst, kannst du mit TensorFlow.js in die benutzerdefinierte Objekterkennung eintauchen und die Anwendung so anpassen, dass sie bestimmte Objekte erkennt, die f\u00fcr deine Bed\u00fcrfnisse relevant sind.<\/p>\n
Die M\u00f6glichkeiten sind vielf\u00e4ltig! Diese Anwendung dient als Grundlage, um detailliertere Anwendungen wie Augmented Reality oder intelligente \u00dcberwachungssysteme zu entwickeln. Wenn du deine Anwendung auf der zuverl\u00e4ssigen Plattform von Kinsta bereitstellst, kannst du deine Kreation mit der Welt teilen und erleben, wie die Macht der Computer Vision zum Leben erweckt wird.<\/p>\n
Auf welches Problem bist du gesto\u00dfen, von dem du denkst, dass die Echtzeit-Objekterkennung es l\u00f6sen kann? Lass es uns in den Kommentaren unten wissen!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Seitdem sich die Kameras verbessert haben, ist die Objekterkennung in Echtzeit zu einer immer gefragteren Funktion geworden. Von selbstfahrenden Autos \u00fcber intelligente \u00dcberwachungssysteme bis hin zu …<\/p>\n","protected":false},"author":238,"featured_media":69728,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[982,951,975],"class_list":["post-69727","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-statische-seiten-generatoren","topic-javascript-frameworks","topic-react"],"yoast_head":"\n
Wie man eine Echtzeit-Objekterkennungs-Anwendung mit React und Kinsta erstellt - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"In diesem Artikel wird erkl\u00e4rt, wie man mit React eine Anwendung zur Objekterkennung in Echtzeit erstellt, die die Webcam eines Nutzers nutzt, und diese auf Kinsta bereitstellt.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man eine Echtzeit-Objekterkennungs-Anwendung mit React und Kinsta erstellt\" \/>\n<meta property=\"og:description\" content=\"In diesem Artikel wird erkl\u00e4rt, wie man mit React eine Anwendung zur Objekterkennung in Echtzeit erstellt, die die Webcam eines Nutzers nutzt, und diese auf Kinsta bereitstellt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-15T07:34:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-17T07:45:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kumar Harsh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"In diesem Artikel wird erkl\u00e4rt, wie man mit React eine Anwendung zur Objekterkennung in Echtzeit erstellt, die die Webcam eines Nutzers nutzt, und diese auf Kinsta bereitstellt.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kumar Harsh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"11\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/\"},\"author\":{\"name\":\"Kumar Harsh\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\"},\"headline\":\"Wie man eine Echtzeit-Objekterkennungs-Anwendung mit React und Kinsta erstellt\",\"datePublished\":\"2024-04-15T07:34:21+00:00\",\"dateModified\":\"2024-04-17T07:45:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/\"},\"wordCount\":1558,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/\",\"name\":\"Wie man eine Echtzeit-Objekterkennungs-Anwendung mit React und Kinsta erstellt - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app.jpg\",\"datePublished\":\"2024-04-15T07:34:21+00:00\",\"dateModified\":\"2024-04-17T07:45:31+00:00\",\"description\":\"In diesem Artikel wird erkl\u00e4rt, wie man mit React eine Anwendung zur Objekterkennung in Echtzeit erstellt, die die Webcam eines Nutzers nutzt, und diese auf Kinsta bereitstellt.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man eine Echtzeit-Objekterkennungs-Anwendung mit React und Kinsta erstellt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\",\"name\":\"Kumar Harsh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g\",\"caption\":\"Kumar Harsh\"},\"description\":\"Kumar is a software developer and a technical author based in India. He specializes in JavaScript and DevOps. You can learn more about his work on his website.\",\"sameAs\":[\"https:\/\/kumarharsh.me\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/kumarharsh\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man eine Echtzeit-Objekterkennungs-Anwendung mit React und Kinsta erstellt - Kinsta\u00ae","description":"In diesem Artikel wird erkl\u00e4rt, wie man mit React eine Anwendung zur Objekterkennung in Echtzeit erstellt, die die Webcam eines Nutzers nutzt, und diese auf Kinsta bereitstellt.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man eine Echtzeit-Objekterkennungs-Anwendung mit React und Kinsta erstellt","og_description":"In diesem Artikel wird erkl\u00e4rt, wie man mit React eine Anwendung zur Objekterkennung in Echtzeit erstellt, die die Webcam eines Nutzers nutzt, und diese auf Kinsta bereitstellt.","og_url":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-04-15T07:34:21+00:00","article_modified_time":"2024-04-17T07:45:31+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app.jpg","type":"image\/jpeg"}],"author":"Kumar Harsh","twitter_card":"summary_large_image","twitter_description":"In diesem Artikel wird erkl\u00e4rt, wie man mit React eine Anwendung zur Objekterkennung in Echtzeit erstellt, die die Webcam eines Nutzers nutzt, und diese auf Kinsta bereitstellt.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app-1024x512.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Kumar Harsh","Gesch\u00e4tzte Lesezeit":"11\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/"},"author":{"name":"Kumar Harsh","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9"},"headline":"Wie man eine Echtzeit-Objekterkennungs-Anwendung mit React und Kinsta erstellt","datePublished":"2024-04-15T07:34:21+00:00","dateModified":"2024-04-17T07:45:31+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/"},"wordCount":1558,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/","url":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/","name":"Wie man eine Echtzeit-Objekterkennungs-Anwendung mit React und Kinsta erstellt - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app.jpg","datePublished":"2024-04-15T07:34:21+00:00","dateModified":"2024-04-17T07:45:31+00:00","description":"In diesem Artikel wird erkl\u00e4rt, wie man mit React eine Anwendung zur Objekterkennung in Echtzeit erstellt, die die Webcam eines Nutzers nutzt, und diese auf Kinsta bereitstellt.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/object-detection-app.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/react-objekt-erkennungs-anwendung\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/de\/thema\/react\/"},{"@type":"ListItem","position":3,"name":"Wie man eine Echtzeit-Objekterkennungs-Anwendung mit React und Kinsta erstellt"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9","name":"Kumar Harsh","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g","caption":"Kumar Harsh"},"description":"Kumar is a software developer and a technical author based in India. He specializes in JavaScript and DevOps. You can learn more about his work on his website.","sameAs":["https:\/\/kumarharsh.me"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/kumarharsh\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/238"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=69727"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69727\/revisions"}],"predecessor-version":[{"id":69748,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69727\/revisions\/69748"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69727\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69727\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69727\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69727\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69727\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69727\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69727\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69727\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69727\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/69728"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=69727"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=69727"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=69727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Node-Version:<\/strong>
- Als N\u00e4chstes erstellst du einen Status in der Komponente
- Als N\u00e4chstes installierst du die TensorFlow- und Coco SSD-Bibliotheken, indem du die folgenden Befehle im Projekt ausf\u00fchrst:\n
- TensorFlow.js<\/strong>: TensorFlow.js<\/a> ist eine JavaScript-Bibliothek, die die M\u00f6glichkeiten des maschinellen Lernens in den Browser bringt. Sie erm\u00f6glicht es dir, trainierte Modelle f\u00fcr die Objekterkennung zu laden und direkt im Browser auszuf\u00fchren, sodass keine komplexe serverseitige Verarbeitung erforderlich ist.<\/li>\n