WebRTC Subscriber
The Red5 Pro WebRTC SDK Subscriber solution utilizes WebSockets and WebRTC support in modern browsers.
It is highly recommended to include adapter.js when targeting the WebRTC subscriber.
WebRTC Configuration Properties
| Property | Required | Default | Description |
|---|---|---|---|
| protocol | [x] | wss |
The protocol for the WebSocket communication. |
| port | [x] | 443 |
The port on the host that the WebSocket server listens on; 5080 or 443 (insecure or secure, respectively). |
| app | [x] | live |
The webapp name that the WebSocket is listening on. |
| host | [x] | None | The IP or address that the WebSocket server resides on. |
| streamName | [x] | None | The name of the stream to subscribe to. |
| mediaElementId | [-] | red5pro-subscriber |
The target video or audio element id attribute which will display the stream. |
| rtcConfiguration | [-] | None | The RTCConfiguration to user in setting up RTCPeerConnection. RTCConfiguration |
| iceServers | [x] | None (Test) | The list of ICE servers to use in requesting a Peer Connection. Marked for Deprecation. Favor rtcConfiguration. |
| iceTransport | [-] | UDP |
The transport type to use in ICE negotiation. Either UDP or TCP |
| subscriptionId | [x] | auto-generated | A unique string representing the requesting client. |
| connectionParams | [-] | undefined |
An object of connection parameters to send to the server upon connection request. |
| videoEncoding | [-] | None | Specifies target video encoder. |
| audio Encoding | [-] | None | Specifies target audio encoder. |
| autoLayoutOrientation | [-] | true |
Flag to allow SDK to auto-orientation the layout of video element based on broadcast metadata. Mobile publishers broadcast with orientation. |
| muteOnAutoplayRestriction | [-] | true |
Flag to attempt to mute the video element when autoplay is restricted in the browser. See section on Autoplay Restrictions |
| maintainConnectionOnSubscribeErrors | [-] | false |
Flag to maintain previously established WebSocket connection on any failure within the subscribe request flow. Example |
| signalingSocketOnly | [-] | true |
Flag to indicate whether the WebSocket should only be used for signaling while establishing a connection. Afterward, all data between client and server will be sent over an RTCDataChannel. |
| dataChannelConfiguration | [-] | {name: "red5pro"} |
An object used in configuring a n RTCDataChannel. Only used when signalingSocketOnly is defined as true |
| buffer | [-] | 0 |
Request to set a buffer – in seconds – for playback. |
| maintainStreamVariant | [-] | false |
Flag to instruct the server – when utilizing transcoding – to not switch subscriber stream variants when network conditions change. By setting this to true, when you request to playback a stream that is transcoded, the server will not deliver a variant of higher or lower quality dependending on current network conditions. |
| liveSeek | [-] | None | Configuration object to enable live seek capability. See Live Seek for more information. |
Video Encoding Configuration
By not providing the videoEncoding attribute in the WebRTC Subscriber configuration, the server will choose the default encoder to use. If you do not wish for the server to default, you can provide the following values for the property:
VP8H264NONE
Audio Encoding Configuration
By not providing the audioEncoding attribute in the WebRTC Subscriber configuration, the server will choose the default encoder to use. If you do not wish for the server to default, you can provide the following values for the property:
OpusPCMUPCMASpeexNONE
WebRTC Example
As a Module
import { WHEPClient, RTCSubscriber } from 'red5pro-webrtc-sdk'
const start = async () => {
try {
const subscriber = new WHEPClient() // Or, alternatively, you can use: new RTCSubscriber()
await subscriber.init({
protocol: 'ws',
port: 5080,
host: 'localhost',
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
mediaElementId: 'red5pro-subscriber',
subscriptionId: 'mystream' + Math.floor(Math.random() * 0x10000).toString(16),
})
await subscriber.subscribe()
} catch (e) {
// An error occured in establishing a subscriber session.
}
}
start()In a Browser
index.html:
<!doctype html>
<html>
<head>
<!-- Recommended shim for cross-browser WebRTC support. -->
<script src="https://webrtchacks.github.io/adapter/adapter-latest.js"></script>
<!-- Default Red5 Pro Playback Control styles. -->
<link href="lib/red5pro/red5pro-media.css" rel="stylesheet">
<!-- Fullscreen shim. -->
<script src="lib/screenfull/screenfull.min.js"></script>
</head>
<body>
<video id="red5pro-subscriber"
class="red5pro-media red5pro-media-background"
autoplay controls>
</video>
<!-- Exposes `red5prosdk` on the window global. -->
<script src="lib/red5pro/red5pro-sdk.min.js"></script>
<!-- Example script below. -->
<script src="main.js"></script>
</body>
</html>main.js:
(function (red5prosdk) {
// Create a new instance of the WebRTC subcriber.
var subscriber = new red5prosdk.WHEPClient() // Or, alternatively, you can use: new red5prosdk.RTCSubscriber();
// Initialize
subscriber.init({
protocol: 'ws',
port: 5080,
host: 'localhost',
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
mediaElementId: 'red5pro-subscriber',
subscriptionId: 'mystream' + Math.floor(Math.random() * 0x10000).toString(16),
videoEncoding: 'NONE',
audioEncoding: 'NONE'
})
.then(function(subscriber) {
// `subcriber` is the WebRTC Subscriber instance.
return subscriber.subscribe();
})
.then(function(subscriber) {
// subscription is complete.
// playback should begin immediately due to
// declaration of `autoplay` on the `video` element.
})
.catch(function(error) {
// A fault occurred while trying to initialize and playback the stream.
console.error(error)
});
})(window.red5prosdk);