웹캠 물체 인식(Object Detection)

HTML + JavaScript로 웹캠 물체 인식(Object Detection)을 구현하는 가장 실용적인 방법은
👉 WebRTC + TensorFlow.js + 사전학습 모델(COCO-SSD) 조합입니다.

 

✅ 1) 기본 구조 (웹캠 + 물체 인식)

✅ 핵심 기술

• getUserMedia() → 웹캠 접근
• TensorFlow.js → 머신러닝 실행
• COCO-SSD → 사전 학습된 물체 인식 모델
• <canvas> → 인식 결과 표시

---

✅ 2) 전체 예제 코드

  
const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

async function setupCamera() {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true
  });
  video.srcObject = stream;
  return new Promise(resolve => {
    video.onloadedmetadata = () => resolve(video);
  });
}

async function run() {
  await setupCamera();

  const model = await cocoSsd.load(); // 모델 로드
  console.log("모델 로드 완료");

  async function detect() {
    const predictions = await model.detect(video);

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    predictions.forEach(p => {
      ctx.strokeStyle = "red";
      ctx.lineWidth = 2;
      ctx.strokeRect(...p.bbox);

      ctx.fillStyle = "red";
      ctx.font = "16px Arial";
      ctx.fillText(
        `${p.class} (${Math.round(p.score * 100)}%)`,
        p.bbox[0],
        p.bbox[1] - 5
      );
    });

    requestAnimationFrame(detect);
  }

  detect();
}

run();

---

✅ 3) 인식 가능한 물체 예시 (COCO-SSD)

COCO 데이터셋 기준:

• 사람(person)
• 핸드폰(cell phone)
• 노트북(laptop)
• 컵(cup)
• 병(bottle)
• 자동차(car)
• 고양이(cat)
• 개(dog)
• 의자(chair)
• 책(book)
• 가방(backpack)
• 마우스(mouse)
• 키보드(keyboard)
• TV, 테이블 등

👉 약 80종

---

✅ 4) 성능 개선 팁 (실무 중요)

✅ FPS 개선

if (predictions.length > 0) {
  // 특정 객체만 표시
}

✅ 해상도 낮추기

video.width = 320;
video.height = 240;

✅ 특정 객체만 필터링

const target = ["person", "cell phone"];
const filtered = predictions.filter(p => target.includes(p.class));

---

✅ 실행