Package Exports

@mustangdas/react-ip-camera
@mustangdas/react-ip-camera/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mustangdas/react-ip-camera) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Navigate to the demo directory: cd demo
Install dependencies: npm install
Update camera URLs in src/App.js
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