Function CameraView

frontend/src/components/camera-view.tsx:14–123

({
  label,
  className,
  width,
  height,
}: CameraViewProps)

}

export default function CameraView({
  label,
  className,
  width,
  height,
}: CameraViewProps) {
  const [isFullscreen, setIsFullscreen] = useState(false);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const requestRef = useRef<number>(0);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    const createVideoFrame = () => {
      ctx.fillStyle = '#000000';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      const time = Date.now() / 1000;

      ctx.fillStyle = '#8A2BE2';
      ctx.beginPath();
      ctx.arc(
        canvas.width / 2 + Math.cos(time) * 50,
        canvas.height / 2 + Math.sin(time) * 50,
        20,
        0,
        Math.PI * 2
      );
      ctx.fill();

      ctx.strokeStyle = '#B388FF';
      ctx.lineWidth = 2;
      for (let i = 0; i < 3; i++) {
        const x = Math.sin(time * (i + 1)) * 100 + canvas.width / 2;
        const y = Math.cos(time * (i + 1)) * 100 + canvas.height / 2;
        ctx.strokeRect(x - 15, y - 15, 30, 30);
      }

      ctx.fillStyle = '#ffffff';
      ctx.font = '12px monospace';
      ctx.fillText(label, 10, 20);
      ctx.fillText(new Date().toLocaleTimeString(), 10, canvas.height - 10);

      ctx.fillStyle = '#ff0000';
      ctx.beginPath();
      ctx.arc(canvas.width - 20, 20, 5, 0, Math.PI * 2);
      ctx.fill();

      requestRef.current = requestAnimationFrame(createVideoFrame);
    };

    createVideoFrame();

    return () => {