@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

npm install @isometrik-sdk/rtc-web

Quick Start

Using the Web Component

<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

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

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

With Vue

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

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

Customization

CSS Variables

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

CSS Parts

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:

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

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