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

npm install react-ip-camera

Quick Start

Single Camera

import { IPCamera } from 'react-ip-camera';

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

Camera Grid

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

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