- Kørsel i browseren med React og TensorFlow.js ved hjælp af COCO-SSD til live detektion uden en backend.
- YOLOv3/YOLOv8 til webcam og video, med sporing af flere objekter ved hjælp af ByteTrack eller BoTSort.
- Nøgledata og -målinger: PASCAL VOC, MS COCO, mAP og IoU samt træningsflow pr. overførsel.
- Implementering som et statisk sted eller i kanten (ESP32Cam/Jetson) og muligheder uden kode for at accelerere produktionen.
Objektdetektion i realtid fra et webcam har udviklet sig fra et laboratorieeksperiment til en hverdagsfunktion takket være computervisionens og deep learning's modenhed. I dag er det muligt at bygge en fungerende prototype, der analyser livevideoen uden at være afhængig af en server, og endda implementere det som et statisk websted. Fra browsere med TensorFlow.js til edge-enheder som ESP32Cam eller Jetson-platforme er udvalget af muligheder enormt.
At arbejde med webcam giver øjeblikkelighed og reducerer friktion: du kan teste dit udstyr, indsamle data og lave demonstrationer uden hardware ekstra, for eksempel bruge din mobil som webcamMed TensorFlow.js er det muligt at køre en detektor i browseren, og med søgemaskiner som YOLO i Python du kan klemme GPU'en for at behandl video med høj hastighedDenne alsidighed tilføjer værdi til prototyper, POC'er og lette implementeringer.
Hvad mener vi med objektdetektion, og hvorfor gør vi det fra webcammet?

