How to Build a Live Streaming App

Last updated 2026-07-12

This guide walks through building an interactive live streaming app — a host broadcasts video, viewers watch in real time. We use WebSocket and WebRTC, the same stack openbnet Live Streaming is built on.

What you will build

An interactive live streaming app: a host creates a stream channel, starts broadcasting camera/screen, and viewers join the channel to watch in real time. Unlike video calling, streaming is one-to-many — the host sends, viewers receive. openbnet supports multi-host streaming via a bridge-tunnel architecture.

Step 1: Create a stream channel

Connect to the openbnet WebSocket and create a stream channel. This sets up the broadcast room that viewers will join.

const ws = new WebSocket(
  `wss://openbnet.com/ss/ws?user_id=${userId}&email=${email}`
);

ws.onopen = () => {
  ws.send(JSON.stringify({
    type: 'create-stream-channel',
    payload: {
      channel_id: 'my-channel',
      title: 'Live Stream',
      description: 'Building in public'
    }
  }));
};

Step 2: Start broadcasting

Capture the host's camera and/or screen, then signal the server to start streaming. The server begins distributing the host media to connected viewers.

const stream = await navigator.mediaDevices.getUserMedia({
  video: true, audio: true
});

// Or screen share:
// const stream = await navigator.mediaDevices.getDisplayMedia();

ws.send(JSON.stringify({
  type: 'start-streaming',
  payload: { channel_id: 'my-channel' }
}));

Step 3: Let viewers join

Viewers connect to the same WebSocket and join the stream channel. The server sends them the host's media stream.

// Viewer code
const ws = new WebSocket(
  `wss://openbnet.com/ss/ws?user_id=${viewerId}`
);

ws.onopen = () => {
  ws.send(JSON.stringify({
    type: 'join-stream',
    payload: { channel_id: 'my-channel', user_id: viewerId }
  }));
};

Step 4: Add co-hosts (multi-host streaming)

openbnet supports multi-host streaming via a bridge-tunnel architecture. You can add co-hosts mid-stream, with per-bridge audio control for viewers. Each host becomes a "bridge" in the tunnel.

// Add a co-host to an existing stream
ws.send(JSON.stringify({
  type: 'add-bridge',
  payload: {
    channel_id: 'my-channel',
    bridge_user_id: coHostId,
    bridge_type: 'webcam' // or 'screen', 'audio'
  }
}));

// Per-bridge audio control — let a viewer mute a specific host
ws.send(JSON.stringify({
  type: 'set-bridge-audio',
  payload: {
    channel_id: 'my-channel',
    bridge_id: bridgeId,
    muted: true
  }
}));

Step 5: Track viewer counts and analytics

Use the REST API to check live viewer counts and stream analytics. This is useful for dashboard displays and streamer feedback.

// Get viewer count
const res = await fetch(
  'https://openbnet.com/api/streams/analytics?channel_id=my-channel'
);
const { viewer_count, duration, latency } = await res.json();
console.log(`${viewer_count} watching, ${latency}ms latency`);

Next steps

You now have a working live streaming app with multi-host support and analytics. openbnet Live Streaming handles the bridge-tunnel architecture, viewer fan-out, and REST analytics — explore the product page for the full API.

Related

• <a href="https://openbnet.com/products/streaming">Live Streaming product</a>
• <a href="https://openbnet.com/learn/what-is-live-streaming-api">What is a Live Streaming API</a>
• <a href="https://openbnet.com/learn/webrtc-vs-websockets">WebRTC vs WebSockets</a>
• <a href="https://openbnet.com/developers">Developer hub</a>

openbnet developer hub → · Pricing →