\n
Pr\u00e9-requis<\/h2>\n
Voici un aper\u00e7u des technologies cl\u00e9s utilis\u00e9es dans ce guide :<\/p>\n
- \n
- React<\/strong>: React est utilis\u00e9 pour construire l’interface utilisateur de l’application. React excelle dans le rendu de contenu dynamique<\/a> et sera utile pour pr\u00e9senter le flux de la webcam et les objets d\u00e9tect\u00e9s dans le navigateur.<\/li>\n
- TensorFlow.js<\/strong> : TensorFlow.js<\/a> est une biblioth\u00e8que JavaScript qui apporte la puissance de l’apprentissage automatique au navigateur. Elle vous permet de charger des mod\u00e8les pr\u00e9-entra\u00een\u00e9s pour la d\u00e9tection d’objets et de les ex\u00e9cuter directement dans le navigateur, \u00e9liminant ainsi le besoin d’un traitement complexe c\u00f4t\u00e9 serveur.<\/li>\n
- Coco SSD <\/strong>: L’application utilise un mod\u00e8le de d\u00e9tection d’objets pr\u00e9-entra\u00een\u00e9 appel\u00e9 Coco SSD<\/a>, un mod\u00e8le l\u00e9ger capable de reconna\u00eetre un large \u00e9ventail d’objets quotidiens en temps r\u00e9el. Bien que Coco SSD soit un outil puissant, il est important de noter qu’il a \u00e9t\u00e9 form\u00e9 sur un ensemble de donn\u00e9es g\u00e9n\u00e9rales d’objets. Si vous avez des besoins de d\u00e9tection sp\u00e9cifiques, vous pouvez vous entra\u00eener sur un mod\u00e8le personnalis\u00e9 \u00e0 l’aide de TensorFlow.js en suivant ce guide<\/a>.<\/li>\n<\/ul>\n
Cr\u00e9er un nouveau projet React<\/h2>\n
- \n
- Cr\u00e9ez un nouveau projet React. Pour cela, ex\u00e9cutez la commande suivante :\n
npm create vite@latest kinsta-object-detection --template react<\/code><\/pre>\nCela vous permettra d’\u00e9chafauder un projet React de base en utilisant vite<\/a>.<\/li>\n
- Ensuite, installez les biblioth\u00e8ques TensorFlow et Coco SSD en ex\u00e9cutant les commandes suivantes dans le projet :\n
npm i @tensorflow-models\/coco-ssd @tensorflow\/tfjs<\/code><\/pre>\n<\/li>\n<\/ol>\nVous \u00eates maintenant pr\u00eat \u00e0 d\u00e9velopper votre application.<\/p>\n
Configuration de l’application<\/h2>\n
Avant d’\u00e9crire le code de la logique de d\u00e9tection des objets, il convient de comprendre ce qui est d\u00e9velopp\u00e9 dans ce guide. Voici \u00e0 quoi ressemblerait l’interface utilisateur de l’application :<\/p>\n
![\"Conception](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-app-ui-1024x502.png\")
Conception de l’interface utilisateur de l’application.<\/figcaption><\/figure>\n Lorsqu’un utilisateur clique sur le bouton Start Webcam<\/strong>, il est invit\u00e9 \u00e0 autoriser l’application \u00e0 acc\u00e9der au flux de la webcam. Une fois l’autorisation accord\u00e9e, l’application commence \u00e0 afficher le flux de la webcam et d\u00e9tecte les objets pr\u00e9sents dans le flux. Elle affiche alors une bo\u00eete pour montrer les objets d\u00e9tect\u00e9s sur le flux en direct et y ajoute une \u00e9tiquette.<\/p>\n
Pour commencer, cr\u00e9ez l’interface utilisateur de l’application en collant le code suivant dans le fichier 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>\nCet extrait de code sp\u00e9cifie un en-t\u00eate pour la page et importe un composant personnalis\u00e9 nomm\u00e9
ObjectDetection<\/code>. Ce composant contient la logique permettant de capturer le flux de la webcam et de d\u00e9tecter les objets en temps r\u00e9el.<\/p>\nPour cr\u00e9er ce composant, cr\u00e9ez un nouveau fichier nomm\u00e9 ObjectDetection.jsx<\/strong> dans votre r\u00e9pertoire src <\/strong>et collez-y le code suivant :<\/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>\nLe code ci-dessus d\u00e9finit une structure HTML<\/a> avec un bouton pour d\u00e9marrer et arr\u00eater le flux de la webcam et un \u00e9l\u00e9ment
<video><\/code> qui sera utilis\u00e9 pour montrer \u00e0 l’utilisateur le flux de sa webcam une fois qu’il est actif. Un conteneur d’\u00e9tatisWebcamStarted<\/code> est utilis\u00e9 pour stocker l’\u00e9tat du flux de la webcam. Deux fonctions,startWebcam<\/code> etstopWebcam<\/code>, sont utilis\u00e9es pour d\u00e9marrer et arr\u00eater le flux de la webcam. D\u00e9finissons-les :<\/p>\nVoici le code de la fonction
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>\nCette fonction se charge de demander \u00e0 l’utilisateur d’autoriser l’acc\u00e8s \u00e0 la webcam et, une fois l’autorisation accord\u00e9e, elle configure le site
<video><\/code> pour qu’il affiche le flux de la webcam en direct \u00e0 l’utilisateur.<\/p>\nSi le code ne parvient pas \u00e0 acc\u00e9der au flux de la webcam (peut-\u00eatre parce qu’il n’y a pas de webcam sur l’appareil actuel ou parce que l’utilisateur n’a pas l’autorisation), la fonction imprime un message sur la console. Vous pouvez utiliser un bloc d’erreur pour afficher la raison de l’\u00e9chec \u00e0 l’utilisateur.<\/p>\n
Remplacez ensuite la fonction
stopWebcam<\/code> par le code suivant :<\/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>\nCe code v\u00e9rifie les pistes de flux vid\u00e9o en cours d’ex\u00e9cution auxquelles l’objet
<video><\/code> acc\u00e8de et arr\u00eate chacune d’entre elles. Enfin, il d\u00e9finit l’\u00e9tat deisWebcamStarted<\/code> enfalse<\/code>.<\/p>\n\u00c0 ce stade, essayez d’ex\u00e9cuter l’application pour v\u00e9rifier si vous pouvez acc\u00e9der au flux de la webcam et le visualiser.<\/p>\n
Veillez \u00e0 coller le code suivant dans le fichier index.css<\/strong> pour vous assurer que l’application a la m\u00eame apparence que l’aper\u00e7u que vous avez vu plus t\u00f4t :<\/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>\nSupprimez \u00e9galement le fichier App.css<\/strong> pour \u00e9viter de perturber les styles des composants. Vous \u00eates maintenant pr\u00eat \u00e0 \u00e9crire la logique d’int\u00e9gration de la d\u00e9tection d’objets en temps r\u00e9el dans votre application.<\/p>\n
Mise en place de la d\u00e9tection d’objets en temps r\u00e9el<\/h2>\n
- \n
- Commencez par ajouter les importations pour Tensorflow et Coco SSD en haut de ObjectDetection.jsx<\/strong>:\n
import * as cocoSsd from '@tensorflow-models\/coco-ssd';\n\nimport '@tensorflow\/tfjs';<\/code><\/pre>\n<\/li>\n- Ensuite, cr\u00e9ez un \u00e9tat dans le composant
ObjectDetection<\/code> pour stocker le tableau des pr\u00e9dictions g\u00e9n\u00e9r\u00e9es par le mod\u00e8le Coco SSD :\nconst [predictions, setPredictions] = useState([]);<\/code><\/pre>\n<\/li>\n- Cr\u00e9ez ensuite une fonction qui charge le mod\u00e8le Coco SSD, collecte le flux vid\u00e9o et g\u00e9n\u00e8re les pr\u00e9dictions :\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>\nCette fonction utilise le flux vid\u00e9o et g\u00e9n\u00e8re des pr\u00e9dictions pour les objets pr\u00e9sents dans le flux. Elle vous fournira un tableau d’objets pr\u00e9dits, chacun contenant une \u00e9tiquette, un pourcentage de confiance et un ensemble de coordonn\u00e9es indiquant l’emplacement de l’objet dans l’image vid\u00e9o.<\/p>\n
Vous devez appeler cette fonction en permanence pour traiter les images vid\u00e9o au fur et \u00e0 mesure qu’elles arrivent, puis utiliser les pr\u00e9dictions stock\u00e9es dans l’\u00e9tat
predictions<\/code> pour afficher les cases et les \u00e9tiquettes de chaque objet identifi\u00e9 sur le flux vid\u00e9o en direct.<\/li>\n- Ensuite, utilisez la fonction
setInterval<\/code> pour appeler la fonction en continu. Vous devez \u00e9galement emp\u00eacher cette fonction d’\u00eatre appel\u00e9e apr\u00e8s que l’utilisateur a arr\u00eat\u00e9 le flux de la webcam.clearInterval<\/code> Ajoutez le conteneur d’\u00e9tat suivant et le crochetuseEffect<\/code> dans le composantObjectDetection<\/code> pour configurer la fonctionpredictObject<\/code> afin qu’elle soit appel\u00e9e en continu lorsque la webcam est activ\u00e9e et qu’elle soit supprim\u00e9e lorsque la webcam est d\u00e9sactiv\u00e9e :\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>\nCela permet \u00e0 l’application de d\u00e9tecter les objets pr\u00e9sents devant la webcam toutes les 500 millisecondes. Vous pouvez envisager de modifier cette valeur en fonction de la vitesse \u00e0 laquelle vous souhaitez que la d\u00e9tection des objets soit effectu\u00e9e, tout en gardant \u00e0 l’esprit que si vous le faites trop souvent, votre application risque d’utiliser beaucoup de m\u00e9moire dans le navigateur.<\/li>\n
- Maintenant que vous disposez des donn\u00e9es de pr\u00e9diction dans le conteneur d’\u00e9tat
prediction<\/code>, vous pouvez les utiliser pour afficher une \u00e9tiquette et un cadre autour de l’objet dans le flux vid\u00e9o en direct. Pour cela, mettez \u00e0 jour l’instructionreturn<\/code> de l’instructionObjectDetection<\/code> pour qu’elle renvoie ce qui suit :\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>\nCela rendra une liste de pr\u00e9dictions juste en dessous du flux de la webcam et dessinera une bo\u00eete autour de l’objet pr\u00e9dit en utilisant les coordonn\u00e9es de Coco SSD ainsi qu’une \u00e9tiquette en haut des bo\u00eetes.<\/li>\n
- Pour styliser correctement les bo\u00eetes et l’\u00e9tiquette, ajoutez le code suivant au fichier 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>\nCeci termine le d\u00e9veloppement de l’application. Vous pouvez maintenant red\u00e9marrer le serveur de d\u00e9veloppement pour tester l’application. Voici \u00e0 quoi elle devrait ressembler une fois termin\u00e9e :<\/p>\n
![\"D\u00e9monstration](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/object-detection-demo.gif\")
D\u00e9monstration de la d\u00e9tection d’objets en temps r\u00e9el \u00e0 l’aide d’une webcam<\/figcaption><\/figure><\/li>\n<\/ol>\n Vous pouvez trouver le code complet dans ce d\u00e9p\u00f4t GitHub<\/a>.<\/p>\n
D\u00e9ployer l’application termin\u00e9e sur Kinsta<\/h2>\n
La derni\u00e8re \u00e9tape consiste \u00e0 d\u00e9ployer l’application sur Kinsta pour la mettre \u00e0 la disposition de vos utilisateurs. Pour ce faire, Kinsta vous permet d’h\u00e9berger gratuitement<\/strong> jusqu’\u00e0 100 sites web statiques<\/a> directement depuis votre fournisseur Git pr\u00e9f\u00e9r\u00e9 (Bitbucket<\/a>, GitHub<\/a> ou GitLab<\/a>).<\/p>\n
Une fois que votre d\u00e9p\u00f4t git est pr\u00eat, suivez les \u00e9tapes suivantes pour d\u00e9ployer votre application de d\u00e9tection d’objets sur Kinsta :<\/p>\n
- \n
- Connectez-vous ou cr\u00e9ez un compte pour afficher votre tableau de bord MyKinsta<\/a>.<\/li>\n
- Autorisez Kinsta avec votre fournisseur Git.<\/li>\n
- Cliquez sur Sites statiques<\/strong> dans la colonne lat\u00e9rale de gauche, puis sur Ajouter un site<\/strong>.<\/li>\n
- S\u00e9lectionnez le d\u00e9p\u00f4t et la branche \u00e0 partir desquels vous souhaitez effectuer le d\u00e9ploiement.<\/li>\n
- Attribuez un nom unique \u00e0 votre site.<\/li>\n
- Ajoutez les param\u00e8tres de construction dans le format suivant :\n
- \n
- Commande de construction :<\/strong>
yarn build<\/code> ounpm run build<\/code><\/li>\n- Version Node :<\/strong>
20.2.0<\/code><\/li>\n- R\u00e9pertoire de publication :<\/strong>
dist<\/code><\/li>\n<\/ul>\n<\/li>\n- Enfin, cliquez sur Cr\u00e9er un site<\/strong>.<\/li>\n<\/ol>\n
Une fois l’application d\u00e9ploy\u00e9e, vous pouvez cliquer sur Visiter le site<\/strong> dans le tableau de bord pour acc\u00e9der \u00e0 l’application. Vous pouvez maintenant essayer d’ex\u00e9cuter l’application sur diff\u00e9rents appareils \u00e9quip\u00e9s de cam\u00e9ras pour voir comment elle fonctionne.<\/p>\n
Comme alternative \u00e0 l’h\u00e9bergement de site statique, vous pouvez d\u00e9ployer votre site statique avec l’h\u00e9bergement d’application<\/a> de Kinsta, qui offre une plus grande flexibilit\u00e9 d’h\u00e9bergement, une plus large gamme d’avantages et l’acc\u00e8s \u00e0 des fonctionnalit\u00e9s plus robustes. Par exemple, l’\u00e9volutivit\u00e9, le d\u00e9ploiement personnalis\u00e9 \u00e0 l’aide d’un fichier Docker<\/a> et des analyses compl\u00e8tes<\/a> englobant des donn\u00e9es en temps r\u00e9el et historiques.<\/p>\n
R\u00e9sum\u00e9<\/h2>\n
Vous avez r\u00e9ussi \u00e0 construire une application de d\u00e9tection d’objets en temps r\u00e9el \u00e0 l’aide de React, TensorFlow.js et Kinsta. Cela vous permet d’explorer le monde passionnant de la vision par ordinateur et de cr\u00e9er des exp\u00e9riences interactives directement dans le navigateur de l’utilisateur.<\/p>\n
N’oubliez pas que le mod\u00e8le Coco SSD que nous avons utilis\u00e9 n’est qu’un point de d\u00e9part. En explorant davantage, vous pouvez approfondir la d\u00e9tection d’objets personnalis\u00e9s \u00e0 l’aide de TensorFlow.js, ce qui vous permet d’adapter l’application \u00e0 l’identification d’objets sp\u00e9cifiques r\u00e9pondant \u00e0 vos besoins.<\/p>\n
Les possibilit\u00e9s sont vastes ! Cette application sert de base \u00e0 la cr\u00e9ation d’applications plus d\u00e9taill\u00e9es, comme des exp\u00e9riences de r\u00e9alit\u00e9 augment\u00e9e ou des syst\u00e8mes de surveillance intelligents. En d\u00e9ployant votre application sur la plateforme fiable de Kinsta, vous pouvez partager votre cr\u00e9ation avec le monde entier et voir la puissance de la vision par ordinateur prendre vie.<\/p>\n
Quel est le probl\u00e8me que vous avez rencontr\u00e9 et que vous pensez que la d\u00e9tection d’objets en temps r\u00e9el peut r\u00e9soudre ? Faites-le nous savoir dans les commentaires ci-dessous !<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Depuis l’am\u00e9lioration des cam\u00e9ras, la d\u00e9tection d’objets en temps r\u00e9el est devenue une fonctionnalit\u00e9 de plus en plus recherch\u00e9e. Des voitures autonomes aux syst\u00e8mes de surveillance …<\/p>\n","protected":false},"author":238,"featured_media":76757,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[979,1011,1004],"class_list":["post-76756","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-generateurs-sites-statiques","topic-react"],"yoast_head":"\n
Comment construire une application de d\u00e9tection d'objets en temps r\u00e9el en utilisant React et Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Cet article explique comment construire une application de d\u00e9tection d'objets en temps r\u00e9el \u00e0 l'aide de React qui exploite la webcam d'un utilisateur et d\u00e9ployer l'application sur 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\/fr\/blog\/appli-detection-objet-react\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment construire une application de d\u00e9tection d'objets en temps r\u00e9el en utilisant React et Kinsta\" \/>\n<meta property=\"og:description\" content=\"Cet article explique comment construire une application de d\u00e9tection d'objets en temps r\u00e9el \u00e0 l'aide de React qui exploite la webcam d'un utilisateur et d\u00e9ployer l'application sur Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-15T07:34:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-16T09:00:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/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=\"Cet article explique comment construire une application de d\u00e9tection d'objets en temps r\u00e9el \u00e0 l'aide de React qui exploite la webcam d'un utilisateur et d\u00e9ployer l'application sur Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/object-detection-app-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kumar Harsh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/\"},\"author\":{\"name\":\"Kumar Harsh\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\"},\"headline\":\"Comment construire une application de d\u00e9tection d’objets en temps r\u00e9el en utilisant React et Kinsta\",\"datePublished\":\"2024-04-15T07:34:43+00:00\",\"dateModified\":\"2024-04-16T09:00:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/\"},\"wordCount\":1986,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/object-detection-app.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/\",\"name\":\"Comment construire une application de d\u00e9tection d'objets en temps r\u00e9el en utilisant React et Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/object-detection-app.jpg\",\"datePublished\":\"2024-04-15T07:34:43+00:00\",\"dateModified\":\"2024-04-16T09:00:32+00:00\",\"description\":\"Cet article explique comment construire une application de d\u00e9tection d'objets en temps r\u00e9el \u00e0 l'aide de React qui exploite la webcam d'un utilisateur et d\u00e9ployer l'application sur Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/object-detection-app.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/object-detection-app.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment construire une application de d\u00e9tection d’objets en temps r\u00e9el en utilisant React et Kinsta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"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\/fr\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\",\"name\":\"Kumar Harsh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/kumarharsh\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment construire une application de d\u00e9tection d'objets en temps r\u00e9el en utilisant React et Kinsta - Kinsta\u00ae","description":"Cet article explique comment construire une application de d\u00e9tection d'objets en temps r\u00e9el \u00e0 l'aide de React qui exploite la webcam d'un utilisateur et d\u00e9ployer l'application sur 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\/fr\/blog\/appli-detection-objet-react\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment construire une application de d\u00e9tection d'objets en temps r\u00e9el en utilisant React et Kinsta","og_description":"Cet article explique comment construire une application de d\u00e9tection d'objets en temps r\u00e9el \u00e0 l'aide de React qui exploite la webcam d'un utilisateur et d\u00e9ployer l'application sur Kinsta.","og_url":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-04-15T07:34:43+00:00","article_modified_time":"2024-04-16T09:00:32+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/object-detection-app.jpg","type":"image\/jpeg"}],"author":"Kumar Harsh","twitter_card":"summary_large_image","twitter_description":"Cet article explique comment construire une application de d\u00e9tection d'objets en temps r\u00e9el \u00e0 l'aide de React qui exploite la webcam d'un utilisateur et d\u00e9ployer l'application sur Kinsta.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/object-detection-app-1024x512.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Kumar Harsh","Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/"},"author":{"name":"Kumar Harsh","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9"},"headline":"Comment construire une application de d\u00e9tection d’objets en temps r\u00e9el en utilisant React et Kinsta","datePublished":"2024-04-15T07:34:43+00:00","dateModified":"2024-04-16T09:00:32+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/"},"wordCount":1986,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/object-detection-app.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/","url":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/","name":"Comment construire une application de d\u00e9tection d'objets en temps r\u00e9el en utilisant React et Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/object-detection-app.jpg","datePublished":"2024-04-15T07:34:43+00:00","dateModified":"2024-04-16T09:00:32+00:00","description":"Cet article explique comment construire une application de d\u00e9tection d'objets en temps r\u00e9el \u00e0 l'aide de React qui exploite la webcam d'un utilisateur et d\u00e9ployer l'application sur Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/object-detection-app.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/object-detection-app.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/appli-detection-objet-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/fr\/sujets\/react\/"},{"@type":"ListItem","position":3,"name":"Comment construire une application de d\u00e9tection d’objets en temps r\u00e9el en utilisant React et Kinsta"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","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\/fr\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9","name":"Kumar Harsh","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/kumarharsh\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/238"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=76756"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76756\/revisions"}],"predecessor-version":[{"id":76767,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76756\/revisions\/76767"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76756\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76756\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76756\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76756\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76756\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76756\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76756\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76756\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76756\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/76757"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=76756"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=76756"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=76756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Version Node :<\/strong>
- Ensuite, cr\u00e9ez un \u00e9tat dans le composant
- Ensuite, installez les biblioth\u00e8ques TensorFlow et Coco SSD en ex\u00e9cutant les commandes suivantes dans le projet :\n
- TensorFlow.js<\/strong> : TensorFlow.js<\/a> est une biblioth\u00e8que JavaScript qui apporte la puissance de l’apprentissage automatique au navigateur. Elle vous permet de charger des mod\u00e8les pr\u00e9-entra\u00een\u00e9s pour la d\u00e9tection d’objets et de les ex\u00e9cuter directement dans le navigateur, \u00e9liminant ainsi le besoin d’un traitement complexe c\u00f4t\u00e9 serveur.<\/li>\n