red5pro-webrtc-sdk
Advanced tools
publisher • subscriber •
The Red5 Pro WebRTC SDK allows you to integrate live streaming video into your desktop and mobile browser.
Important Node About
11.0.0Release
Red5 Pro SDK now supports WHIP/WHEP
Read more from out documentation on WHIP/WHEP integration!
Important Note About
8.0.0Release
Red5 Pro SDK has been published on NPM!
While currently not open source, the SDK build has been published to NPM to allow you to integrate into your projects with greater ease and dependency management.
script in HTML page<script src="https://unpkg.com/red5pro-webrtc-sdk@latest/red5pro-sdk.min.js"></script>
... or if you know the version:
<script src="https://unpkg.com/red5pro-webrtc-sdk@11.2.0/red5pro-sdk.min.js"></script>
npm or yarn for you browser-based projectsnpm install --save-dev red5pro-webrtc-sdk
yarn install --dev red5pro-webrtc-sdk
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
import { WHIPClient, WHEPClient } from 'red5pro-webrtc-sdk'
To begin working with the Red5 Pro HTML5 SDK in your project:
<!doctype html>
<html>
<head>
<!-- *Recommended WebRTC Shim -->
<script src="https://webrtchacks.github.io/adapter/adapter-latest.js"></script>
</head>
<body>
<!-- video containers -->
<!-- publisher -->
<div>
<video id="red5pro-publisher" width="640" height="480" muted autoplay></video>
</div>
<!-- subscriber -->
<div>
<video id="red5pro-subscriber" width="640" height="480" controls autoplay></video>
</div>
<!-- Red5 Pro SDK -->
<script src="https://unpkg.com/red5pro-webrtc-sdk@latest/red5pro-sdk.min.js"></script>
<!-- Create Pub/Sub -->
<script>
((red5prosdk) => {
'use strict'
const rtcPublisher = new red5prosdk.WHIPClient()
const rtcSubscriber = new red5prosdk.WHEPClient()
const config = {
protocol: 'ws',
host: 'localhost',
port: 5080,
app: 'live',
streamName: 'mystream',
rtcConfiguration: {
iceServers: [{urls: 'stun:stun2.l.google.com:19302'}],
iceCandidatePoolSize: 2,
bundlePolicy: 'max-bundle',
} // See https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection#RTCConfiguration_dictionary
};
const subscribe = async () => {
try {
await rtcSubscriber.init(config)
await rtcSubscriber.subscribe()
} catch (err) {
console.error('Could not play: ' + err)
}
}
const publish = async () => {
try {
// Once publishing, call subscribe!
rtcPublisher.on(red5prosdk.PublisherEventTypes.PUBLISH_START, subscribe)
await rtcPublisher.init(config)
await rtcPublisher.publish()
} catch(err) {
console.error('Could not publish: ' + err)
}
}
// Start Publisher first ->
publish()
}(window.red5prosdk))
</script>
</body>
</html>
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.
<!doctype html>
<html>
<head>
<!-- *Recommended WebRTC Shim -->
<script src="https://webrtchacks.github.io/adapter/adapter-latest.js"></script>
</head>
<body>
<!-- video containers -->
<!-- publisher -->
<div>
<video id="red5pro-publisher" width="640" height="480" muted autoplay></video>
</div>
<!-- subscriber -->
<div>
<video id="red5pro-subscriber" width="640" height="480" controls autoplay></video>
</div>
<!-- Red5 Pro SDK -->
<script src="https://unpkg.com/red5pro-webrtc-sdk@latest/red5pro-sdk.min.js"></script>
<!-- Create Pub/Sub -->
<script>
<script>
((red5prosdk) => {
'use strict'
const host = 'my-server-deployment'
const nodeGroup = 'my-node-group'
const streamName = 'my-stream-name'
const rtcPublisher = new red5prosdk.WHIPClient()
const rtcSubscriber = new red5prosdk.WHEPClient()
const config = {
streamName,
rtcConfiguration: {
iceServers: [{urls: 'stun:stun2.l.google.com:19302'}],
iceCandidatePoolSize: 2,
bundlePolicy: 'max-bundle',
} // See https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection#RTCConfiguration_dictionary
};
const subscribe = async () => {
try {
await rtcSubscriber.init({
...config,
endpoint: `https://${host}/as/v1/proxy/whep/live/${streamName}`,
connectionParams: {
nodeGroup
}
})
await rtcSubscriber.subscribe()
} catch (err) {
console.error('Could not play: ' + err)
}
}
const publish = async () => {
try {
// Once publishing, call subscribe!
rtcPublisher.on(red5prosdk.PublisherEventTypes.PUBLISH_START, subscribe)
await rtcPublisher.init({
...config,
endpoint: `https://${host}/as/v1/proxy/whip/live/${streamName}`,
connectionParams: {
nodeGroup
}
})
await rtcPublisher.publish()
} catch(err) {
console.error('Could not publish: ' + err)
}
// Start Publisher first ->
publish()
}(window.red5prosdk))
</script>
</body>
</html>
The Red5 Pro WebRTC SDK is intended to communicate with a Red5 Pro Server, which allows for broadcasting and consuming live streams utilizing WebRTC and other protocols, including RTMP and HLS.
As such, you will need a distribution of the Red5 Pro Server running locally or accessible from the web, such as Amazon Web Services.
This section describes using the Red5 Pro WebRTC SDK browser install to create sessions for a Publisher and a Subscriber.
Please refer to the WHIP/WHEP Readme for information about utilizing WHIP/WHEP clients for publishing and subscribing, respectively.
Please refer to the Publisher Readme for information about setting up a broadcast session.
Please refer to the Subscriber Readme for information about setting up a subscriber session.
Please refer to the Contributing Documentation to learn more about contributing to the development of the Red5 Pro WebRTC SDK.
FAQs
Red5 Pro HTML SDK
We found that red5pro-webrtc-sdk demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.