npm package: @pranjal.dev/streaming-rtc-web-dev-mode
Description: Isometrik WebRTC SDK - Pre-built components and headless utilities for live streaming
Author: Isometrik
Latest version: 0.1.2

# @isometrik-sdk/rtc-web

A fully customizable WebRTC SDK for live streaming with pre-built UI components and headless utilities.

## Features

- **Pre-built Web Components** - Drop-in `<iso-stream>` component with modern UI
- **Stage Layout** - Conference-style layout with speaker focus, PIP, and participant strip
- **Fully Customizable** - CSS variables, CSS parts, slots, and configuration objects
- **Framework Agnostic** - Works with Vanilla JS, React, Vue, Angular, and more
- **Headless Mode** - Build your own UI with the headless API
- **TypeScript Support** - Full type definitions included

## Installation

```bash
npm install @isometrik-sdk/rtc-web
```

## Quick Start

### Using the Web Component

```html
<script type="module">
  import '@isometrik-sdk/rtc-web';
</script>

<iso-stream
  session-id="my-session"
  layout="stage"
  show-controls
  show-participant-strip
  show-pip
  show-timer
></iso-stream>
```

### With React

```tsx
import '@isometrik-sdk/rtc-web';

function App() {
  return (
    <iso-stream
      session-id="my-session"
      layout="stage"
      show-controls
    />
  );
}
```

### With Vue

```vue
<template>
  <iso-stream
    session-id="my-session"
    layout="stage"
    show-controls
  />
</template>

<script setup>
import '@isometrik-sdk/rtc-web';
</script>
```

## Customization

### CSS Variables

```css
iso-stream {
  --iso-primary: #22c55e;
  --iso-background: #0d1117;
  --iso-text: #ffffff;
  --iso-border-radius: 12px;
}
```

### CSS Parts

```css
iso-stream::part(container) {
  border: 2px solid #22c55e;
}

iso-stream::part(controls) {
  background: rgba(0, 0, 0, 0.8);
}
```

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `session-id` | string | - | Session identifier |
| `layout` | string | `'stage'` | Layout mode |
| `show-controls` | boolean | `true` | Show control bar |
| `show-pip` | boolean | `true` | Show picture-in-picture |
| `show-timer` | boolean | `true` | Show live timer |
| `show-participant-strip` | boolean | `true` | Show participant thumbnails |

## Headless API

For complete UI control, use the headless API:

```typescript
import { createStreamState } from '@isometrik-sdk/rtc-web/headless';

const stream = createStreamState({
  apiUrl: 'https://api.example.com'
});

// Subscribe to state changes
stream.subscribe((state) => {
  console.log('Participants:', state.participants);
  console.log('Is streaming:', state.isStreaming);
});

// Control methods
await stream.connect('session-id');
await stream.startStream();
await stream.toggleAudio();
await stream.toggleVideo();
await stream.disconnect();
```

## Events

```javascript
const streamEl = document.querySelector('iso-stream');

streamEl.addEventListener('stream-started', (e) => {
  console.log('Stream started:', e.detail);
});

streamEl.addEventListener('participant-joined', (e) => {
  console.log('Participant joined:', e.detail.participant);
});

streamEl.addEventListener('error', (e) => {
  console.error('Error:', e.detail.error);
});
```

## Browser Support

- Chrome 80+
- Firefox 75+
- Safari 14+
- Edge 80+

## License

MIT © Isometrik