\n
Vereisten<\/h2>\n
Hier volgt een overzicht van de belangrijkste technologie\u00ebn die in deze handleiding worden gebruikt:<\/p>\n
- \n
- React<\/strong>: React wordt gebruikt om de gebruikersinterface (UI) van de applicatie te bouwen. React blinkt uit in het renderen van dynamische inhoud<\/a> en zal nuttig zijn bij het presenteren van de webcam feed en gedetecteerde objecten in de browser.<\/li>\n
- TensorFlow.js<\/strong>: TensorFlow.js<\/a> is een JavaScript bibliotheek die de kracht van machine learning naar de browser brengt. Hiermee kun je voorgetrainde modellen voor objectdetectie laden en direct in de browser uitvoeren, zodat er geen complexe server-side verwerking nodig is.<\/li>\n
- Coco SSD<\/strong>: De applicatie gebruikt een voorgetraind objectdetectiemodel genaamd Coco SSD<\/a>, een lichtgewicht model dat in staat is om een groot aantal alledaagse objecten in realtime te herkennen. Hoewel Coco SSD een krachtig hulpmiddel is, is het belangrijk op te merken dat het is getraind op een algemene dataset van objecten. Als je specifieke detectiebehoeften hebt, kun je een aangepast model trainen met TensorFlow.js door deze handleiding te volgen<\/a>.<\/li>\n<\/ul>\n
Een nieuw React project opzetten<\/h2>\n
- \n
- Maak een nieuw React project. Doe dit door het volgende commando uit te voeren:\n
npm create vite@latest kinsta-object-detection --template react<\/code><\/pre>\nDit zal een basislijn React project voor je scaffold met behulp van vite<\/a>.<\/li>\n
- Installeer vervolgens de TensorFlow en Coco SSD bibliotheken door de volgende commando’s in het project uit te voeren:\n
npm i @tensorflow-models\/coco-ssd @tensorflow\/tfjs<\/code><\/pre>\n<\/li>\n<\/ol>\nNu ben je klaar om te beginnen met het ontwikkelen van je app.<\/p>\n
De app configureren<\/h2>\n
Laten we, voordat we de code voor de objectdetectielogica schrijven, eerst begrijpen wat er in deze handleiding wordt ontwikkeld. Zo ziet de UI van de app eruit:<\/p>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-app-ui-1024x502.png\")
UI-ontwerp van de app.<\/figcaption><\/figure>\n Wanneer een gebruiker op de knop Start Webcam<\/strong> klikt, wordt hij gevraagd om de app toestemming te geven voor toegang tot de webcam feed. Als die toestemming is gegeven, begint de app met het tonen van de webcam feed en detecteert objecten in de feed. De app maakt dan een kader om de gedetecteerde objecten op de live feed weer te geven en voegt er ook een label aan toe.<\/p>\n
Maak om te beginnen de UI voor de app door de volgende code in het bestand App.jsx<\/strong> te plakken:<\/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>\nDit codefragment specificeert een header voor de pagina en importeert een custom component met de naam
ObjectDetection<\/code>. Dit component bevat de logica voor het vastleggen van de webcamfeed en het detecteren van objecten in realtime.<\/p>\nOm dit component te maken, maak je een nieuw bestand met de naam ObjectDetection.jsx<\/strong> in je src <\/strong>directory en plak je de volgende code erin:<\/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>\nDe bovenstaande code definieert een HTML<\/a> structuur met een knop om de webcamfeed te starten en te stoppen en een
<video><\/code> element dat wordt gebruikt om de gebruiker zijn webcamfeed te laten zien zodra deze actief is. Een statuscontainerisWebcamStarted<\/code> wordt gebruikt om de status van de webcam feed op te slaan. Twee functies,startWebcam<\/code> enstopWebcam<\/code> worden gebruikt om de webcam feed te starten en te stoppen. Laten we ze defini\u00ebren:<\/p>\nHier is de code voor de functie
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>\nDeze functie zorgt voor het verzoek aan de gebruiker om webcamtoegang te verlenen, en zodra de toestemming is verleend, stelt het de
<video><\/code> in om de live webcamfeed aan de gebruiker te tonen.<\/p>\nAls de code er niet in slaagt om toegang te krijgen tot de webcam feed (mogelijk omdat er geen webcam is op het huidige apparaat of omdat de gebruiker geen toestemming krijgt), dan zal de functie een bericht printen naar de console. Je kunt een error blok gebruiken om de reden van de mislukking aan de gebruiker weer te geven.<\/p>\n
Vervang vervolgens de functie
stopWebcam<\/code> door de volgende 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>\nDeze code controleert de lopende videostreamtracks die worden benaderd door het
<video><\/code> object en stopt elk van hen. Ten slotte wordt de statusisWebcamStarted<\/code> ingesteld opfalse<\/code>.<\/p>\nProbeer nu de app uit te voeren om te controleren of je de webcam feed kunt openen en bekijken.<\/p>\n
Zorg ervoor dat je de volgende code in het bestand index.css<\/strong> plakt om ervoor te zorgen dat de app er hetzelfde uitziet als de preview die je eerder zag:<\/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>\nVerwijder ook het App.css<\/strong> bestand om de stijlen van de componenten niet te verknoeien. Nu ben je klaar om de logica te schrijven voor het integreren van real-time objectdetectie in je app.<\/p>\n
Realtime objectdetectie instellen<\/h2>\n
- \n
- Begin met het toevoegen van de imports voor Tensorflow en Coco SSD bovenaan ObjectDetection.jsx<\/strong>:\n
import * as cocoSsd from '@tensorflow-models\/coco-ssd';\n\nimport '@tensorflow\/tfjs';<\/code><\/pre>\n<\/li>\n- Maak vervolgens een state aan in de component
ObjectDetection<\/code> om de array van predictions op te slaan die zijn gegenereerd door het Coco SSD model:\nconst [predictions, setPredictions] = useState([]);<\/code><\/pre>\n<\/li>\n- Maak vervolgens een functie die het Coco SSD model laadt, de video feed verzamelt en de voorspellingen genereert:\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>\nDeze functie gebruikt de videofeed en genereert voorspellingen voor objecten die aanwezig zijn in de feed. Het zal je voorzien van een matrix van voorspelde objecten, elk met een label, een betrouwbaarheidspercentage en een set co\u00f6rdinaten die de locatie van het object in het videoframe weergeven.<\/p>\n
Je moet deze functie continu callen om videoframes te verwerken wanneer ze binnenkomen en dan de voorspellingen gebruiken die zijn opgeslagen in de
predictions<\/code> status om vakjes en labels te tonen voor elk ge\u00efdentificeerd object op de live videofeed.<\/li>\n- Gebruik vervolgens de functie
setInterval<\/code> om de functie continu te callen. Je moet ook voorkomen dat deze functie wordt gecalld nadat de gebruiker de webcam feed heeft gestopt. Om dat te doen, gebruik je declearInterval<\/code> functie van JavaScript.Voeg de volgende state container en deuseEffect<\/code> hook toe in hetObjectDetection<\/code> component om in te stellen dat depredictObject<\/code> functie continu wordt gecalld als de webcam is ingeschakeld en wordt verwijderd als de webcam is uitgeschakeld:\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>\nDit stelt de app in om elke 500 milliseconden de objecten te detecteren die voor de webcam aanwezig zijn. Je kunt overwegen om deze waarde te veranderen, afhankelijk van hoe snel je de objectdetectie wilt hebben, maar houd er wel rekening mee dat als je het te vaak doet, dit tot gevolg kan hebben dat je app veel geheugen in de browser gebruikt.<\/li>\n
- Nu je de voorspellingsgegevens in de
prediction<\/code> state container hebt, kun je deze gebruiken om een label en een kader rond het object weer te geven in de live video feed. Om dat te doen, werk je dereturn<\/code> declaration van deObjectDetection<\/code> bij zodat deze het volgende weergeeft:\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>\nDit zal een lijst met voorspellingen direct onder de webcam feed renderen en een box tekenen rond het voorspelde object met behulp van de co\u00f6rdinaten van Coco SSD samen met een label bovenaan de boxen.<\/li>\n
- Om de boxen en het label correct te stijlen, voeg je de volgende code toe aan het bestand index.css<\/strong>:\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>\nHiermee is de ontwikkeling van de app voltooid. Je kunt nu de dev server herstarten om de applicatie te testen. Hier zie je hoe de app eruit zou moeten zien als hij klaar is:<\/p>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-demo.gif\")
Demo van de realtime objectdetectie met webcam<\/figcaption><\/figure><\/li>\n<\/ol>\n Je kunt de volledige code vinden in deze GitHub repository<\/a>.<\/p>\n
De voltooide app deployen naar Kinsta<\/h2>\n
De laatste stap is het deployen van de app op Kinsta om hem beschikbaar te maken voor je gebruikers. Om dat te doen, kun je bij Kinsta gratis<\/strong> tot 100 statische websites hosten<\/a>, rechtstreeks vanaf de Git provider van jouw voorkeur (Bitbucket<\/a>, GitHub<\/a> of GitLab<\/a>).<\/p>\n
Als je git repository klaar is, volg dan deze stappen om je objectdetectie app te deployen naar Kinsta:<\/p>\n
- \n
- Log in of maak een account aan om je MyKinsta<\/a> dashboard te bekijken.<\/li>\n
- Autoriseer Kinsta met je Git provider.<\/li>\n
- Klik op Statische\u00a0 sites<\/strong> op de linker zijbalk en klik dan op Site toevoegen<\/strong>.<\/li>\n
- Selecteer de repository en de branch waarvan je wilt deployen.<\/li>\n
- Geef je site een unieke naam.<\/li>\n
- Voeg de bouwinstellingen toe in het volgende formaat:\n
- \n
- Build commando:<\/strong>
yarn build<\/code> ofnpm run build<\/code><\/li>\n- Node versie:<\/strong>
20.2.0<\/code><\/li>\n- Publish directory:<\/strong>
dist<\/code><\/li>\n<\/ul>\n<\/li>\n- Klik ten slotte op Maak site<\/strong>.<\/li>\n<\/ol>\n
Zodra de app is gedeployd, kun je op Bezoek site<\/strong> klikken in het dashboard om toegang te krijgen tot de app. Je kunt nu proberen de app op verschillende apparaten met camera’s uit te voeren om te zien hoe hij presteert.<\/p>\n
Als alternatief voor Statische Site Hosting kun je je statische site implementeren met Kinsta’s Applicatie Hosting<\/a>, dat meer flexibiliteit biedt bij het hosten, een breder scala aan voordelen en toegang tot robuustere features. Bijvoorbeeld schaalbaarheid, custom deployments met behulp van een Dockerfile<\/a> en uitgebreide analytics<\/a> met real-time en historische gegevens.<\/p>\n
Samenvatting<\/h2>\n
Je hebt met succes een realtime objectdetectie applicatie gebouwd met React, TensorFlow.js en Kinsta. Dit stelt je in staat om de spannende wereld van computer vision te verkennen en interactieve ervaringen direct in de browser van de gebruiker te cre\u00ebren.<\/p>\n
Onthoud dat het Coco SSD model dat we hebben gebruikt slechts een startpunt is. Met verdere verkenning kun je je verdiepen in aangepaste objectdetectie met TensorFlow.js, waardoor je de app kunt aanpassen om specifieke objecten te identificeren die relevant zijn voor jouw behoeften.<\/p>\n
De mogelijkheden zijn enorm! Deze app dient als basis om meer gedetailleerde applicaties te bouwen, zoals augmented reality ervaringen of slimme bewakingssystemen. Door je app te deployen op het betrouwbare platform van Kinsta, kun je je creatie delen met de wereld en de kracht van computervisie tot leven zien komen.<\/p>\n
Wat is een probleem dat jij bent tegengekomen en waarvan je denkt dat realtime objectdetectie het kan oplossen? Laat het ons weten in de comments hieronder!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Sinds camera’s enorm zijn verbeterd in de afgelopen jaren, is realtime objectdetectie een steeds gewilde functionaliteit geworden. Deze technologie wordt in veel situaties gebruikt, van zelfrijdende …<\/p>\n","protected":false},"author":238,"featured_media":59073,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[847,871,914],"class_list":["post-59072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-frameworks","topic-react","topic-statische-sitegenerators"],"yoast_head":"\n
Zo bouw je een realtime app voor objectdetectie met React en Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Dit artikel legt uit hoe je een realtime app voor objectdetectie kunt bouwen met React die gebruik maakt van de webcam van een gebruiker en hoe je de app kunt deployen naar Kinsta.\" \/>\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\/nl\/blog\/react-object-detectie-app\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo bouw je een realtime app voor objectdetectie met React en Kinsta\" \/>\n<meta property=\"og:description\" content=\"Dit artikel legt uit hoe je een realtime app voor objectdetectie kunt bouwen met React die gebruik maakt van de webcam van een gebruiker en hoe je de app kunt deployen naar Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-15T07:35:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-19T07:27:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/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=\"Dit artikel legt uit hoe je een realtime app voor objectdetectie kunt bouwen met React die gebruik maakt van de webcam van een gebruiker en hoe je de app kunt deployen naar Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/object-detection-app-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kumar Harsh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/\"},\"author\":{\"name\":\"Kumar Harsh\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\"},\"headline\":\"Zo bouw je een realtime app voor objectdetectie met React en Kinsta\",\"datePublished\":\"2024-04-15T07:35:14+00:00\",\"dateModified\":\"2024-04-19T07:27:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/\"},\"wordCount\":1670,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/object-detection-app.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/\",\"name\":\"Zo bouw je een realtime app voor objectdetectie met React en Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/object-detection-app.jpg\",\"datePublished\":\"2024-04-15T07:35:14+00:00\",\"dateModified\":\"2024-04-19T07:27:17+00:00\",\"description\":\"Dit artikel legt uit hoe je een realtime app voor objectdetectie kunt bouwen met React die gebruik maakt van de webcam van een gebruiker en hoe je de app kunt deployen naar Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/object-detection-app.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/object-detection-app.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo bouw je een realtime app voor objectdetectie met React en Kinsta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\",\"name\":\"Kumar Harsh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/kumarharsh\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo bouw je een realtime app voor objectdetectie met React en Kinsta - Kinsta\u00ae","description":"Dit artikel legt uit hoe je een realtime app voor objectdetectie kunt bouwen met React die gebruik maakt van de webcam van een gebruiker en hoe je de app kunt deployen naar Kinsta.","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\/nl\/blog\/react-object-detectie-app\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo bouw je een realtime app voor objectdetectie met React en Kinsta","og_description":"Dit artikel legt uit hoe je een realtime app voor objectdetectie kunt bouwen met React die gebruik maakt van de webcam van een gebruiker en hoe je de app kunt deployen naar Kinsta.","og_url":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-04-15T07:35:14+00:00","article_modified_time":"2024-04-19T07:27:17+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/object-detection-app.jpg","type":"image\/jpeg"}],"author":"Kumar Harsh","twitter_card":"summary_large_image","twitter_description":"Dit artikel legt uit hoe je een realtime app voor objectdetectie kunt bouwen met React die gebruik maakt van de webcam van een gebruiker en hoe je de app kunt deployen naar Kinsta.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/object-detection-app-1024x512.jpg","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Kumar Harsh","Geschatte leestijd":"11 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/"},"author":{"name":"Kumar Harsh","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9"},"headline":"Zo bouw je een realtime app voor objectdetectie met React en Kinsta","datePublished":"2024-04-15T07:35:14+00:00","dateModified":"2024-04-19T07:27:17+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/"},"wordCount":1670,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/object-detection-app.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/","url":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/","name":"Zo bouw je een realtime app voor objectdetectie met React en Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/object-detection-app.jpg","datePublished":"2024-04-15T07:35:14+00:00","dateModified":"2024-04-19T07:27:17+00:00","description":"Dit artikel legt uit hoe je een realtime app voor objectdetectie kunt bouwen met React die gebruik maakt van de webcam van een gebruiker en hoe je de app kunt deployen naar Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/object-detection-app.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/object-detection-app.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/react-object-detectie-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/react\/"},{"@type":"ListItem","position":3,"name":"Zo bouw je een realtime app voor objectdetectie met React en Kinsta"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9","name":"Kumar Harsh","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/kumarharsh\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/59072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/238"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=59072"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/59072\/revisions"}],"predecessor-version":[{"id":59114,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/59072\/revisions\/59114"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59072\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59072\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59072\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59072\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59072\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59072\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59072\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59072\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59072\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/59073"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=59072"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=59072"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=59072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Node versie:<\/strong>
- Maak vervolgens een state aan in de component
- Installeer vervolgens de TensorFlow en Coco SSD bibliotheken door de volgende commando’s in het project uit te voeren:\n
- TensorFlow.js<\/strong>: TensorFlow.js<\/a> is een JavaScript bibliotheek die de kracht van machine learning naar de browser brengt. Hiermee kun je voorgetrainde modellen voor objectdetectie laden en direct in de browser uitvoeren, zodat er geen complexe server-side verwerking nodig is.<\/li>\n