HLS
The Red5 Pro WebRTC SDK HLS Subscriber.
HLS Configuration Properties
| Property | Required | Default | Description |
|---|---|---|---|
| protocol | [x] | https |
The protocol uri that the stream source resides on. |
| port | [-] | 443 |
The port uri that the stream source resides on. |
| app | [x] | live |
The webapp name that the stream source resides in. |
| host | [x] | None | The IP or address that the stream resides on. |
| streamName | [x] | None | The stream name to subscribe to. |
| mediaElementId | [-] | red5pro-subscriber |
The target video or audio element id attribute which will display the stream. |
| mimeType | [x] | application/x-mpegURL |
The mime-type of the stream source. |
| 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 |
| socketParams | [-] | undefined |
By providing a socketParams property, you turn on a verification system that will pass the provided connectionParams to a WebSocket endpoint (much like how the WebRTC subscriber does in verification). |
| connectionParams | [-] | undefined |
An object of connection parameters to send to the server upon connection request. |
HLS Example
As a Module
import { HLSSubscriber } from 'red5pro-webrtc-sdk'
const start = async () => {
try {
const subscriber = new HLSSubscriber()
await subscriber.init({
protocol: 'http',
port: 5080,
app: 'live',
host: 'localhost',
streamName: 'mystream',
mediaElementId: 'red5pro-subscriber'
})
await subscriber.subscribe()
} catch (e) {
// An error occured in establishing a subscriber session.
}
}
start()In a Browser
index.html:
<!doctype html>
<html>
<head>
<!-- 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 HLS subcriber.
var subscriber = new red5prosdk.HLSSubscriber();
// Initialize
subscriber.init({
protocol: 'http',
port: 5080,
app: 'live',
host: 'localhost',
streamName: 'mystream',
mimeType: 'application/x-mpegURL',
mediaElementId: 'red5pro-subscriber'
})
.then(function(subscriber) {
// `subcriber` is the HLS 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);