hae02y / lab

EXP-004 · 2026.04 · AI / ML

Object Scanner

웹캠으로 실시간 객체 인식. YOLO 딥러닝이 브라우저에서 바로 돌아감

Open demo Source
object-scanner-psi.vercel.appCheck
Object Scanner 화면
Fig. 1 — Object Scanner, 배포된 화면

01Question

서버 없이 브라우저만으로 실시간 객체 인식이 될까?

02Approach

  1. 01

    YOLOv8n 모델을 ONNX로 변환해 정적 파일로 두고, onnxruntime-web(WASM)으로 불러온다.

  2. 02

    웹캠 프레임을 640×640 캔버스에 그린 뒤 RGB를 CHW float32 텐서로 바꾼다.

  3. 03

    출력 [1, 84, 8400]에서 박스마다 최고 점수 클래스를 고르고, 임계값 아래는 버린다.

  4. 04

    같은 클래스끼리 NMS(IoU 0.45)로 겹친 박스를 정리해 영상 좌표로 되돌려 그린다.

03Findings

Note A

WASM 버전이 어긋나면 조용히 아무것도 못 찾는다

에러 없이 탐지 결과만 0개였다. 원인은 패키지 버전과 CDN의 WASM 파일 버전 불일치. wasmPaths를 설치 버전에 고정해 해결했다.

Note B

매 프레임 추론할 필요는 없다

추론 호출에 주기 제한(throttle)을 걸었다. WASM 스레드는 일부 브라우저의 SharedArrayBuffer 제약을 피하려고 1개로 둔다.

04Log

  1. 브라우저 YOLO 실시간 탐지

  2. WASM 버전 불일치 수정, 추론 주기 조절