invesier-streamkit

WebRTC live streaming SDK with built-in simulcast support for adaptive quality streaming.

Official SDK for the Invesier streaming platform.

🚀 Features

• ✅ Simple API for WebRTC streaming
• ✅ Automatic simulcast (3 quality layers: 1080p, 720p, 360p)
• ✅ Publisher & Viewer roles
• ✅ TypeScript support
• ✅ Works with React, Vue, Angular, vanilla JS
• ✅ Flutter compatible (same WebSocket protocol)

📦 Installation

npm install invesier-streamkit

🎯 Quick Start

Publisher (Broadcasting)

import { createStreamingClient } from 'invesier-streamkit'

const client = createStreamingClient(
  { signalingUrl: 'ws://your-server.com:8080/ws' },
  {
    onConnect: () => console.log('Connected!'),
    onError: (error) => console.error(error)
  }
)

// Start publishing with simulcast
await client.publishStream('my-room', true)

// Get local stream to display
const localStream = client.getLocalStream()
videoElement.srcObject = localStream

Viewer (Watching)

import { createStreamingClient } from 'invesier-streamkit'

const client = createStreamingClient(
  { signalingUrl: 'ws://your-server.com:8080/ws' },
  {
    onRemoteStream: (stream) => {
      videoElement.srcObject = stream
    }
  }
)

// Watch stream
await client.watchStream('my-room')

📖 API Reference

createStreamingClient(config, events?)

Create a new streaming client instance.

Parameters:

• config.signalingUrl (string): WebSocket signaling server URL
• config.iceServers (RTCIceServer[]): Optional custom STUN/TURN servers
• events.onConnect (() => void): Called when connected
• events.onDisconnect (() => void): Called when disconnected
• events.onRemoteStream ((stream: MediaStream) => void): Called when remote stream received
• events.onError ((error: Error) => void): Called on error

Returns: StreamingClient

client.publishStream(roomId, simulcast?)

Start publishing your camera/microphone.

Parameters:

• roomId (string): Room to publish to
• simulcast (boolean): Enable 3-layer quality (default: true)

client.watchStream(roomId)

Watch a stream as a viewer.

Parameters:

• roomId (string): Room to watch

client.getLocalStream()

Get your local media stream (camera/mic).

Returns: MediaStream | null

client.disconnect()

Stop streaming and cleanup resources.

🎨 React Example

import { createStreamingClient } from '@streaming-platform/sdk'
import { useEffect, useRef } from 'react'

function StreamingComponent() {
  const clientRef = useRef(null)
  const videoRef = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    clientRef.current = createStreamingClient(
      { signalingUrl: 'ws://localhost:8080/ws' },
      {
        onRemoteStream: (stream) => {
          if (videoRef.current) {
            videoRef.current.srcObject = stream
          }
        }
      }
    )

    return () => clientRef.current?.disconnect()
  }, [])

  const startPublishing = async () => {
    await clientRef.current.publishStream('demo-room', true)
  }

  return (
    <div>
      <video ref={videoRef} autoPlay playsInline />
      <button onClick={startPublishing}>Start</button>
    </div>
  )
}

🔧 Configuration

Custom STUN/TURN Servers

const client = createStreamingClient({
  signalingUrl: 'ws://localhost:8080/ws',
  iceServers: [
    { urls: 'stun:stun.example.com:3478' },
    {
      urls: 'turn:turn.example.com:3478',
      username: 'user',
      credential: 'pass'
    }
  ]
})

Simulcast Quality Layers

The SDK automatically configures 3 quality layers:

| Layer | Resolution | Bitrate | Frame Rate | |-------|-----------|---------|------------| | Full | 1080p | 2.5 Mbps | 30fps | | Half | 720p | 1.2 Mbps | 30fps | | Quarter | 360p | 500 kbps | 24fps |

🌐 Platform Support

• ✅ Web (Chrome, Firefox, Safari, Edge)
• ✅ React / Vue / Angular
• ✅ Flutter (with flutter_webrtc)
• ✅ React Native (with react-native-webrtc)
• ✅ Electron

📝 License

MIT © askar

🔗 Links

• Documentation
• Issues
• Backend Server