/
Red5 Pro WebRTC SDK
Add WebRTC SDK to your project
There are several ways to include the Red5 Pro WebRTC SDK in your project:
- Grab the latest Red5 Pro WebRTC SDK from your Red5 Pro Account.
- Include the dependency on a webpage from https://cdn.jsdelivr.net/npm/red5pro-html-sdk.
- Install through NPM:
https://github.com/red5pro/red5pro-webrtc-sdk
npm install red5pro-webrtc-sdk --save
or
yarn install red5pro-webrtc-sdk
import {
RTCPublisher,
RTCSubscriber
} from 'red5pro-webrtc-sdk
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 start = async () => {
try {
const publisher = new RTCPublisher()
await publisher.init(config)
await publisher.publish()
const subscriber = new RTCSubscriber()
await subscriber.init(config)
await subscriber.subscribe()
} catch (e) {
console.error(e)
}
}
start()
Note: The above assumes you will have 2 elements with ids of
red5pro-publisher
andred5pro-subscriber
on your associated DOM. See below.
In a Browser
<!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://cdn.jsdelivr.net/npm/red5pro-webrtc-sdk"></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>