/

Red5 Pro WebRTC SDK

Add WebRTC SDK to your project

There are several ways to include the Red5 Pro WebRTC SDK in your project:

https://github.com/red5pro/red5pro-webrtc-sdk

npm install red5pro-webrtc-sdk --save

or 

yarn install red5pro-webrtc-sdk
import {
  WHIPClient,
  WHEPClient
} 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 WHIPClient()
    await publisher.init(config)
    await publisher.publish()

    const subscriber = new WHEPClient()
    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 and red5pro-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.WHIPClient();
        var rtcSubscriber = new red5prosdk.WHEPClient();
        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>

Notes on 11.0.0 Release

With the 11.0.0 release of the SDK, the Red5 Pro Server and SDK now support WHIP and WHEP for broadcasting and playback, respectively.

The interface for these are WHIPClient and WHEPClient. If you are familiar with the Red5 Pro WebRTC SDK, you can still use RTCPublisher and RTCSubscriber just as you had done previously.

In fact, WHIPClient is just an extension of RTCPublisher that replaces the WebSocket usage of negotiation with HTTP/S requests. Likewise, WHEPClient is an extension of RTCSubscriber. As such, you can provide all the customization per your requirements in the init configuration object interchangably.

To find out more about the WHIP/WHEP integration, please visit that documentation!