\n
Requisitos previos<\/h2>\n
Aqu\u00ed tienes un desglose de las principales tecnolog\u00edas utilizadas en esta gu\u00eda:<\/p>\n
- \n
- React<\/strong>: React se utiliza para construir la interfaz de usuario (UI) de la aplicaci\u00f3n. React destaca en la renderizaci\u00f3n de contenido din\u00e1mico<\/a> y ser\u00e1 \u00fatil para presentar el feed de la webcam y los objetos detectados dentro del navegador.<\/li>\n
- TensorFlow.js<\/strong>: TensorFlow.js<\/a> es una biblioteca de JavaScript que lleva la potencia del aprendizaje autom\u00e1tico al navegador. Te permite cargar modelos preentrenados para la detecci\u00f3n de objetos y ejecutarlos directamente en el navegador, eliminando la necesidad de un complejo procesamiento en el servidor.<\/li>\n
- Coco SSD<\/strong>: La aplicaci\u00f3n utiliza un modelo de detecci\u00f3n de objetos preentrenado llamado Coco SSD<\/a>, un modelo ligero capaz de reconocer una amplia gama de objetos cotidianos en tiempo real. Aunque Coco SSD es una herramienta potente, es importante tener en cuenta que se ha entrenado con un conjunto de datos general de objetos. Si tienes necesidades espec\u00edficas de detecci\u00f3n, puedes entrenar un modelo personalizado utilizando TensorFlow.js siguiendo esta gu\u00eda<\/a>.<\/li>\n<\/ul>\n
Configura un nuevo proyecto React<\/h2>\n
- \n
- Crea un nuevo proyecto React. Para ello, ejecuta el siguiente comando:\n
npm create vite@latest kinsta-object-detection --template react<\/code><\/pre>\nEsto crear\u00e1 un proyecto React b\u00e1sico para ti utilizando vite<\/a>.<\/li>\n
- A continuaci\u00f3n, instala las bibliotecas TensorFlow y Coco SSD ejecutando los siguientes comandos en el proyecto:\n
npm i @tensorflow-models\/coco-ssd @tensorflow\/tfjs<\/code><\/pre>\n<\/li>\n<\/ol>\nAhora ya est\u00e1s preparado para empezar a desarrollar tu aplicaci\u00f3n.<\/p>\n
Configurar la aplicaci\u00f3n<\/h2>\n
Antes de escribir el c\u00f3digo para la l\u00f3gica de detecci\u00f3n de objetos, vamos a entender qu\u00e9 se desarrolla en esta gu\u00eda. Este es el aspecto que tendr\u00eda la interfaz de usuario de la aplicaci\u00f3n:<\/p>\n
![\"Una](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/object-detection-app-ui-1024x502.png\")
Dise\u00f1o de la interfaz de usuario de la aplicaci\u00f3n.<\/figcaption><\/figure>\n Cuando un usuario pulsa el bot\u00f3n Iniciar Webcam<\/strong>, se le pide que conceda permiso a la aplicaci\u00f3n para acceder a la transmisi\u00f3n de la webcam. Una vez concedido el permiso, la aplicaci\u00f3n empieza a mostrar la imagen de la webcam y detecta los objetos presentes en ella. A continuaci\u00f3n, crea un recuadro para mostrar los objetos detectados en la imagen en directo y le a\u00f1ade una etiqueta.<\/p>\n
Para empezar, crea la interfaz de usuario de la aplicaci\u00f3n pegando el siguiente c\u00f3digo en el archivo 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>\nEste fragmento de c\u00f3digo especifica una cabecera para la p\u00e1gina e importa un componente personalizado llamado
ObjectDetection<\/code>. Este componente contiene la l\u00f3gica para capturar la se\u00f1al de la webcam y detectar objetos en tiempo real.<\/p>\nPara crear este componente, crea un nuevo archivo llamado ObjectDetection.jsx<\/strong> en tu directorio src <\/strong>y pega en \u00e9l el siguiente c\u00f3digo:<\/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>\nEl c\u00f3digo anterior define una estructura HTML<\/a> con un bot\u00f3n para iniciar y detener la transmisi\u00f3n de la webcam y un elemento
<video><\/code> que se utilizar\u00e1 para mostrar al usuario su transmisi\u00f3n de la webcam una vez que est\u00e9 activa. Se utiliza un contenedor de estadoisWebcamStarted<\/code> para almacenar el estado de la transmisi\u00f3n de la webcam. Dos funciones,startWebcam<\/code> ystopWebcam<\/code>, se utilizan para iniciar y detener la transmisi\u00f3n de la webcam. Vamos a definirlas:<\/p>\nEste es el c\u00f3digo de la funci\u00f3n
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>\nEsta funci\u00f3n se encarga de solicitar al usuario que conceda el acceso a la webcam, y una vez concedido el permiso, configura el
<video><\/code> para mostrar la transmisi\u00f3n de la webcam en directo al usuario.<\/p>\nSi el c\u00f3digo no consigue acceder a la se\u00f1al de la webcam (posiblemente por falta de webcam en el dispositivo actual o porque se deniega el permiso al usuario), la funci\u00f3n imprimir\u00e1 un mensaje en la consola. Puedes utilizar un bloque de error para mostrar al usuario el motivo del fallo.<\/p>\n
A continuaci\u00f3n, sustituye la funci\u00f3n
stopWebcam<\/code> por el siguiente c\u00f3digo:<\/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>\nEste c\u00f3digo comprueba las pistas de la transmisi\u00f3n de v\u00eddeo en ejecuci\u00f3n a las que accede el objeto
<video><\/code> y detiene cada una de ellas. Por \u00faltimo, establece el estadoisWebcamStarted<\/code> enfalse<\/code>.<\/p>\nEn este punto, prueba a ejecutar la aplicaci\u00f3n para comprobar si puedes acceder a la transmisi\u00f3n de la webcam y verla.<\/p>\n
Aseg\u00farate de pegar el siguiente c\u00f3digo en el archivo index.css<\/strong> para comprobar que la app tiene el mismo aspecto que la vista previa que has visto antes:<\/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>\nAdem\u00e1s, elimina el archivo App.css<\/strong> para no estropear los estilos de los componentes. Ahora ya puedes escribir la l\u00f3gica para integrar la detecci\u00f3n de objetos en tiempo real en tu aplicaci\u00f3n.<\/p>\n
Configurar la detecci\u00f3n de objetos en tiempo real<\/h2>\n
- \n
- Comienza a\u00f1adiendo las importaciones para Tensorflow y Coco SSD en la parte superior de ObjectDetection.jsx<\/strong>:\n
import * as cocoSsd from '@tensorflow-models\/coco-ssd';\n\nimport '@tensorflow\/tfjs';<\/code><\/pre>\n<\/li>\n- A continuaci\u00f3n, crea un estado en el componente
ObjectDetection<\/code> para almacenar el array de predicciones generado por el modelo Coco SSD:\nconst [predictions, setPredictions] = useState([]);<\/code><\/pre>\n<\/li>\n- A continuaci\u00f3n, crea una funci\u00f3n que cargue el modelo Coco SSD, recoja el v\u00eddeo y genere las predicciones:\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>\nEsta funci\u00f3n utiliza el v\u00eddeo y genera predicciones para los objetos presentes en el v\u00eddeo. Te proporcionar\u00e1 un array de objetos previstos, cada uno de los cuales contendr\u00e1 una etiqueta, un porcentaje de confianza y un conjunto de coordenadas que muestran la ubicaci\u00f3n del objeto en el fotograma de v\u00eddeo.<\/p>\n
Tienes que llamar continuamente a esta funci\u00f3n para procesar los fotogramas de v\u00eddeo a medida que llegan y, a continuaci\u00f3n, utilizar las predicciones almacenadas en el estado
predictions<\/code> para mostrar recuadros y etiquetas de cada objeto identificado en la secuencia de v\u00eddeo en directo.<\/li>\n- A continuaci\u00f3n, utiliza la funci\u00f3n
setInterval<\/code> para llamar continuamente a la funci\u00f3n. Tambi\u00e9n debes impedir que se llame a esta funci\u00f3n despu\u00e9s de que el usuario haya detenido la transmisi\u00f3n de la webcam. Para ello, utiliza la funci\u00f3nclearInterval<\/code> de JavaScript. A\u00f1ade el siguiente contenedor de estado y el hookuseEffect<\/code> en el componenteObjectDetection<\/code> para configurar la funci\u00f3npredictObject<\/code> para que se llame continuamente cuando la webcam est\u00e9 activada y se elimine cuando la webcam est\u00e9 desactivada:\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>\nEsto configura la app para que detecte los objetos presentes delante de la webcam cada 500 milisegundos. Puedes considerar cambiar este valor en funci\u00f3n de lo r\u00e1pida que quieras que sea la detecci\u00f3n de objetos, teniendo en cuenta que hacerlo con demasiada frecuencia puede hacer que tu app utilice mucha memoria en el navegador.<\/li>\n
- Ahora que tienes los datos de la predicci\u00f3n en el contenedor de estado
prediction<\/code>, puedes utilizarlos para mostrar una etiqueta y un recuadro alrededor del objeto en la secuencia de v\u00eddeo en directo. Para ello, actualiza la sentenciareturn<\/code> delObjectDetection<\/code> para que devuelva lo siguiente:\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>\nEsto mostrar\u00e1 una lista de predicciones justo debajo de la imagen de la c\u00e1mara web y dibujar\u00e1 una caja alrededor del objeto predicho utilizando las coordenadas de Coco SSD junto con una etiqueta en la parte superior de las cajas.<\/li>\n
- Para estilizar correctamente las cajas y la etiqueta, a\u00f1ade el siguiente c\u00f3digo al archivo 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>\nEsto completa el desarrollo de la aplicaci\u00f3n. Ahora puedes reiniciar el servidor dev para probar la aplicaci\u00f3n. Este es el aspecto que deber\u00eda tener una vez completada:<\/p>\n
![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/object-detection-demo.gif\")
Demostraci\u00f3n de la detecci\u00f3n de objetos en tiempo real mediante la webcam<\/figcaption><\/figure><\/li>\n<\/ol>\n Puedes encontrar el c\u00f3digo completo en este repositorio de GitHub<\/a>.<\/p>\n
Despliega la aplicaci\u00f3n completa en Kinsta<\/h2>\n
El \u00faltimo paso es desplegar la aplicaci\u00f3n en Kinsta para ponerla a disposici\u00f3n de tus usuarios. Para ello, Kinsta te permite alojar hasta 100 sitios web est\u00e1ticos<\/a> de forma gratuita<\/strong> directamente desde tu proveedor Git preferido (Bitbucket<\/a>, GitHub<\/a> o GitLab<\/a>).<\/p>\n
Una vez que tu repositorio git est\u00e9 listo, sigue estos pasos para desplegar tu app de detecci\u00f3n de objetos en Kinsta:<\/p>\n
- \n
- Inicia sesi\u00f3n o crea una cuenta para ver tu panel MyKinsta<\/a>.<\/li>\n
- Autoriza a Kinsta con tu proveedor Git.<\/li>\n
- Haz clic en Sitios Est\u00e1ticos<\/strong> en la barra lateral izquierda y, a continuaci\u00f3n, en A\u00f1adir sitio<\/strong>.<\/li>\n
- Selecciona el repositorio y la rama desde la que deseas desplegar.<\/li>\n
- Asigna un nombre \u00fanico a tu sitio.<\/li>\n
- A\u00f1ade la configuraci\u00f3n de construcci\u00f3n en el siguiente formato:\n
- \n
- Comando de construcci\u00f3n<\/strong>:
yarn build<\/code> onpm run build<\/code><\/li>\n- Versi\u00f3n de Node:<\/strong>
20.2.0<\/code><\/li>\n- Directorio de publicaci\u00f3n:<\/strong>
dist<\/code><\/li>\n<\/ul>\n<\/li>\n- Por \u00faltimo, haz clic en Crear sitio<\/strong>.<\/li>\n<\/ol>\n
Una vez desplegada la aplicaci\u00f3n, puedes hacer clic en Visitar Sitio<\/strong> desde el panel de control para acceder a la aplicaci\u00f3n. Ahora puedes probar a ejecutar la aplicaci\u00f3n en varios dispositivos con c\u00e1maras para ver c\u00f3mo funciona.<\/p>\n
Como alternativa al Alojamiento de Sitios Est\u00e1ticos, puedes desplegar tu sitio est\u00e1tico con el Alojamiento de Aplicaciones<\/a> de Kinsta, que proporciona una mayor flexibilidad de alojamiento, una gama m\u00e1s amplia de ventajas y acceso a funciones m\u00e1s robustas. Por ejemplo, escalabilidad, despliegue personalizado mediante un Dockerfile<\/a> y an\u00e1liticas completas<\/a> que abarcan datos hist\u00f3ricos y en tiempo real.<\/p>\n
Resumen<\/h2>\n
Has construido con \u00e9xito una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real utilizando React, TensorFlow.js y Kinsta. Esto te permite explorar el apasionante mundo de la visi\u00f3n por ordenador y crear experiencias interactivas directamente en el navegador del usuario.<\/p>\n
Recuerda que el modelo Coco SSD que hemos utilizado es s\u00f3lo un punto de partida. Con una mayor exploraci\u00f3n, puedes profundizar en la detecci\u00f3n de objetos personalizada utilizando TensorFlow.js, lo que te permitir\u00e1 adaptar la aplicaci\u00f3n para identificar objetos espec\u00edficos relevantes para tus necesidades.<\/p>\n
\u00a1Las posibilidades son enormes! Esta aplicaci\u00f3n te servir\u00e1 de base para crear aplicaciones m\u00e1s detalladas, como experiencias de realidad aumentada o sistemas de vigilancia inteligentes. Al desplegar tu app en la fiable plataforma de Kinsta, podr\u00e1s compartir tu creaci\u00f3n con el mundo y ser testigo de c\u00f3mo cobra vida el poder de la visi\u00f3n por ordenador.<\/p>\n
\u00bfQu\u00e9 problema te has encontrado que crees que puede resolver la detecci\u00f3n de objetos en tiempo real? \u00a1H\u00e1znoslo saber en los comentarios de abajo!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Como las c\u00e1maras han mejorado, la detecci\u00f3n de objetos en tiempo real se ha convertido en una funcionalidad cada vez m\u00e1s solicitada. Desde los coches aut\u00f3nomos …<\/p>\n","protected":false},"author":238,"featured_media":74565,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1296,1328,1321],"class_list":["post-74564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-generadores-sitios-estaticos","topic-react"],"yoast_head":"\n
C\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real con React y Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Este art\u00edculo explica c\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real utilizando React que aprovecha la webcam de un usuario y desplegar la aplicaci\u00f3n en 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:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real con React y Kinsta\" \/>\n<meta property=\"og:description\" content=\"Este art\u00edculo explica c\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real utilizando React que aprovecha la webcam de un usuario y desplegar la aplicaci\u00f3n en Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-15T07:36:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-18T07:47:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Este art\u00edculo explica c\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real utilizando React que aprovecha la webcam de un usuario y desplegar la aplicaci\u00f3n en Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/object-detection-app-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kumar Harsh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/\"},\"author\":{\"name\":\"Kumar Harsh\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\"},\"headline\":\"C\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real con React y Kinsta\",\"datePublished\":\"2024-04-15T07:36:16+00:00\",\"dateModified\":\"2024-04-18T07:47:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/\"},\"wordCount\":1861,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/object-detection-app-1.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/\",\"name\":\"C\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real con React y Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/object-detection-app-1.jpg\",\"datePublished\":\"2024-04-15T07:36:16+00:00\",\"dateModified\":\"2024-04-18T07:47:42+00:00\",\"description\":\"Este art\u00edculo explica c\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real utilizando React que aprovecha la webcam de un usuario y desplegar la aplicaci\u00f3n en Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/object-detection-app-1.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/object-detection-app-1.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinqsta.com\/es\/secciones\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real con React y Kinsta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/es\/#website\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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:\/\/kinqsta.com\/es\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\",\"name\":\"Kumar Harsh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/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:\/\/kinqsta.com\/es\/blog\/author\/kumarharsh\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real con React y Kinsta - Kinsta\u00ae","description":"Este art\u00edculo explica c\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real utilizando React que aprovecha la webcam de un usuario y desplegar la aplicaci\u00f3n en 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:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real con React y Kinsta","og_description":"Este art\u00edculo explica c\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real utilizando React que aprovecha la webcam de un usuario y desplegar la aplicaci\u00f3n en Kinsta.","og_url":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-04-15T07:36:16+00:00","article_modified_time":"2024-04-18T07:47:42+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/object-detection-app.jpg","type":"image\/jpeg"}],"author":"Kumar Harsh","twitter_card":"summary_large_image","twitter_description":"Este art\u00edculo explica c\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real utilizando React que aprovecha la webcam de un usuario y desplegar la aplicaci\u00f3n en Kinsta.","twitter_image":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/object-detection-app-1024x512.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Kumar Harsh","Tiempo de lectura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/"},"author":{"name":"Kumar Harsh","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9"},"headline":"C\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real con React y Kinsta","datePublished":"2024-04-15T07:36:16+00:00","dateModified":"2024-04-18T07:47:42+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/"},"wordCount":1861,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/object-detection-app-1.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/","url":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/","name":"C\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real con React y Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/object-detection-app-1.jpg","datePublished":"2024-04-15T07:36:16+00:00","dateModified":"2024-04-18T07:47:42+00:00","description":"Este art\u00edculo explica c\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real utilizando React que aprovecha la webcam de un usuario y desplegar la aplicaci\u00f3n en Kinsta.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#primaryimage","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/object-detection-app-1.jpg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/object-detection-app-1.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/es\/blog\/react-deteccion-de-objetos-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinqsta.com\/es\/secciones\/react\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo crear una aplicaci\u00f3n de detecci\u00f3n de objetos en tiempo real con React y Kinsta"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/es\/#website","url":"https:\/\/kinqsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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:\/\/kinqsta.com\/es\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9","name":"Kumar Harsh","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/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:\/\/kinqsta.com\/es\/blog\/author\/kumarharsh\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/74564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/users\/238"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/comments?post=74564"}],"version-history":[{"count":6,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/74564\/revisions"}],"predecessor-version":[{"id":74599,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/74564\/revisions\/74599"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74564\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74564\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74564\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74564\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74564\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74564\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74564\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74564\/translations\/es"},{"href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74564\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media\/74565"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media?parent=74564"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/tags?post=74564"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/topic?post=74564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Versi\u00f3n de Node:<\/strong>
- A continuaci\u00f3n, crea un estado en el componente
- A continuaci\u00f3n, instala las bibliotecas TensorFlow y Coco SSD ejecutando los siguientes comandos en el proyecto:\n
- TensorFlow.js<\/strong>: TensorFlow.js<\/a> es una biblioteca de JavaScript que lleva la potencia del aprendizaje autom\u00e1tico al navegador. Te permite cargar modelos preentrenados para la detecci\u00f3n de objetos y ejecutarlos directamente en el navegador, eliminando la necesidad de un complejo procesamiento en el servidor.<\/li>\n