https://github.com/red5pro/red5pro-webrtc-sdk
Red5 Pro SDK for the Web
https://github.com/red5pro/red5pro-webrtc-sdk
streaming streaming-video werbrtc whep whip
Last synced: 4 months ago
JSON representation
Red5 Pro SDK for the Web
- Host: GitHub
- URL: https://github.com/red5pro/red5pro-webrtc-sdk
- Owner: red5pro
- License: other
- Created: 2020-11-06T19:27:56.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2026-02-25T20:08:50.000Z (4 months ago)
- Last Synced: 2026-02-25T20:42:05.450Z (4 months ago)
- Topics: streaming, streaming-video, werbrtc, whep, whip
- Language: CSS
- Homepage: https://www.red5.net/live-streaming-sdks/
- Size: 1.23 MB
- Stars: 8
- Watchers: 4
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
README
Quick Start •
Publishing •
Subscribing
---
# Red5 HTML SDK
> The **Red5 HTML SDK** allows you to integrate live streaming video into your desktop and mobile browser.
* [Important Notices](#important-notices)
* [Installation](#installation)
* [Quick Start](#quick-start)
* [Usage](#usage)
# Important Notices
With the `15.0.0` release of the **Red5 HTML SDK**, we have complete overhaul of its development and focus. We have decided to focus solely on **WISH** (WebRTC Ingest Signaling over HTTPS) and dropped WebSocket support previously used for signaling phase.
As such, the publishing and subscribing logic within the SDK are provided from the `WHIPClient` and `WHEPClient`, respectively.
Not only does this free up resources consumed by WebSockets on the Red5 Server deployment, but also provides a _much_ lighter client-side dependency!
# Installation
## As Script Dependency in HTML page
```html
```
... Or if you know the version:
```html
```
## Using `npm` or `yarn` for you browser-based projects
```sh
npm install --save red5pro-webrtc-sdk
```
```sh
yarn install red5pro-webrtc-sdk
```
# Quick Start
All members exposed on the otherwise global `window.red5prosdk` if loading as a script on an HTML page are importable from the `red5pro-webrtc-sdk` module:
_index.js_
```js
import { WHIPClient, WHEPClient } from 'red5pro-webrtc-sdk'
```
## Quick Start - Standalone Server Deployment
You can sign up and download the Red5 Server to manage your own deployment at [https://account.red5.net](https://account.red5.net)! The following example demonstrate how to create a Two-Way stream (publisher and subscriber) against a standalone single Red5 Server:
```html
((red5prosdk) => {
'use strict'
const { WHIPClient, WHEPClient, PublisherEventTypes } = red5prosdk
const publisher = new WHIPClient()
const subscriber = new WHEPClient()
const config = {
host: 'mydeploy.red5.net',
streamName: 'mystream'
}
const subscribe = async () => {
try {
await subscriber.init(config)
await subscriber.subscribe()
} catch (err) {
console.error('Could not play: ' + err)
}
}
const publish = async () => {
try {
// Once publishing, call subscribe!
publisher.on(PublisherEventTypes.PUBLISH_AVAILABLE, subscribe)
await publisher.init(config)
await publisher.publish()
} catch(err) {
console.error('Could not publish: ' + err)
}
}
// Start Publisher first ->
publish()
}(window.red5prosdk))
```
## Quick Start - Red5 Cloud / StreamManager 2.0 Deployment
You can sign up for a Pay-As-You-Grow Cloud deployment of the Red5 Cloud infrastructure with autoscaling at [https://cloud.red5.net](https://cloud.red5.net)!
The Red5 Cloud deployment utilizes a Stream Manager for autoscaling. With the Stream Manager 2.0 Release, the `endpoint` init configuration property was introduced in the SDK to allow developers to specify the specific endpoint to proxy through on the Stream Manager.
> Note: You will need to know which Node Group you intend to target for publishing and subscribing.
```html
<script>
((red5prosdk) => {
'use strict'
const host = 'my-deployment.cloud.red5.net'
const nodeGroup = 'my-node-group'
const streamName = 'my-stream-name'
const { WHIPClient, WHEPClient, PublisherEventTypes } = red5prosdk
const publisher = new WHIPClient()
const subscriber = new WHEPClient()
const config = {
streamName,
connectionParams: {
nodeGroup
}
}
const subscribe = async () => {
try {
await subscriber.init({
...config,
endpoint: `https://${host}/as/v1/proxy/whep/live/${streamName}`
})
await subscriber.subscribe()
} catch (err) {
console.error('Could not play: ' + err)
}
}
const publish = async () => {
try {
// Once publishing, call subscribe!
publisher.on(PublisherEventTypes.PUBLISH_START, subscribe)
await publisher.init({
...config,
endpoint: `https://${host}/as/v1/proxy/whip/live/${streamName}`
})
await publisher.publish()
} catch(err) {
console.error('Could not publish: ' + err)
}
}
// Start Publisher first ->
publish()
}(window.red5prosdk))
```
# Usage
The [WHIPClient](docs/whip-client.md) and [WHEPClient](docs/whep-client.md) - along with the [Native HLSSubscriber](docs/hls-subscriber.md) - each take an initialization configuration in order to perform the signaling and negotiation process with the Red5 Server to start publishing or subscribing to a stream, respectively.
The initialization configurations and relevant APIs available for each client can be found in their respective documentation found in this repo:
* [WHIPClient](docs/whip-client.md)
* [WHEPClient](docs/whep-client.md)
* [HLSSubscriber](docs/hls-subscriber.md)