This is an example of a basic Publisher broadcasting a stream to a Red5 Pro Server.
Publishing to a Red5 Pro stream requires a few components to function fully.
You will need to include the Red5 Pro SDK library on the page. You have several options to include the SDK in your project:
<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/[email protected]/red5pro-sdk.min.js"></script>
npm install --save-dev red5pro-webrtc-sdk
yarn install --dev red5pro-webrtc-sdk
If you have not already done so, download the Red5 Pro HTML SDK from your account page: https://account.red5.net/download.
Once downloaded, unzip and move the library files - contained in the lib directory of the unzipped download - that makes sens for your project. For the purposes of these examples, we have maked the entire lib directory into the top level of our project.
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 } from 'red5pro-webrtc-sdk'To begin working with the Red5 Pro HTML5 SDK in your project:
This example assumes that you will have a video DOM element on your page with the id attribute of red5pro-publisher:
import { WHIPClient } from 'red5pro-webrtc-sdk'
var rtcPublisher = new WHIPClient()
var 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 start = async () => {
try {
rtcPublisher.on('*', (event) => {
const { type, data } = event
console.log(type, data)
})
await rtcPublisher.init(config)
await rtcPublisher.publish()
} catch (e) {
console.error(e)
}
}
start()<!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>
<!-- Red5 Pro SDK -->
<script src="https://unpkg.com/red5pro-webrtc-sdk@latest/red5pro-sdk.min.js"></script>
<!-- Create Pub/Sub -->
<script>
;(function (red5prosdk) {
'use strict'
const { WHIPClient } = red5prosdk
var rtcPublisher = new WHIPClient()
var 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 start = async () => {
try {
rtcPublisher.on('*', (event) => {
const { type, data } = event
console.log(type, data)
})
await rtcPublisher.init(config)
await rtcPublisher.publish()
} catch (e) {
console.error(e)
}
}
start()
})(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 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.
A Publisher instance is required to attach a stream and request publishing. The SDK provides to ways to start a Publisher:
WHIPClient- utilizes WebRTC-HTTP ingestion to establish a connection through series of HTTP/S requests.RTCPublisher- utilizesWebSocketto establish a connection.
The WebRTC-HTTP ingestion(WHIP) and WebRTC-HTTP egress(WHEP) protocols provide the ability to negotation and establish a connection using HTTP/S requests. This removes the requirement for a WebSocket, which historically has been used for the role of negotiation and connection.
The use of a WebSocket is still available in RTCPublisher and RTCSubscriber and the ability to utilize WHIP/WHEP is provided from the WHIPClient and WHEPClient classes in the SDK. As is evident by their acronyms, the WHIPClient is used for publishing and the WHEPClient is used for subscribing.
NOTE: Aside from the recommendation to utilize the adapter.js library to "shim" similar functionality across WebRTC-supported browesers, the Red5 Pro SDK itself does not provide any polyfills for support. As such, the SDK checks the inherent support of the browser in its failover process.
Read more about configurations and their attributes from the Red5 Pro HTML SDK Documentation.
const { WHIPClient, RTCPublisher } = red5prosdk
var rtcPublisher = new WHIPClient() // Or, alternatively, use: new RTCPublisher()
var 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 start = async () => {
try {
rtcPublisher.on('*', (event) => {
const { type, data } = event
console.log(type, data)
})
await rtcPublisher.init(config)
await rtcPublisher.publish()
} catch (e) {
console.error(e)
}
}
start()After you have started a broadcast session, open a browser window and navigate to your Red5 Pro server (e.g., http://localhost:5080/live/subscribe.jsp to see a list of streams. Select the stream name used from this example and view in the browser using WebRTC, Flash or HLS playback options.