publisher • subscriber • shared object
Red5 Pro HTML5 SDK
The Red5 Pro HTML5 SDK allows you to integrate live streaming video into your desktop and mobile browser.
Quickstart
To begin working with the Red5 Pro HTML5 SDK in your project:
Installation
As a module:
npm i red5pro-html-sdkimport React from 'react'
import { RTCSubscriber } from 'red5pro-html-sdk'
class Subscriber extends React.Component {
constructor (props) {
super(props)
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
}
this.state = {
configuration: config
}
}
async componentDidMount () {
const {
configuration
} = this.state
try {
const subscriber = await new RTCSubscriber().init(configuration)
await subscriber.subscribe()
} catch (e) {
console.error(e)
}
}
render () {
return (
<div>
<video id="red5pro-subscriber"
width="640" height="480"
autoPlay playsInline controls />
</div>
)
}
}
export default SubscriberReact is not required, only used as an example.
In a browser: Download the latest release from your Red5 Pro Account, or grab a release.
<!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="lib/red5pro/red5pro-sdk.min.js"></script>
<!-- Create Pub/Sub -->
<script>
(function(red5prosdk) {
'use strict';
var rtcPublisher = new red5prosdk.RTCPublisher();
var rtcSubscriber = new red5prosdk.RTCSubscriber();
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
};
function subscribe () {
rtcSubscriber.init(config)
.then(function () {
return rtcSubscriber.subscribe();
})
.then(function () {
console.log('Playing!');
})
.catch(function (err) {
console.log('Could not play: ' + err);
});
}
rtcPublisher.init(config)
.then(function () {
// On broadcast started, subscribe.
rtcPublisher.on(red5prosdk.PublisherEventTypes.PUBLISH_START, subscribe);
return rtcPublisher.publish();
})
.then(function () {
console.log('Publishing!');
})
.catch(function (err) {
console.error('Could not publish: ' + err);
});
}(window.red5prosdk));
</script>
</body>
</html>Requirements
The Red5 Pro HTML 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.
Usage
This section describes using the Red5 Pro HTML SDK browser install to create sessions for a Publisher and a Subscriber.
Publisher
Please refer to the Publisher Readme for information about setting up a broadcast session.
Subscriber
Please refer to the Subscriber Readme for information about setting up a subscriber session.
Shared Object
Please refer to the SharedObject Documentation for information about using SharedObjects in both Publishers and Subscribers.
Contributing
Please refer to the Contributing Documentation to learn more about contributing to the development of the Red5 Pro HTML SDK.