react-ws-video-canvas

A high-performance React component for rendering binary MJPEG/JPEG streams via WebSockets. Designed to connect with Python-based OpenCV streamers for near-zero latency video feeds.

Features

• 🚀 Binary WebSockets: Uses raw bytes (no Base64 overhead).
• ⚡ Low Latency: Optimized for real-time computer vision applications.
• 🖱️ Interactive: Captures clicks and sends normalized coordinates back to the server.
• 📦 Lightweight: Minimal dependencies.

Installation

npm install react-ws-video-canvas

Usage

import { SocketVisionView } from 'react-ws-video-canvas';

function App() {
  const handleMetadata = (data) => {
    console.log("Received metadata:", data);
  };

  return (
    <SocketVisionView 
      url="ws://localhost:8000/ws" 
      width={640} 
      height={480}
      onMetadata={handleMetadata}
    />
  );
}