\n
Pr\u00e9-requisitos<\/h2>\n
Vejamos um detalhamento das principais tecnologias utilizadas neste guia:<\/p>\n
- \n
- React<\/strong>: O React \u00e9 usado para construir a interface de usu\u00e1rio (UI) do aplicativo. \u00c9 excelente na renderiza\u00e7\u00e3o de conte\u00fado din\u00e2mico<\/a> e ser\u00e1 \u00fatil para apresentar o feed da webcam e os objetos detectados no navegador.<\/li>\n
- TensorFlow.js<\/strong>: O TensorFlow.js<\/a> \u00e9 uma biblioteca JavaScript que traz o poder do Aprendizado de M\u00e1quina (Machine Learning) para o navegador. Permite carregar modelos pr\u00e9-treinados para detec\u00e7\u00e3o de objetos e execut\u00e1-los diretamente no navegador, eliminando a necessidade de processamento complexo no lado do servidor.<\/li>\n
- Coco SSD<\/strong>: O aplicativo usa um modelo de detec\u00e7\u00e3o de objetos pr\u00e9-treinado chamado Coco SSD<\/a>, que \u00e9 leve e capaz de reconhecer uma grande variedade de objetos do cotidiano em tempo real. Embora o Coco SSD seja uma ferramenta avan\u00e7ada, \u00e9 importante observar que foi treinado com um conjunto geral de dados de objetos. Se voc\u00ea tiver necessidades espec\u00edficas de detec\u00e7\u00e3o, poder\u00e1 treinar um modelo personalizado usando o TensorFlow.js seguindo este guia<\/a>.<\/li>\n<\/ul>\n
Configure um novo projeto React<\/h2>\n
- \n
- Crie um novo projeto React. Para isso, execute o seguinte comando:\n
npm create vite@latest kinsta-object-detection --template react<\/code><\/pre>\nIsso criar\u00e1 para voc\u00ea a linha de base de um projeto React usando vite<\/a>.<\/li>\n
- Em seguida, instale as bibliotecas TensorFlow e Coco SSD executando os seguintes comandos no projeto:\n
npm i @tensorflow-models\/coco-ssd @tensorflow\/tfjs<\/code><\/pre>\n<\/li>\n<\/ol>\nAgora voc\u00ea est\u00e1 pronto para come\u00e7ar a desenvolver seu aplicativo.<\/p>\n
Configurando o aplicativo<\/h2>\n
Antes de escrever o c\u00f3digo para a l\u00f3gica de detec\u00e7\u00e3o de objetos, vamos entender o que \u00e9 desenvolvido neste guia. Esta \u00e9 a apar\u00eancia da interface do usu\u00e1rio do aplicativo:<\/p>\n
![\"Design](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-app-ui-1024x502.png\")
Design de interface do usu\u00e1rio (UI) do aplicativo.<\/figcaption><\/figure>\n Quando um usu\u00e1rio clica no bot\u00e3o Start Webcam<\/strong>, \u00e9 solicitado a conceder permiss\u00e3o ao aplicativo para acessar o feed da webcam. Quando a permiss\u00e3o \u00e9 concedida, o aplicativo come\u00e7a a exibir o feed da webcam e detecta objetos presentes no feed. Em seguida, renderiza uma caixa para mostrar os objetos detectados no feed em tempo real e tamb\u00e9m adiciona uma etiqueta a ela.<\/p>\n
Para come\u00e7ar, crie a interface do usu\u00e1rio para o aplicativo colando o seguinte c\u00f3digo no arquivo 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>\nEsse snippet\u00a0de c\u00f3digo especifica um cabe\u00e7alho para a p\u00e1gina e importa um componente personalizado chamado
ObjectDetection<\/code>. Esse componente cont\u00e9m a l\u00f3gica para capturar o feed da webcam e detectar objetos em tempo real.<\/p>\nPara criar esse componente, crie um novo arquivo chamado ObjectDetection.jsx<\/strong> em seu diret\u00f3rio src <\/strong>e cole o seguinte c\u00f3digo nele:<\/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>\nO c\u00f3digo acima define uma estrutura HTML<\/a> com um bot\u00e3o para iniciar e parar o feed da webcam e um elemento
<video><\/code> que ser\u00e1 usado para mostrar ao usu\u00e1rio o feed da webcam quando estiver ativo. Um cont\u00eainer de estadoisWebcamStarted<\/code> \u00e9 usado para armazenar o estado do feed da webcam. Duas fun\u00e7\u00f5es,startWebcam<\/code> estopWebcam<\/code>, s\u00e3o usadas para iniciar e parar o feed da webcam. Vamos defini-las:<\/p>\nAqui est\u00e1 o c\u00f3digo para a fun\u00e7\u00e3o
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>\nEssa fun\u00e7\u00e3o se encarrega de solicitar que o usu\u00e1rio conceda acesso \u00e0 webcam e, quando a permiss\u00e3o \u00e9 concedida, define o
<video><\/code> para mostrar o feed da webcam em tempo real para o usu\u00e1rio.<\/p>\nSe o c\u00f3digo n\u00e3o conseguir acessar o feed da webcam (possivelmente devido \u00e0 falta de webcam no dispositivo atual ou se a permiss\u00e3o for negada ao usu\u00e1rio), a fun\u00e7\u00e3o imprimir\u00e1 uma mensagem no console. Voc\u00ea pode usar um bloco de erro para exibir o motivo da falha para o usu\u00e1rio.<\/p>\n
Em seguida, substitua a fun\u00e7\u00e3o
stopWebcam<\/code> pelo c\u00f3digo a seguir:<\/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>\nEsse c\u00f3digo verifica as faixas de stream de v\u00eddeo em execu\u00e7\u00e3o que est\u00e3o sendo acessadas pelo objeto
<video><\/code> e interrompe cada uma delas. Por fim, define o estado deisWebcamStarted<\/code> parafalse<\/code>.<\/p>\nNesse ponto, tente executar o aplicativo para verificar se voc\u00ea pode acessar e visualizar o feed da webcam.<\/p>\n
Certifique-se de colar o seguinte c\u00f3digo no arquivo index.css<\/strong> para garantir que o aplicativo tenha a mesma apar\u00eancia da visualiza\u00e7\u00e3o que voc\u00ea viu anteriormente:<\/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>\nAl\u00e9m disso, remova o arquivo App.css<\/strong> para evitar bagun\u00e7ar os estilos dos componentes. Agora voc\u00ea est\u00e1 pronto para escrever a l\u00f3gica para integrar a detec\u00e7\u00e3o de objetos em tempo real ao seu aplicativo.<\/p>\n
Configure a detec\u00e7\u00e3o de objetos em tempo real<\/h2>\n
- \n
- Comece adicionando os imports do Tensorflow e do Coco SSD na parte superior de ObjectDetection.jsx<\/strong>:\n
import * as cocoSsd from '@tensorflow-models\/coco-ssd';\n\nimport '@tensorflow\/tfjs';<\/code><\/pre>\n<\/li>\n- Em seguida, crie um estado no componente
ObjectDetection<\/code> para armazenar o array de previs\u00f5es geradas pelo modelo Coco SSD:\nconst [predictions, setPredictions] = useState([]);<\/code><\/pre>\n<\/li>\n- Em seguida, crie uma fun\u00e7\u00e3o que carregue o modelo Coco SSD, colete o feed de v\u00eddeo e gere as previs\u00f5es:\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>\nEssa fun\u00e7\u00e3o usa o feed de v\u00eddeo e gera previs\u00f5es para os objetos presentes no feed. Ela fornecer\u00e1 a voc\u00ea um array de objetos previstos, cada um contendo uma etiqueta, uma porcentagem de confian\u00e7a e um conjunto de coordenadas mostrando a localiza\u00e7\u00e3o do objeto no quadro do v\u00eddeo.<\/p>\n
Voc\u00ea precisa chamar continuamente essa fun\u00e7\u00e3o para processar os quadros de v\u00eddeo \u00e0 medida que eles chegam e, em seguida, usar as previs\u00f5es armazenadas no estado
predictions<\/code> para mostrar caixas e etiquetas para cada objeto identificado no feed de v\u00eddeo ao vivo.<\/li>\n- Em seguida, use a fun\u00e7\u00e3o
setInterval<\/code> para chamar a fun\u00e7\u00e3o continuamente. Voc\u00ea tamb\u00e9m deve impedir que essa fun\u00e7\u00e3o seja chamada depois que o usu\u00e1rio interromper o feed da webcam. Para fazer isso, use a fun\u00e7\u00e3oclearInterval<\/code> do JavaScript. Adicione o seguinte cont\u00eainer de estado e o hookuseEffect<\/code> no componenteObjectDetection<\/code> para configurar a fun\u00e7\u00e3opredictObject<\/code> para ser chamada continuamente quando a webcam estiver ativada e removida quando a webcam estiver desativada:\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>\nIsso configura o aplicativo para detectar os objetos presentes diante da webcam a cada 500 milissegundos. Voc\u00ea pode alterar esse valor, dependendo da velocidade com que deseja que a detec\u00e7\u00e3o de objetos seja feita, mas lembre-se de que fazer isso com muita frequ\u00eancia pode fazer o aplicativo usar muita mem\u00f3ria do navegador.<\/li>\n
- Agora que voc\u00ea tem os dados de previs\u00e3o no cont\u00eainer de estado
prediction<\/code>, pode us\u00e1-los para exibir uma etiqueta e uma caixa ao redor do objeto no feed de v\u00eddeo em tempo real. Para fazer isso, atualize a instru\u00e7\u00e3oreturn<\/code> doObjectDetection<\/code> para retornar o seguinte:\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>\nIsso renderizar\u00e1 uma lista de previs\u00f5es logo abaixo do feed da webcam e desenhar\u00e1 uma caixa ao redor do objeto previsto usando as coordenadas do Coco SSD junto com uma etiqueta na parte superior das caixas.<\/li>\n
- Para estilizar as caixas e a etiqueta corretamente, adicione o seguinte c\u00f3digo ao arquivo 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>\nIsso encerra o desenvolvimento do aplicativo. Agora voc\u00ea pode reiniciar o servidor de desenvolvimento para testar o aplicativo. Aqui est\u00e1 a apar\u00eancia que voc\u00ea deve ter quando conclu\u00eddo:<\/p>\n
![\"Demonstra\u00e7\u00e3o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-demo.gif\")
Demonstra\u00e7\u00e3o da detec\u00e7\u00e3o de objetos em tempo real usando a webcam<\/figcaption><\/figure><\/li>\n<\/ol>\n Voc\u00ea pode encontrar o c\u00f3digo completo neste reposit\u00f3rio do GitHub<\/a>.<\/p>\n
Implante o aplicativo conclu\u00eddo na Kinsta<\/h2>\n
A etapa final \u00e9 implantar o aplicativo na Kinsta para torn\u00e1-lo dispon\u00edvel aos seus usu\u00e1rios. Para fazer isso, a Kinsta permite que voc\u00ea hospede at\u00e9 100 sites est\u00e1ticos<\/a> gratuitamente<\/strong> diretamente do seu provedor Git preferido (Bitbucket<\/a>, GitHub<\/a> ou GitLab<\/a>).<\/p>\n
Quando seu reposit\u00f3rio git estiver pronto, siga estas etapas para implantar seu aplicativo de detec\u00e7\u00e3o de objetos na Kinsta:<\/p>\n
- \n
- Fa\u00e7a login ou crie uma conta para visualizar seu painel MyKinsta<\/a>.<\/li>\n
- Autorize a Kinsta com seu provedor Git.<\/li>\n
- Clique em Sites est\u00e1ticos<\/strong> na barra lateral esquerda e, em seguida, clique em Adicionar site<\/strong>.<\/li>\n
- Selecione o reposit\u00f3rio e o branch do qual voc\u00ea deseja implantar.<\/li>\n
- Atribua um nome exclusivo ao seu site.<\/li>\n
- Adicione as configura\u00e7\u00f5es de build no seguinte formato:\n
- \n
- Comando de build:<\/strong>
yarn build<\/code> ounpm run build<\/code><\/li>\n- Vers\u00e3o do node:<\/strong>
20.2.0<\/code><\/li>\n- Diret\u00f3rio de publica\u00e7\u00e3o:<\/strong>
dist<\/code><\/li>\n<\/ul>\n<\/li>\n- Por fim, clique em Criar site<\/strong>.<\/li>\n<\/ol>\n
Depois que o aplicativo for implantado, voc\u00ea poder\u00e1 clicar em Visitar site<\/strong> no painel para acessar o aplicativo. Agora voc\u00ea pode tentar executar o aplicativo em v\u00e1rios dispositivos com c\u00e2meras para ver o desempenho dele.<\/p>\n
Como alternativa \u00e0 Hospedagem de Site Est\u00e1tico, voc\u00ea pode implantar seu site est\u00e1tico com a Hospedagem de Aplicativos<\/a> da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benef\u00edcios e acesso a recursos mais robustos. Por exemplo, escalabilidade, implanta\u00e7\u00e3o personalizada usando um Dockerfile<\/a> e an\u00e1lises completas<\/a> que englobam dados hist\u00f3ricos e em tempo real.<\/p>\n
Resumo<\/h2>\n
Voc\u00ea criou com sucesso um aplicativo de detec\u00e7\u00e3o de objetos em tempo real usando React, TensorFlow.js e a Kinsta. Isso permite explorar o empolgante mundo da vis\u00e3o computacional, criando experi\u00eancias interativas diretamente no navegador do usu\u00e1rio.<\/p>\n
Lembre-se de que o modelo Coco SSD que usamos \u00e9 apenas um ponto de partida. Explorando mais, voc\u00ea pode se aprofundar na detec\u00e7\u00e3o de objetos personalizados usando o TensorFlow.js, o que permite adaptar o aplicativo para identificar objetos espec\u00edficos relevantes para suas necessidades.<\/p>\n
As possibilidades s\u00e3o vastas! Este aplicativo serve como base para criar aplicativos mais detalhados, como experi\u00eancias de realidade aumentada ou sistemas de vigil\u00e2ncia inteligentes. Ao implantar seu aplicativo na plataforma confi\u00e1vel da Kinsta, voc\u00ea pode compartilhar sua cria\u00e7\u00e3o com o mundo e testemunhar o poder da vis\u00e3o computacional ganhando vida.<\/p>\n
Qual \u00e9 o problema que voc\u00ea encontrou e que acha que a detec\u00e7\u00e3o de objetos em tempo real pode resolver? Deixe-nos saber nos coment\u00e1rios abaixo!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
\u00c0 medida que as c\u00e2meras s\u00e3o aprimoradas, a detec\u00e7\u00e3o de objetos em tempo real se torna uma funcionalidade cada vez mais procurada. De carros aut\u00f4nomos e …<\/p>\n","protected":false},"author":238,"featured_media":67968,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[977,1009,1002],"class_list":["post-67967","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-geradores-sites-estaticos","topic-react"],"yoast_head":"\n
Como Criar um Aplicativo de Detec\u00e7\u00e3o de Objetos em Tempo Real Usando React e a Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Este artigo explica como criar um aplicativo de detec\u00e7\u00e3o de objetos em tempo real usando o React, aproveitando a webcam do usu\u00e1rio e implantando o aplicativo na 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\/pt\/blog\/react-app-deteccao-objetos\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Criar um Aplicativo de Detec\u00e7\u00e3o de Objetos em Tempo Real Usando React e a Kinsta\" \/>\n<meta property=\"og:description\" content=\"Este artigo explica como criar um aplicativo de detec\u00e7\u00e3o de objetos em tempo real usando o React, aproveitando a webcam do usu\u00e1rio e implantando o aplicativo na Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-15T07:35:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-19T11:00:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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 artigo explica como criar um aplicativo de detec\u00e7\u00e3o de objetos em tempo real usando o React, aproveitando a webcam do usu\u00e1rio e implantando o aplicativo na Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/object-detection-app-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kumar Harsh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\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:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/\"},\"author\":{\"name\":\"Kumar Harsh\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\"},\"headline\":\"Como Criar um Aplicativo de Detec\u00e7\u00e3o de Objetos em Tempo Real Usando React e a Kinsta\",\"datePublished\":\"2024-04-15T07:35:48+00:00\",\"dateModified\":\"2024-04-19T11:00:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/\"},\"wordCount\":1768,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/object-detection-app.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/\",\"name\":\"Como Criar um Aplicativo de Detec\u00e7\u00e3o de Objetos em Tempo Real Usando React e a Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/object-detection-app.jpg\",\"datePublished\":\"2024-04-15T07:35:48+00:00\",\"dateModified\":\"2024-04-19T11:00:08+00:00\",\"description\":\"Este artigo explica como criar um aplicativo de detec\u00e7\u00e3o de objetos em tempo real usando o React, aproveitando a webcam do usu\u00e1rio e implantando o aplicativo na Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/object-detection-app.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/object-detection-app.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Criar um Aplicativo de Detec\u00e7\u00e3o de Objetos em Tempo Real Usando React e a Kinsta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\",\"name\":\"Kumar Harsh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/kumarharsh\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Criar um Aplicativo de Detec\u00e7\u00e3o de Objetos em Tempo Real Usando React e a Kinsta - Kinsta\u00ae","description":"Este artigo explica como criar um aplicativo de detec\u00e7\u00e3o de objetos em tempo real usando o React, aproveitando a webcam do usu\u00e1rio e implantando o aplicativo na 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\/pt\/blog\/react-app-deteccao-objetos\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Criar um Aplicativo de Detec\u00e7\u00e3o de Objetos em Tempo Real Usando React e a Kinsta","og_description":"Este artigo explica como criar um aplicativo de detec\u00e7\u00e3o de objetos em tempo real usando o React, aproveitando a webcam do usu\u00e1rio e implantando o aplicativo na Kinsta.","og_url":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-04-15T07:35:48+00:00","article_modified_time":"2024-04-19T11:00:08+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/object-detection-app.jpg","type":"image\/jpeg"}],"author":"Kumar Harsh","twitter_card":"summary_large_image","twitter_description":"Este artigo explica como criar um aplicativo de detec\u00e7\u00e3o de objetos em tempo real usando o React, aproveitando a webcam do usu\u00e1rio e implantando o aplicativo na Kinsta.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/object-detection-app-1024x512.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Kumar Harsh","Tempo estimado de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/"},"author":{"name":"Kumar Harsh","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9"},"headline":"Como Criar um Aplicativo de Detec\u00e7\u00e3o de Objetos em Tempo Real Usando React e a Kinsta","datePublished":"2024-04-15T07:35:48+00:00","dateModified":"2024-04-19T11:00:08+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/"},"wordCount":1768,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/object-detection-app.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/","url":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/","name":"Como Criar um Aplicativo de Detec\u00e7\u00e3o de Objetos em Tempo Real Usando React e a Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/object-detection-app.jpg","datePublished":"2024-04-15T07:35:48+00:00","dateModified":"2024-04-19T11:00:08+00:00","description":"Este artigo explica como criar um aplicativo de detec\u00e7\u00e3o de objetos em tempo real usando o React, aproveitando a webcam do usu\u00e1rio e implantando o aplicativo na Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/object-detection-app.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/object-detection-app.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/react-app-deteccao-objetos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/pt\/topicos\/react\/"},{"@type":"ListItem","position":3,"name":"Como Criar um Aplicativo de Detec\u00e7\u00e3o de Objetos em Tempo Real Usando React e a Kinsta"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9","name":"Kumar Harsh","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/kumarharsh\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67967","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/238"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=67967"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67967\/revisions"}],"predecessor-version":[{"id":68005,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67967\/revisions\/68005"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67967\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67967\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67967\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67967\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67967\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67967\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67967\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67967\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67967\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/67968"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=67967"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=67967"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=67967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Vers\u00e3o do node:<\/strong>
- Em seguida, crie um estado no componente
- Em seguida, instale as bibliotecas TensorFlow e Coco SSD executando os seguintes comandos no projeto:\n
- TensorFlow.js<\/strong>: O TensorFlow.js<\/a> \u00e9 uma biblioteca JavaScript que traz o poder do Aprendizado de M\u00e1quina (Machine Learning) para o navegador. Permite carregar modelos pr\u00e9-treinados para detec\u00e7\u00e3o de objetos e execut\u00e1-los diretamente no navegador, eliminando a necessidade de processamento complexo no lado do servidor.<\/li>\n