Skip to main content
The Red5 Pro WebRTC SDK lets you add live streaming to any browser-based application without plugins. It uses WebRTC under the hood — with WHIP for publishing and WHEP for subscribing — to deliver sub-second latency audio and video directly in HTML5. Use it for video chat, interactive live broadcasts, online gaming, or any application that needs real-time peer-to-peer media in the browser.

​
Use cases

  • Live broadcasting — publish a camera feed from a web page at sub-second latency
  • Video chat — real-time two-way audio and video between participants
  • Online gaming — low-latency video feeds for interactive experiences
  • Remote monitoring — browser-based camera publish with lightweight subscribe playback

​
Installation

npm install red5pro-webrtc-sdk

​
Key concepts

The SDK is built on the WHIP/WHEP protocol stack:
  • WHIP (WebRTC-HTTP Ingestion Protocol) — used for publishing. Your browser sends an SDP offer to the server over HTTP, and the server negotiates the connection.
  • WHEP (WebRTC-HTTP Egress Protocol) — used for subscribing. Your browser requests a stream from the server over HTTP and renders the incoming media.
Both protocols run over standard HTTPS, which means they work through firewalls and proxies that block raw WebSocket or RTP traffic.

​
Minimal publish example

The following example publishes a webcam stream to a Red5 Cloud deployment. 
import { WHIPClient } from 'red5pro-webrtc-sdk';

const publisher = new WHIPClient();

const config = {
  host: 'userid-xxx.cloud.red5.net',
  app: 'live',
  streamName: 'myStream',
};

// Acquire camera and microphone
const mediaStream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true,
});

// Attach the local video preview
const preview = document.getElementById('local-video');
preview.srcObject = mediaStream;

// Connect and publish
await publisher.init(config);
await publisher.publish(mediaStream);

console.log('Publishing started');

​
Minimal subscribe example

The following example subscribes to an existing stream and plays it in a <video> element. 
import { WHEPClient } from 'red5pro-webrtc-sdk';

const subscriber = new WHEPClient();

const config = {
  host: 'userid-xxx.cloud.red5.net',
  app: 'live',
  streamName: 'myStream',
};

// Initialize the subscriber
await subscriber.init(config);

// Get the incoming media stream and attach it to a video element
const mediaStream = await subscriber.subscribe();

const player = document.getElementById('remote-video');
player.srcObject = mediaStream;
player.play();

console.log('Playback started');

​
Configuration options

Pass these properties in the config object to both WHIPClient and WHEPClient.
PropertyTypeDescription
hoststringRed5 Cloud hostname or standalone server IP
appstringApplication scope (default: "live")
streamNamestringName of the stream to publish or subscribe to
portnumberServer port (default: 443)
tokenstringAuth token if token-based authentication is enabled
iceServersRTCIceServer[]Custom STUN/TURN servers
bandwidthobjectBitrate constraints: { video: 750, audio: 56 } (kbps)
mediaConstraintsobjectStandard getUserMedia constraints for resolution and frame rate
For Red5 Cloud deployments, use the Stream Manager hostname from your deployment’s Pub/Sub Details page as the host value. The SDK handles node resolution automatically.

​
TypeScript support

The SDK ships with TypeScript declarations. Import types directly: 
import { WHIPClient, WHEPClient, Red5ProConfig } from 'red5pro-webrtc-sdk';

const config: Red5ProConfig = {
  host: 'userid-xxx.cloud.red5.net',
  app: 'live',
  streamName: 'myStream',
};

​
Further resources