npm package: @mustangdas/react-ip-camera
Description: React components for IP camera streaming via WebSocket with H.264/H.265 video decoding
Author: mustangdas
Latest version: 1.0.0

# React IP Camera Component

A React component library for streaming IP cameras via WebSocket with H.264/H.265 video decoding support.

## Features

- ✅ H.264 and H.265 video decoding using WebCodecs API
- ✅ WebSocket-based streaming
- ✅ Object detection with bounding boxes
- ✅ Automatic reconnection handling
- ✅ Responsive grid layouts
- ✅ Customizable styling
- ✅ Event-driven architecture

## Installation

```bash
npm install react-ip-camera
```

## Quick Start

### Single Camera
```jsx
import { IPCamera } from 'react-ip-camera';

function App() {
  return (
    <IPCamera 
      wsUrl="ws://192.168.1.100:8080/camera1"
      width={640}
      height={360}
    />
  );
}
```

### Camera Grid
```jsx
import { IPCameraGrid } from 'react-ip-camera';

function App() {
  const cameras = [
    { id: 'cam1', wsUrl: 'ws://192.168.1.100:8080/camera1' },
    { id: 'cam2', wsUrl: 'ws://192.168.1.100:8080/camera2' },
    { id: 'cam3', wsUrl: 'ws://192.168.1.100:8080/camera3' },
    { id: 'cam4', wsUrl: 'ws://192.168.1.100:8080/camera4' }
  ];

  return (
    <IPCameraGrid 
      cameras={cameras}
      gridCols={2}
      containerWidth="100vw"
      containerHeight="100vh"
    />
  );
}
```

### With Object Detection
```jsx
import { IPCamera } from 'react-ip-camera';

function App() {
  const handleObjectDetection = (event) => {
    console.log('Detected:', event.label, event.id);
    // event.image contains base64 cropped image
  };

  return (
    <IPCamera 
      wsUrl="ws://192.168.1.100:8080/camera1"
      onObjectDetection={handleObjectDetection}
    />
  );
}
```

## API Reference

### IPCamera Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `wsUrl` | string | required | WebSocket URL for camera stream |
| `width` | number/string | 640 | Canvas width (pixels or CSS value) |
| `height` | number/string | 360 | Canvas height (pixels or CSS value) |
| `onObjectDetection` | function | null | Callback for object detection events |
| `onConnectionChange` | function | null | Callback for connection status changes |
| `onError` | function | null | Callback for error events |
| `showOverlay` | boolean | true | Show connection status overlay |
| `className` | string | '' | Additional CSS class |
| `style` | object | {} | Canvas style overrides |

### IPCameraGrid Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `cameras` | array | required | Array of camera objects with `id` and `wsUrl` |
| `gridCols` | number | required | Number of columns in grid |
| `gridRows` | number | auto | Number of rows (auto-calculated if not provided) |
| `containerWidth` | number/string | '100%' | Container width |
| `containerHeight` | number/string | null | Container height |
| `aspectRatio` | number | 16/9 | Camera aspect ratio |
| `gap` | number | 12 | Gap between cameras (pixels) |
| `padding` | number | 12 | Container padding (pixels) |
| `maintainAspectRatio` | boolean | true | Maintain camera aspect ratio |

## Development

### Running the Demo
1. Navigate to the demo directory: `cd demo`
2. Install dependencies: `npm install`
3. Update camera URLs in `src/App.js`
4. Start the demo: `npm start`

### Project Structure
```
src/
├── components/
│   ├── IPCamera.jsx       # Main camera component
│   └── IPCameraGrid.jsx   # Grid layout component  
├── hooks/
│   └── useIPCamera.js     # Camera management hook
├── core/
│   ├── MessageQueue.js    # Event system
│   └── PlayerWS.js        # WebSocket player class
└── index.js               # Main exports
```

## Browser Support

- ✅ Chrome 94+ (WebCodecs support)
- ✅ Edge 94+
- ❌ Firefox (WebCodecs not supported)
- ❌ Safari (WebCodecs not supported)

## License

MIT