YOLOv8 Webcam Detection

git clone https://github.com/wendylabsinc/samples.git
cd samples/python/yolov8

# Build frontend
FROM node:22-slim AS frontend-builder

WORKDIR /app/frontend
COPY frontend/package*.json ./
RUN npm ci
COPY frontend/ ./
RUN npm run build

# Runtime stage - Ultralytics official Jetson image
FROM ultralytics/ultralytics:latest-jetson-jetpack6

WORKDIR /app

# Only need to install web server dependencies
RUN pip3 install --no-cache-dir fastapi "uvicorn[standard]"

# Pre-download the YOLOv8 model during build (so it works offline)
RUN python3 -c "from ultralytics import YOLO; YOLO('yolov8n.pt')"

# Copy server files
COPY server/app.py ./

# Copy the built frontend
COPY --from=frontend-builder /app/frontend/dist ./frontend/dist

ENV FRONTEND_DIST=/app/frontend/dist
ENV PYTHONUNBUFFERED=1

EXPOSE 3003

CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "3003"]

from collections import deque
from datetime import datetime, timezone
from fastapi import FastAPI
from fastapi.responses import StreamingResponse
import cv2
from ultralytics import YOLO

app = FastAPI()

# Load YOLOv8 model (pre-downloaded in Docker build)
model = YOLO("yolov8n.pt")

# Store recent detections for the log
detection_log: deque = deque(maxlen=100)

def generate_frames():
    """Generate MJPEG frames with YOLOv8 detection overlay."""
    cap = cv2.VideoCapture(0)
    cap.set(cv2.CAP_PROP_FRAME_WIDTH, 1280)
    cap.set(cv2.CAP_PROP_FRAME_HEIGHT, 720)

    while True:
        ret, frame = cap.read()
        if not ret:
            break

        # Run YOLOv8 inference
        results = model(frame, verbose=False)

        # Log detections with confidence > 50%
        timestamp = datetime.now(timezone.utc).isoformat()
        for result in results:
            for box in result.boxes:
                conf = float(box.conf[0])
                if conf > 0.5:
                    cls_name = model.names[int(box.cls[0])]
                    detection_log.append({
                        "label": cls_name,
                        "confidence": round(conf * 100, 1),
                        "timestamp": timestamp
                    })

        # Draw bounding boxes and encode as JPEG
        annotated_frame = results[0].plot()
        _, buffer = cv2.imencode('.jpg', annotated_frame,
                                 [cv2.IMWRITE_JPEG_QUALITY, 80])

        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' +
               buffer.tobytes() + b'\r\n')

@app.get("/api/video-feed")
async def video_feed():
    """Stream MJPEG video with YOLOv8 detections."""
    return StreamingResponse(
        generate_frames(),
        media_type="multipart/x-mixed-replace; boundary=frame"
    )

@app.get("/api/detections")
async def get_detections():
    """Get recent detections for the log overlay."""
    return list(detection_log)[-20:]

import { useState, useEffect, useRef } from "react";

interface Detection {
  label: string;
  confidence: number;
  timestamp: string;
}

function App() {
  const [detections, setDetections] = useState<Detection[]>([]);
  const logRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Poll for detections every 500ms
    const fetchDetections = async () => {
      const response = await fetch("/api/detections");
      const data: Detection[] = await response.json();
      setDetections(data);
    };

    fetchDetections();
    const interval = setInterval(fetchDetections, 500);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    // Auto-scroll to bottom of log
    if (logRef.current) {
      logRef.current.scrollTop = logRef.current.scrollHeight;
    }
  }, [detections]);

  return (
    <div className="relative h-screen w-screen overflow-hidden bg-black">
      {/* Full-screen video feed */}
      <img
        src="/api/video-feed"
        alt="YOLOv8 Detection Feed"
        className="absolute inset-0 h-full w-full object-contain"
      />

      {/* Bottom overlay for detection log (1/5 of screen) */}
      <div className="absolute bottom-0 left-0 right-0 h-1/5
                      bg-black/70 backdrop-blur-sm z-10">
        <div className="h-full flex flex-col">
          <div className="px-4 py-2 border-b border-white/20">
            <h2 className="text-white text-sm font-semibold uppercase">
              COCO Object Detections
            </h2>
          </div>
          <div ref={logRef}
               className="flex-1 overflow-y-auto px-4 py-2 font-mono text-sm">
            {detections.map((detection, index) => (
              <div key={`${detection.timestamp}-${index}`}
                   className="text-white/90 py-0.5">
                <span className="text-green-400">
                  [{detection.confidence}%]
                </span>{" "}
                <span className="text-yellow-300">
                  {detection.label}
                </span>{" "}
                <span className="text-white/50 text-xs">
                  {new Date(detection.timestamp).toLocaleTimeString()}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

{
  "appId": "com.example.python-yolov8",
  "version": "0.0.1",
  "entitlements": [
    { "type": "network", "mode": "host" },
    { "type": "gpu" },
    { "type": "video" }
  ]
}