\n
Prerequisiti<\/h2>\n
Ecco una panoramica delle tecnologie chiave utilizzate in questa guida:<\/p>\n
- \n
- React<\/strong>: React viene utilizzato per costruire l’interfaccia utente (UI) dell’applicazione. React eccelle nel rendering di contenuti dinamici<\/a> e sar\u00e0 utile per presentare il feed della webcam e gli oggetti rilevati nel browser.<\/li>\n
- TensorFlow.js<\/strong>: TensorFlow.js<\/a> \u00e8 una libreria JavaScript che porta la potenza dell’apprendimento automatico nel browser. Permette di caricare modelli pre-addestrati per il rilevamento degli oggetti e di eseguirli direttamente nel browser, eliminando la necessit\u00e0 di una complessa elaborazione lato server.<\/li>\n
- Coco SSD<\/strong>: L’applicazione utilizza un modello di rilevamento degli oggetti pre-addestrato chiamato Coco SSD<\/a>, un modello leggero in grado di riconoscere una vasta gamma di oggetti quotidiani in tempo reale. Sebbene Coco SSD sia uno strumento potente, \u00e8 importante notare che \u00e8 stato addestrato su un insieme generale di oggetti. Se si hanno esigenze specifiche di riconoscimento, \u00e8 possibile addestrare un modello personalizzato utilizzando TensorFlow.js seguendo questa guida<\/a>.<\/li>\n<\/ul>\n
Impostare un nuovo progetto React<\/h2>\n
- \n
- Creiamo un nuovo progetto React. Eseguiamo questo comando:\n
npm create vite@latest kinsta-object-detection --template react<\/code><\/pre>\nIn questo modo verr\u00e0 creato un progetto React di base utilizzando vite<\/a>.<\/li>\n
- Successivamente, installiamo le librerie TensorFlow e Coco SSD eseguendo i comandi qui sotto nel progetto:\n
npm i @tensorflow-models\/coco-ssd @tensorflow\/tfjs<\/code><\/pre>\n<\/li>\n<\/ol>\nOra siamo pronti per iniziare a sviluppare la nostra applicazione.<\/p>\n
Configurazione dell’applicazione<\/h2>\n
Prima di scrivere il codice per la logica di rilevamento degli oggetti, cerchiamo di capire cosa viene sviluppato in questa guida. Ecco come appare l’interfaccia utente dell’applicazione:<\/p>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-app-ui-1024x502.png\")
Design dell’interfaccia utente dell’applicazione.<\/figcaption><\/figure>\n Quando un utente clicca sul pulsante Avvia webcam<\/strong>, gli viene chiesto di concedere all’applicazione il permesso di accedere al feed della webcam. Una volta concessa l’autorizzazione, l’applicazione inizia a mostrare il feed della webcam e rileva gli oggetti presenti nel feed. A questo punto, crea un riquadro per mostrare gli oggetti rilevati sul live feed e aggiunge anche un’etichetta.<\/p>\n
Per iniziare, creiamo l’interfaccia utente dell’applicazione incollando il seguente codice nel file App.jsx<\/strong>:<\/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>\nQuesto frammento di codice specifica un’intestazione per la pagina e importa un componente personalizzato chiamato
ObjectDetection<\/code>. Questo componente contiene la logica per catturare il feed della webcam e rilevare gli oggetti in tempo reale.<\/p>\nPer creare questo componente, creiamo un nuovo file chiamato ObjectDetection.jsx<\/strong> nella cartella src<\/strong> e incolliamoci il seguente codice:<\/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>\nIl codice qui sopra definisce una struttura HTML<\/a> con un pulsante per avviare e interrompere il feed della webcam e un elemento
<video><\/code> che verr\u00e0 utilizzato per mostrare all’utente il feed della webcam una volta attivo. Un contenitore di statoisWebcamStarted<\/code> viene utilizzato per memorizzare lo stato del feed della webcam. Due funzioni,startWebcam<\/code> estopWebcam<\/code>, sono utilizzate per avviare e interrompere il feed della webcam. Definiamole:<\/p>\nEcco il codice della funzione
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>\nQuesta funzione si occupa di chiedere all’utente di concedere l’accesso alla webcam e, una volta concessa l’autorizzazione, imposta
<video><\/code> per mostrare all’utente il feed della webcam in diretta.<\/p>\nSe il codice non riesce ad accedere al feed della webcam (forse a causa della mancanza di una webcam sul dispositivo corrente o perch\u00e9 all’utente viene negata l’autorizzazione), la funzione stamper\u00e0 un messaggio nella console. Possiamo utilizzare un blocco di errore per mostrare all’utente il motivo del fallimento.<\/p>\n
Quindi, sostituiamo la funzione
stopWebcam<\/code> con il seguente codice:<\/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>\nQuesto codice controlla le tracce del flusso video in esecuzione a cui l’oggetto
<video><\/code> sta accedendo e arresta ciascuna di esse. Infine, imposta lo statoisWebcamStarted<\/code> sufalse<\/code>.<\/p>\nA questo punto, proviamo a eseguire l’applicazione per verificare se possiamo accedere e visualizzare il feed della webcam.<\/p>\n
Incolliamo il seguente codice nel file index.css<\/strong> per assicurarci che l’app abbia lo stesso aspetto dell’anteprima che abbiamo visto prima:<\/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>\nInoltre, rimuoviamo il file App.css<\/strong> per evitare di rovinare gli stili dei componenti. Ora siamo pronti a scrivere la logica per integrare il rilevamento degli oggetti in tempo reale nell’app.<\/p>\n
Impostare il rilevamento degli oggetti in tempo reale<\/h2>\n
- \n
- Iniziamo aggiungendo le importazioni di Tensorflow e Coco SSD all’inizio di ObjectDetection.jsx<\/strong>:\n
import * as cocoSsd from '@tensorflow-models\/coco-ssd';\n\nimport '@tensorflow\/tfjs';<\/code><\/pre>\n<\/li>\n- Quindi, creiamo uno stato nel componente
ObjectDetection<\/code> per memorizzare l’array di previsioni generate dal modello Coco SSD:\nconst [predictions, setPredictions] = useState([]);<\/code><\/pre>\n<\/li>\n- Creiamo poi una funzione che carichi il modello Coco SSD, raccolga il feed video e generi le previsioni:\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>\nQuesta funzione utilizza il feed video e genera previsioni per gli oggetti presenti nel feed. Ci fornir\u00e0 un array di oggetti previsti, ognuno dei quali contiene un’etichetta, una percentuale di attendibilit\u00e0 e una serie di coordinate che indicano la posizione dell’oggetto nel fotogramma video.<\/p>\n
Dobbiamo richiamare continuamente questa funzione per elaborare i fotogrammi video man mano che arrivano e poi utilizzare le previsioni memorizzate nello stato
predictions<\/code> per mostrare i riquadri e le etichette di ogni oggetto identificato sul video in diretta.<\/li>\n- Quindi, utilizziamo la funzione
setInterval<\/code> per richiamare la funzione in modo continuo. Dobbiamo anche impedire che questa funzione venga richiamata dopo che l’utente ha interrotto il feed della webcam. Per farlo, usiamo la funzioneclearInterval<\/code> da JavaScript. Aggiungiamo il seguente contenitore di stato e l’hookuseEffect<\/code> nel componenteObjectDetection<\/code> per impostare la funzionepredictObject<\/code> in modo che venga chiamata continuamente quando la webcam \u00e8 attiva e rimossa quando la webcam \u00e8 disattivata:\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>\nIn questo modo l’applicazione rileva gli oggetti presenti davanti alla webcam ogni 500 millisecondi. Possiamo modificare questo valore a seconda della velocit\u00e0 con cui vogliamo che il rilevamento degli oggetti avvenga, tenendo presente che un’operazione troppo frequente potrebbe far s\u00ec che l’applicazione utilizzi molta memoria nel browser.<\/li>\n
- Ora che abbiamo i dati di previsione nel contenitore di stato
prediction<\/code>, possiamo usarli per visualizzare un’etichetta e un riquadro intorno all’oggetto nel video in diretta. Per farlo, aggiorniamo la dichiarazionereturn<\/code> del contenitoreObjectDetection<\/code> in modo che restituisca quanto segue:\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>\nQuesto render\u00e0 un elenco di previsioni proprio sotto il feed della webcam e disegner\u00e0 un riquadro intorno all’oggetto previsto utilizzando le coordinate di Coco SSD insieme a un’etichetta nella parte superiore del riquadro.<\/li>\n
- Per creare correttamente i riquadri e l’etichetta, aggiungiamo il seguente codice al file 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>\nQuesto completa lo sviluppo dell’applicazione. Ora possiamo riavviare il server dev per testare l’applicazione. Ecco come dovrebbe apparire una volta completata:<\/p>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-demo.gif\")
Dimostrazione del rilevamento di oggetti in tempo reale tramite webcam<\/figcaption><\/figure><\/li>\n<\/ol>\n Il codice completo si trova in questo repository GitHub<\/a>.<\/p>\n
Distribuire l’applicazione completata su Kinsta<\/h2>\n
Il passo finale consiste nel distribuire l’app su Kinsta per renderla disponibile ai nostri utenti. Per farlo, Kinsta permette di ospitare gratuitamente<\/strong> fino a 100 siti web statici<\/a> direttamente dal proprio provider Git preferito (Bitbucket<\/a>, GitHub<\/a> o GitLab<\/a>).<\/p>\n
Una volta che il repository git sar\u00e0 pronto, seguiamo questi passaggi per distribuire l’app di rilevamento oggetti su Kinsta:<\/p>\n
- \n
- Accediamo o creiamo un account per visualizzare la nostra dashboard MyKinsta<\/a>.<\/li>\n
- Autorizziamo Kinsta con il provider Git.<\/li>\n
- Clicchiamo su Siti statici<\/strong> nella barra laterale di sinistra e poi su Aggiungi sito<\/strong>.<\/li>\n
- Selezioniamo il repository e il branch da cui desideriamo effettuare il deploy.<\/li>\n
- Assegniamo un nome unico al sito.<\/li>\n
- Aggiungiamo le impostazioni di build nel seguente formato:\n
- \n
- Comando di build:<\/strong>
yarn build<\/code> oppurenpm run build<\/code><\/li>\n- Versione node:<\/strong>
20.2.0<\/code><\/li>\n- Directory di pubblicazione:<\/strong>
dist<\/code><\/li>\n<\/ul>\n<\/li>\n- Infine, clicchiamo su Crea sito<\/strong>.<\/li>\n<\/ol>\n
Una volta che l’applicazione \u00e8 stata distribuita, possiamo cliccare su Visita il sito<\/strong> dalla dashboard per accedere all’applicazione. Ora possiamo provare a eseguire l’applicazione su vari dispositivi con telecamere per vedere come si comporta.<\/p>\n
In alternativa all’Hosting di Siti Statici, possiamo distribuire il nostro sito statico con l’Hosting di Applicazioni<\/a> di Kinsta, che offre una maggiore flessibilit\u00e0 di hosting, una gamma pi\u00f9 ampia di vantaggi e l’accesso a funzioni pi\u00f9 robuste. Ad esempio, la scalabilit\u00e0, la distribuzione personalizzata tramite un file Docker<\/a> e l’analisi completa<\/a> dei dati storici e in tempo reale.<\/p>\n
Riepilogo<\/h2>\n
Abbiamo realizzato con successo un’applicazione per il rilevamento di oggetti in tempo reale utilizzando React, TensorFlow.js e Kinsta. Questo ci permette di esplorare l’entusiasmante mondo della computer vision e di creare esperienze interattive direttamente nel browser dell’utente.<\/p>\n
Ricordate che il modello Coco SSD che abbiamo utilizzato \u00e8 solo un punto di partenza. Con un’ulteriore esplorazione, potrete approfondire il rilevamento di oggetti personalizzati utilizzando TensorFlow.js, e quindi personalizzare l’app per identificare oggetti specifici rilevanti per le vostre esigenze.<\/p>\n
Le possibilit\u00e0 sono vastissime: questa applicazione \u00e8 la base per costruire applicazioni pi\u00f9 dettagliate, come esperienze di realt\u00e0 aumentata o sistemi di sorveglianza intelligenti. Distribuendo la vostra applicazione sull’affidabile piattaforma di Kinsta, potrete condividere la vostra creazione con il mondo e vedere la potenza della computer vision prendere vita.<\/p>\n
C’\u00e8 qualche problema che avete riscontrato e che pensate possa essere risolto con il rilevamento degli oggetti in tempo reale? Fatecelo sapere nei commenti qui sotto!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Da quando le telecamere sono migliorate, il rilevamento degli oggetti in tempo reale \u00e8 diventato una funzionalit\u00e0 sempre pi\u00f9 richiesta. Dalle auto a guida autonoma ai …<\/p>\n","protected":false},"author":238,"featured_media":77305,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25918,26238,26212],"class_list":["post-77304","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-framework-javascript","topic-generatore-siti-statici","topic-react"],"yoast_head":"\n
Come costruire un'applicazione per il rilevamento di oggetti in tempo reale utilizzando React e Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Ecco come costruire un'app per il rilevamento di oggetti in tempo reale con React e la webcam dell'utente, e poi distribuirla su 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\/it\/blog\/app-rilevamento-oggetti-react\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come costruire un'applicazione per il rilevamento di oggetti in tempo reale utilizzando React e Kinsta\" \/>\n<meta property=\"og:description\" content=\"Ecco come costruire un'app per il rilevamento di oggetti in tempo reale con React e la webcam dell'utente, e poi distribuirla su Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-15T07:34:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-16T09:21:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"Ecco come costruire un'app per il rilevamento di oggetti in tempo reale con React e la webcam dell'utente, e poi distribuirla su Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/object-detection-app-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kumar Harsh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/\"},\"author\":{\"name\":\"Kumar Harsh\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\"},\"headline\":\"Come costruire un’applicazione per il rilevamento di oggetti in tempo reale utilizzando React e Kinsta\",\"datePublished\":\"2024-04-15T07:34:59+00:00\",\"dateModified\":\"2024-04-16T09:21:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/\"},\"wordCount\":1575,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/object-detection-app.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/\",\"name\":\"Come costruire un'applicazione per il rilevamento di oggetti in tempo reale utilizzando React e Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/object-detection-app.jpg\",\"datePublished\":\"2024-04-15T07:34:59+00:00\",\"dateModified\":\"2024-04-16T09:21:41+00:00\",\"description\":\"Ecco come costruire un'app per il rilevamento di oggetti in tempo reale con React e la webcam dell'utente, e poi distribuirla su Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/object-detection-app.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/object-detection-app.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come costruire un’applicazione per il rilevamento di oggetti in tempo reale utilizzando React e Kinsta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\",\"name\":\"Kumar Harsh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/kumarharsh\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come costruire un'applicazione per il rilevamento di oggetti in tempo reale utilizzando React e Kinsta - Kinsta\u00ae","description":"Ecco come costruire un'app per il rilevamento di oggetti in tempo reale con React e la webcam dell'utente, e poi distribuirla su 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\/it\/blog\/app-rilevamento-oggetti-react\/","og_locale":"it_IT","og_type":"article","og_title":"Come costruire un'applicazione per il rilevamento di oggetti in tempo reale utilizzando React e Kinsta","og_description":"Ecco come costruire un'app per il rilevamento di oggetti in tempo reale con React e la webcam dell'utente, e poi distribuirla su Kinsta.","og_url":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-04-15T07:34:59+00:00","article_modified_time":"2024-04-16T09:21:41+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/object-detection-app.jpg","type":"image\/jpeg"}],"author":"Kumar Harsh","twitter_card":"summary_large_image","twitter_description":"Ecco come costruire un'app per il rilevamento di oggetti in tempo reale con React e la webcam dell'utente, e poi distribuirla su Kinsta.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/object-detection-app-1024x512.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Kumar Harsh","Tempo di lettura stimato":"12 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/"},"author":{"name":"Kumar Harsh","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9"},"headline":"Come costruire un’applicazione per il rilevamento di oggetti in tempo reale utilizzando React e Kinsta","datePublished":"2024-04-15T07:34:59+00:00","dateModified":"2024-04-16T09:21:41+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/"},"wordCount":1575,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/object-detection-app.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/","url":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/","name":"Come costruire un'applicazione per il rilevamento di oggetti in tempo reale utilizzando React e Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/object-detection-app.jpg","datePublished":"2024-04-15T07:34:59+00:00","dateModified":"2024-04-16T09:21:41+00:00","description":"Ecco come costruire un'app per il rilevamento di oggetti in tempo reale con React e la webcam dell'utente, e poi distribuirla su Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/object-detection-app.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/object-detection-app.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/app-rilevamento-oggetti-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/it\/argomenti\/react\/"},{"@type":"ListItem","position":3,"name":"Come costruire un’applicazione per il rilevamento di oggetti in tempo reale utilizzando React e Kinsta"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9","name":"Kumar Harsh","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/kumarharsh\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/238"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=77304"}],"version-history":[{"count":4,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77304\/revisions"}],"predecessor-version":[{"id":77320,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77304\/revisions\/77320"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77304\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77304\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77304\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77304\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77304\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77304\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77304\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77304\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77304\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/77305"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=77304"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=77304"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=77304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Versione node:<\/strong>
- Quindi, creiamo uno stato nel componente
- Successivamente, installiamo le librerie TensorFlow e Coco SSD eseguendo i comandi qui sotto nel progetto:\n
- TensorFlow.js<\/strong>: TensorFlow.js<\/a> \u00e8 una libreria JavaScript che porta la potenza dell’apprendimento automatico nel browser. Permette di caricare modelli pre-addestrati per il rilevamento degli oggetti e di eseguirli direttamente nel browser, eliminando la necessit\u00e0 di una complessa elaborazione lato server.<\/li>\n