Objektdetektion identificerer og lokaliserer elementer inden for hver frame af et billede eller en video og tilføjer afgrænsningsbokse og klassemærker med et konfidensniveau. I modsætning til klassificering, som mærker hele billedet, skal vi her lokalisere positionen. Modeller som f.eks. YOLO, SSD eller Hurtigere/Masker R-CNN har fremmet denne opgave indtil El tiempo virkelige i så forskellige sammenhænge som sikkerhed, detailhandel eller selvkørende kørsel.
At arbejde med et webcam giver øjeblikkelighed og reducerer friktion: du kan teste på din computer, indsamle data og demonstrere uden yderligere hardware. Med TensorFlow.js kan du køre en detektor i browseren, og med motorer som YOLO i Python kan du presse GPU'en til behandl video med høj hastighedDenne alsidighed tilføjer værdi til prototyper, POC'er og lette implementeringer.
Browserdetektion med React og TensorFlow.js (COCO-SSD)
En nem måde at komme i gang på er at oprette et SPA med React, der tager webcam-streamen, kører en præ-trænet model i selve browseren og tegner resultaterne. COCO-SSD-modellen genkender snesevis af almindelige klasser og er relativt let, hvilket gør den perfekt til en agil demo med live-detektion.
Indledende projektopsætning med Lives og afhængigheder. Opret React-skelettet og tilføj TensorFlow.js sammen med COCO-SSD-modelpakken:
npm create vite@latest kinsta-object-detection --template react
cd kinsta-object-detection
npm i @tensorflow-models/coco-ssd @tensorflow/tfjs
I applikationen skal du definere en komponent, der administrerer kameratilladelserne, støvle og stop streamen, og mal videoen, og hvis du har brug for at gemme skærmbilleder, er der programmer til at tage billeder fra pc'enDet er praktisk at administrere tilstanden med React og gemme en reference til elementet at tildele strømmen af Medieenheder.getBrugerMedia.
Grundlæggende brugerflade og flow. I hovedkomponenten kan du sammensætte en header og en ObjectDetection-komponent. Denne komponent vil indeholde: en start/stop-knap til webcam; videoelementet; og en container, hvor du derefter tegner billeder og etiketter. Når den startes, vil den bede om tilladelse og tildele streamen til 'videoRef.current.srcObject'; når den stoppes, vil den gennemgå hvert spor i streamen for at stoppe spor og frigive ressourcer.
Detektionslogik. Importer modellen og TensorFlow.js, og forbered en tilstand til at gemme forudsigelserne. Indlæs COCO-SSD med 'cocoSsd.load()' og kald 'model.detect(videoRef.current)Resultatet er et array med klasse-, score- og bbox-koordinater. Disse data bruges til at overlejre et rektangel og en label for hvert objekt, der identificeres i livebilledet.
Inferensfrekvens. For at aktivere detektion periodisk kan du bruge 'setInterval', når webcammet er aktiveret, og 'clearInterval', når det stopper. Et typisk interval er 500 ms, selvom du kan variere det. Højere frekvens betyder bedre flydende hastighed, men højere browserbrug; med beskeden hardware forhindrer sænkning af frekvensen hukommelses- og CPU-stigninger.
Stilarter. Tilføj regler CSS at placere etiketter og markører på absolutte lag over videoen. En etiket med en semitransparent baggrund og en stiplet kant gør realtidsdetektionen nemmere at læse. Husk at holde stilen lys for ikke at forringe gengivelsesydelsen.
Statisk implementering. Når din app er klar, kan du bygge og udgive dit websted som statisk. Kinsta giver dig mulighed for at hoste op til 100 statiske websteder gratis fra GitHub, GitLab eller Bitbucket. I dashboardet skal du autorisere Git-udbyderen, vælge repo og branch, tildele et navn og konfigurere build'et ('npm run build' eller 'yarn build', Node '20.2.0', publiceringsmappe 'dist'). Efter oprettelsen af webstedet vil 'Besøg websted' føre dig til URL'en. Med den statiske tilgang vil din statiske webstedsdetektor COCO-SSD og TensorFlow.js kører i brugerens browser uden en backend.
Hvis du foretrækker mere kontrol, tilføjer Kinstas Application Hosting skalering, brugerdefinerede Dockerfile-implementeringer og analyser i realtid og historik. Og hvis du arbejder med WordPress, inkluderer deres administrerede hosting ubegrænsede migreringer, support døgnet rundt, integreret Cloudflare og cloud-infrastruktur. Google Cloud- og global dækning i snesevis af datacentre; det er et stabilt økosystem for projekter, der vil blandes web- og computervision.
Modeller og familier: fra R-CNN til YOLOv8 via SSD
Udviklingen af detektion er gået fra totrins pipelines til single-pass løsninger. R-CNN og varianter (Fast, Faster og Mask R-CNN) er afhængige af regionforslag til at detektere og derefter klassificere, hvor Mask R-CNN også udvides til pixelvis segmentering. SSD og YOLO forudsiger derimod direkte frames og klasser i en enkelt inferens, hvilket gør dem ideelle til realtid.
YOLO giver et holistisk overblik over hele billedet til hver vurdering, indfanger kontekst og reducerer falske positiver i komplekse scener. Versioner som YOLOv3 og YOLOv4 markerede et spring i ydeevne; senere forfinede YOLOv5 og YOLOv8 yderligere hastighed og nøjagtighed. Dens 'Du kigger kun én gang'-filosofi passer til webkameraer og streaming ved at kræve lav latenstid og høje billedhastigheder.
Til sporing af flere objekter kombineres detektorer med trackere. Med YOLOv8 er det almindeligt at integrere ByteTrack, kendt for sin balance mellem nøjagtighed og robusthed, eller alternativer som BoTSort. I Python muliggør lancering af parallelle tråde flere samtidige streams, hvor hver tråd administrerer sin egen detektions- og sporingsinstans for overvågningskameraer eller ... analyse af flere kilder parallelt.
Hvis du arbejder i VS Code, er oplevelsen ligetil: indlæs modellen (f.eks. en mellemstor YOLOv8), opsæt backend'en (CPU/GPU), og kør inferenser på forudindspillet video eller direkte fra webcam'et. Skift fra kilde til liveoptagelse giver dig mulighed for at teste adfærd mod okklusioner, lysændringer og kamerabevægelser, som er nøglen til ydeevne i den virkelige verden. dynamiske scenarier.
Data, annotering og metrikker: fundamentet for ydeevne
Uden gode data er der ingen pålidelig detektion. PASCAL VOC-, MS COCO- og ImageNet-sættene har været fundamentale for træning og evaluering af detektorer. Hvert billede er annoteret med klasser og bokse; diversitet (baggrunde, størrelser, lysforhold) er afgørende for, at modellen kan generalisere. Når vi ikke har tilstrækkelige data, er overførsel af læring på prætrænede modeller den mest effektive måde. omkostningseffektiv.
I træning og evaluering er de mest almindelige målinger mAP (gennemsnitlig præcision) og IoU (intersection over union). mAP måler gennemsnitlig præcision ved forskellige IoU-tærskler; i referencebenchmarks overstiger nogle modeller 60-70 % mAP i COCO. Derudover er det vigtigt at måle latenstid, gennemløb og stabilitet i forbindelse med produktion, især hvis målet er streaming i realtid.
Semantisk og instanssegmentering går et skridt videre ved at mærke pixels. I opgaver, hvor den nøjagtige form er vigtig (f.eks. medicinsk eller industriel), kan Mask R-CNN præcist afgrænse konturer. Dette er ikke altid nødvendigt for webkameraer, men det tilføjer værdi, når objektets område, og ikke kun dets tilstedeværelse, er relevant. beslutningstagning.
Den typiske pipeline starter med forbehandling (størrelsesændring, normalisering, forstørrelse), går gennem det konvolutionelle netværk for at udtrække funktioner og forudsiger endelig bokse og klasser. I live-applikationer gør optimering af denne kæde og reduktion af redundant beregning hele forskellen for at opretholde en problemfri oplevelse på enheder med beskedne ressourcer.
YOLOv3 i aktion: webcam, video og personlig træning
Hvis du foretrækker Python og PyTorch, er YOLOv3 stadig et solidt valg til webcam og video. Der findes repositories, der giver dig mulighed for at køre detektion på livestreams og filer, med instruktioner til installation af afhængigheder, download af forudtrænede vægte og opsætning af et reproducerbart miljø. Når du bruger en GPU, kan du bruge YOLOv3 til at køre detektion på livestreams og filer. NVIDIA, hastighedsgevinsterne i inferensresultatet meget bemærkelsesværdig.
Miljø og afhængigheder. Du kan oprette et specifikt Anaconda-miljø (f.eks. 'objdetect' med Python 3.6) og installere pakkerne, der er angivet i projektets 'requirements.txt'. Dette undgår versionskonflikter og sikrer, at PyTorch og resten af bibliotekerne er kompatible med dit projekt. hardware og system.
Forudtrænede vægte. Download de officielle vægte for at spare omkostningerne ved træning fra bunden. Placer dem i den relevante mappe (f.eks. 'weights/'), så script detekter og indlæs checkpointet. På denne måde kan du starte webcam-detektion med det samme uden før-træningsfasen.
Udførelse via webcam eller video. Repoet inkluderer normalt kommandoer eller flag for at vælge kilden: live webcam eller en videofil. Ændring af parameteren eller kameraindekset starter detektionen på den ønskede kilde. Med GPU vil du se, hvordan antallet af FPS stiger, og latensen falder, samtidig med at du bevarer billeder og etiketter for stabil form.
Træn dine klasser. Hvis du vil registrere dine egne kategorier, skal du navngive billeder i VOC-format og generere netværkskonfigurationen ('.cfg'-fil) til overførsel af læring. Den typiske datastruktur er 'data/custom/images' for billeder og 'data/custom/labels' for annotationer, med én '.txt' for hver '.jpg'. Definer 'data/custom/classes.names' med ét navn pr. linje og angiv stier i 'train.txt' og 'valid.txt'. Derfra vil træningsscriptet justere modelvægtene til dine behov. specifikt domæne.
Objektdetektion med YOLOv8 og sporing af flere objekter
YOLOv8-udgivelsen af Ultralytics muliggør en moderne arbejdsgang med integreret detektion og sporing. Opsætning af en mellemstor model giver normalt en god balance; hvis du har kompatibel hardware, kan selv større modeller køre i realtid. Den typiske vejledning viser, hvordan man starter inferens, visualiserer resultater og skift fra video til webcam uden komplikationer.
Almindelige trackere. ByteTrack er en stærk kandidat på grund af sin nøjagtighed og pålidelighed, selvom BoTSort er et andet etableret alternativ. Den unikke objektidentifikator hjælper med sporing på trods af okklusioner eller ændringer i bane; i livedemonstrationer er det nemt at verificere systemets robusthed, når motivet krydser stier. andre elementer eller går ind i og ud af rammen.
Multistream. Når opgaven kræver overvågning af flere kameraer, giver Python-threaded-tilgangen dig mulighed for at starte én instans pr. stream. Hver tråd starter sin detektor og tracker, hvilket maksimerer kerneudnyttelsen og opretholder pipeline-uafhængighed. Dette er et praktisk mønster for kontrolcentre, detailhandel eller byanalyse.
Edge AI: ESP32Cam, Jetson og platforme uden kode
Ikke alt er en browser eller en server. I den anden ende af verden er der indlejrede enheder, hvor behandlingen udføres på den samme computer, der indfanger dataene. Der findes mange eksempler på ESP32Cam, selvom mange artikler faktisk delegerer beregningen til en pc og bruger modulet som et simpelt kamera. Hvis det er nødvendigt at se på en computer, findes der værktøjer til at gøre det. se IP-kameraer fra din pcDer er autonome projekter (for eksempel læsning QR-koder på enheden), og fællesskabet søger aktivt at afkode stregkoder uden også at være afhængig af en backend.
Hvis du har brug for mere kraft i kanten, giver NVIDIA Jetson-økosystemet (Nano Orin, NX Orin, AGX Orin) dig mulighed for at forvandle stort set ethvert kamera til et kamera med IADer findes løsninger, der integrerer feltklare detektions- og sporingsmodeller, herunder kommercielle værktøjer, der lover at transformere enhver strømning i handlingsrettet analyse. For dem, der ikke ønsker at skrive kode, understøtter visionsplatforme som 'visionplatform.ai' indlæsning af modeller og kørsel af detektion/sporing uden at røre en linje, hvilket reducerer integrationstiden.
Denne række af muligheder dækker alt fra demoer i browseren til industrielle implementeringer. Valget mellem browser, Python med GPU eller edge afhænger af budget, målforsinkelse, tilgængelig forbindelse og behovet for databeskyttelse på enheden.
Brugsscenarier og tværgående applikationer
Objektdetektion bruges i overvågning og adgangskontrol, med videoovervågningssoftware (persongenkendelse, ansigtsgenkendelse), detailhandel (adfærds- og lageranalyse), bilindustrien (fodgænger- og køretøjsdetektion), sundhedspleje (anomalier i medicinske billeder) eller landbrug (overvågning af afgrøder og skadedyr). Nøglen er at kombinere klassificering og afgrænsningsboks for at forstå konteksten og træffe beslutninger i skiftende miljøer.
I smarte byer letter realtidsdetektion optælling, stisporing og advarsler. I fabrikker hjælper det med kvalitetskontrol og sikkerhed på arbejdspladsen. Og i forbrugerprodukter er det integreret i AR-oplevelser og værktøjer som kodescannere. At vælge den rigtige model (f.eks. YOLO for lav latenstid) og finjustere datapipelinen definerer succes i stor skala. produktiv.
Igangsættelse af produktion og yderligere overvejelser
Hvis du udgiver en webdemo, skal du udover hosting (f.eks. gratis statiske websteder på Kinsta fra dit Git-repository) huske på kameratilladelser og den tilhørende brugeroplevelse. Det er også almindeligt at se cookiebannere, der informerer dig om brugen af cookies. opbevaring lokale og analytiske; disse meddelelser hjælper med at overholde reglerne og forklarer, hvilke data der håndteres i brugerens browser.
I Python-implementeringer skal du dokumentere CUDA-versionen, drivere og versionen af PyTorch/TensorFlow, og se vejledninger på problemer med perifer genkendelseVed at opretholde en klar 'requirements.txt'-fil og opstartsscripts sparer du dig timevis af replikering af miljøer. Hvis du træner, skal du automatisere oprettelsen af 'train.txt' og 'valid.txt', og sikre konsistens mellem 'classes.names' og dine annotationsetiketter for at undgå subtile fejl.
Alt ovenstående samler sig i et landskab, hvor du kan starte med en React-app, der kører COCO-SSD i browseren, hoppe til YOLOv3 eller YOLOv8 med webcam og GPU-sporing, eller bevæge dig til kanten med ESP32Cam/Jetson og løsninger uden kode. Valget afhænger af dine krav til nøjagtighed, latenstid, omkostninger og brugervenlighed, men vejen fra idé til prototype og fra prototype til ... levedygtigt produkt den havde aldrig været så kort.
Essensen af webcam-detektion er, at du kan kombinere hurtig implementering med reel kraft: et SPA med TensorFlow.js til validering, YOLO til performance squeeze, velannoterede datasæt til brugerdefineret træning og en implementering, der, afhængigt af din sag, kan være så simpel som et statisk websted eller så robust som en applikation med multi-track tracking på en GPU eller en indlejret enhed. Med disse byggesten er opsætning af praktiske løsninger et spørgsmål om timer snarere end uger, samtidig med at du bevarer kontrollen over... oplevelse i realtid.
Passioneret forfatter om bytes-verdenen og teknologien generelt. Jeg elsker at dele min viden gennem skrivning, og det er det, jeg vil gøre i denne blog, vise dig alle de mest interessante ting om gadgets, software, hardware, teknologiske trends og mere. Mit mål er at hjælpe dig med at navigere i den digitale verden på en enkel og underholdende måde.
