vue-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 `

Optional Dependencies

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

WebSocket

`vue

`

Socket.IO

`vue

`

HLS Streaming

`vue

Laravel Echo

`vue

`

WebRTC with Point Cloud

`vue

`

Point Cloud Decoding

`vue

`

Data Streaming

`vue

`

Components

StreamViewer

Generic stream viewer for displaying real-time data:

vue <template> <StreamViewer :data="streamData" :max-lines="100" :auto-scroll="true" :show-timestamps="true" /> </template>

HLSPlayer

HLS video player with quality controls:

vue <template> <HLSPlayer src="https://example.com/stream.m3u8" :auto-play="true" :controls="true" :low-latency="true" @ready="onReady" @level-change="onQualityChange" /> </template>

PointCloudViewer

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

vue <template> <PointCloudViewer :points="pointCloudData" :point-size="0.02" :auto-rotate="true" :show-grid="true" /> </template>

WebRTCViewer

WebRTC stream viewer with connection controls:

vue <template> <WebRTCViewer signaling-url="wss://example.com/signaling" :enable-point-cloud="true" :enable-detections="true" :auto-connect="true" @pointcloud="onPointCloud" @detections="onDetections" /> </template>

API Reference

useWebSocket

| 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) |

useSocketIO

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

useHLS

| 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) |

useLaravelEcho

| 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 |

useWebRTC

| 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 |

usePointCloud

| 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 |

useDataStream

| 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