vue-streaming

Comprehensive Vue 3 streaming library with composables for WebSocket, Socket.IO, HLS, Laravel Echo, WebRTC, Point Cloud, and Data Streaming.

---

Features

- useWebSocket - Native WebSocket with auto-reconnect and heartbeat
- useSocketIO - Full Socket.IO support with rooms and events
- useHLS - HTTP Live Streaming with quality control
- useLaravelEcho - Pusher/Reverb broadcasting integration
- useWebRTC - Peer connections with data channels for point cloud/detection
- usePointCloud - LiDAR/3D point cloud streaming and decoding
- useDataStream - Generic data streaming with buffering and deduplication
- Components - StreamViewer, HLSPlayer, PointCloudViewer, WebRTCViewer
- TypeScript - Full TypeScript support with exported types
- Tree-shakeable - Import only what you need

---

Installation

bash
npm install vue-streaming

yarn

yarn add vue-streaming

pnpm

pnpm add vue-streaming


$3

Install based on the features you need:

bash

For HLS streaming

npm install hls.js

For Socket.IO

npm install socket.io-client

For Laravel Echo

npm install laravel-echo pusher-js

For Point Cloud visualization

npm install three @types/three

For DRACO compression

npm install draco3d


---

Quick Start

$3

vue

$3

vue

$3

vue

$3

vue

$3

vue

$3

vue

$3

vue

---

Components

$3

Generic stream viewer for displaying real-time data:

vue



$3

HLS video player with quality controls:

vue



$3

3D point cloud visualization (requires three.js):

vue



$3

WebRTC stream viewer with connection controls:

vue



---

API Reference

$3

| Option | Type | Default | Description |
| ---------------------- | -------------------- | -------- | ---------------------------- |
| url | string | required | WebSocket URL |
| protocols | string \| string[] | - | Subprotocols |
| autoConnect | boolean | true | Auto-connect on mount |
| autoReconnect | boolean | true | Auto-reconnect on disconnect |
| maxReconnectAttempts | number | 5 | Max reconnection attempts |
| reconnectDelay | number | 1000 | Initial reconnect delay (ms) |
| heartbeatInterval | number | - | Heartbeat interval (ms) |

$3

| Option | Type | Default | Description |
| ------------- | --------- | -------- | ------------------------ |
| url | string | required | Server URL |
| options | object | - | Socket.IO client options |
| autoConnect | boolean | true | Auto-connect on mount |

$3

| Option | Type | Default | Description |
| ---------------- | --------- | -------- | ----------------------------- |
| url | string | required | HLS manifest URL |
| autoPlay | boolean | true | Auto-play on attach |
| lowLatencyMode | boolean | false | Enable low-latency mode |
| startLevel | number | -1 | Initial quality (-1 for auto) |

$3

| Option | Type | Default | Description |
| ------------- | ------------------------------------- | -------- | ---------------- |
| broadcaster | 'pusher' \| 'socket.io' \| 'reverb' | required | Broadcaster type |
| key | string | - | Pusher app key |
| cluster | string | - | Pusher cluster |
| wsHost | string | - | WebSocket host |
| wsPort | number | - | WebSocket port |

$3

| Option | Type | Default | Description |
| ------------------ | ---------------- | -------- | -------------------------- |
| signalingUrl | string | required | Signaling server URL |
| iceServers | RTCIceServer[] | STUN | ICE servers |
| enablePointCloud | boolean | true | Enable point cloud channel |
| enableDetections | boolean | true | Enable detection channel |

$3

| Option | Type | Default | Description |
| ------------------ | ------------------ | -------- | --------------------- |
| format | PointCloudFormat | 'auto' | Point cloud format |
| maxPoints | number | - | Max points to decode |
| downsampleFactor | number | 1 | Downsample factor |
| dracoPath | string | - | Path to DRACO decoder |

$3

| Option | Type | Default | Description |
| ------------- | --------- | ------- | ------------------------ |
| bufferSize | number | 1000 | Max buffer size |
| throttleMs | number | - | Throttle interval |
| deduplicate | boolean | false | Enable deduplication |
| batchSize | number | - | Batch size for callbacks |

---

Legacy Support

The package still exports the legacy StreamPlayer component for backward compatibility:

vue

---

License

MIT (c) Kerolos Zakaria