> ## Documentation Index
> Fetch the complete documentation index at: https://red5.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Red5 Pro WebRTC SDK: Browser Publish and Subscribe

> Add sub-second WebRTC streaming to any web page with the Red5 Pro WebRTC SDK. Publish via WHIP and subscribe via WHEP with no browser plugins required.

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

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install red5pro-webrtc-sdk
    ```
  </Tab>

  <Tab title="CDN">
    ```html theme={null}
    <script src="https://unpkg.com/red5pro-webrtc-sdk/red5pro-sdk.min.js"></script>
    ```
  </Tab>
</Tabs>

## 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.

```javascript theme={null}
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.

```javascript theme={null}
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`.

| Property           | Type             | Description                                                       |
| ------------------ | ---------------- | ----------------------------------------------------------------- |
| `host`             | `string`         | Red5 Cloud hostname or standalone server IP                       |
| `app`              | `string`         | Application scope (default: `"live"`)                             |
| `streamName`       | `string`         | Name of the stream to publish or subscribe to                     |
| `port`             | `number`         | Server port (default: `443`)                                      |
| `token`            | `string`         | Auth token if token-based authentication is enabled               |
| `iceServers`       | `RTCIceServer[]` | Custom STUN/TURN servers                                          |
| `bandwidth`        | `object`         | Bitrate constraints: `{ video: 750, audio: 56 }` (kbps)           |
| `mediaConstraints` | `object`         | Standard `getUserMedia` constraints for resolution and frame rate |

<Tip>
  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.
</Tip>

## TypeScript support

The SDK ships with TypeScript declarations. Import types directly:

```typescript theme={null}
import { WHIPClient, WHEPClient, Red5ProConfig } from 'red5pro-webrtc-sdk';

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

## Further resources

* [GitHub repository and full examples](https://github.com/red5pro/red5pro-webrtc-sdk) — complete working examples for publish, subscribe, shared objects, and more
* [Full WebRTC SDK documentation](https://www.red5.net/docs/development/sdks/red5-webrtc-sdk/) — in-depth API reference and advanced configuration