HTML5 Streaming SDK

The Red5 Pro HTML5 Streaming SDK provides to ability to both broadcast and subscribe to a live stream containing audio and video in a browser.

This short tutorial will introduce you to the Red5 Pro HTML5 Streaming SDK API and instruct you in setting up a basic web-based project to publish and subscribe to a stream on the Red5 Pro Server.

You will need the latest Red5 Pro HTML5 Streaming SDK before you begin.

Download the Red5 Pro HTML5 Streaming SDKs Download the latest
Streaming SDK for HTML5

Project Setup

  1. Open your favorite editor or IDE for Web-based projects and create a new HTML document.
  2. Add the recommended adapter.js library as a source.
  3. Add at least the Red5 Pro HTML5 Streaming JavaScript library from the SDK as a source.
  4. Add the red5pro, swfobject and videojs lib directories of the Red5 Pro HTML5 SDK distribution to a directory named lib relative in the directory which you create the HTML document in Step 1.
<!doctype html>
<html>
  <head></head>
  <body>
    <!-- * Recommended WebRTC Shim -->
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <!-- Red5 Pro SDK -->
    <script src="lib/red5pro/red5pro-sdk.min.js"></script>
  </body>
</html>

The adapter.js library is a shim to allow for cross-browser support of WebRTC.

If you plan to use failover support of the Red5 Pro HTML5 SDK, it is recommended to also include the VideoJS support libraries shipped in the distribution:

<!doctype html>
<html>
  <head>
    <!-- VideoJS styles -->
    <link rel="stylesheet" href="lib/videojs/video-js.min.css">
  </head>
  <body>
    <!-- * Recommended WebRTC Shim -->
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <!-- Failover Support libs -->
    <script src="lib/videojs/videojs.min.js"></script>
    <script src="lib/videojs/videojs-media-sources.min.js"></script>
    <script src="lib/videojs/videojs.hls.min.js"></script>
    <!-- Red5 Pro SDK -->
    <script src="lib/red5pro/red5pro-sdk.min.js"></script>
  </body>
</html>

The VideoJS libraries are utilized for embedding HLS fallback.

Publisher

When the red5pro-sdk JavaScript library is loaded in the page, it is accessible from window.red5prosdk. This is the global object from which all the pieces of the SDK can be accessed and used in your HTML5 application.

The Red5 Pro HTML5 SDK supports publishing using:

You can specify which tech to utilize explicitly, or allow the SDK to failover based on the browser support. For the purposes of this document, we will target the WebRTC-based publisher.

Video Element

The WebRTC Publisher and view will display the publishers camera in a HTML5 video element and provide the MediaStream instance returned from navigator.getUserMedia to the server to peer consumption.

  1.  To start, add the video element to the web page above the library dependencies in the body:
...
<body>
  <div id="video-container">
    <video id="red5pro-publisher"></video>
  </div>
</body>
...
<!-- WebRTC Shim -->
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<!-- Exposes `red5prosdk` on the window global. -->
<script src="lib/red5pro/red5pro-sdk.min.js"></script>
...

RTCPublisher

  1.  Access the red5prosdk global and create a new RTCPublisher and PublisherView:
...
<script>

  // Create a new instance of the WebRTC publisher.
  var publisher = new red5prosdk.RTCPublisher();

  // Create a view instance based on video element id.
  var view = new red5prosdk.PublisherView('red5pro-publisher');
  view.attachPublisher(publisher);

</script>
...

getUserMedia

  1.  After establishing a publisher and view, access a MediaStream using navigator.getUserMedia and provide the stream to the publisher and preview in the video element:
  // Access user media.
  navigator.getUserMedia({
    audio: true,
    video: true
  }, function(media) {

    // Upon access of user media,
    // 1. Attach the stream to the publisher.
    // 2. Show the stream as preview in view instance.
    publisher.attachStream(media);
    view.preview(media);

  }, function(error) {
    console.error(error);
  });

Configure & Publish

  1.  Provide a stream/server configuration to the RTCPublisher instance:
  var protocol = window.location.protocol;
  var isSecure = protocol.charAt(protocol.length - 2);

  // Using Chrome/Google TURN/STUN servers.
  var iceServers = [{urls: 'stun:stun2.l.google.com:19302'}];

  // Initialize
  publisher.init({
      protocol: isSecure ? 'wss' : 'ws',
      host: 'localhost',
      port: isSecure ? 8083 : 8081,
      app: 'live',
      streamName: 'mystream',
      iceServers: iceServers
    })
    .then(function() {
      // Invoke the publish action
      return publisher.publish();
    })
    .catch(function(error) {
      // A fault occurred while trying to initialize and publish the stream.
      console.error(error);
    });

This example assumes you have downloaded the Red5 Pro Server and started it on your localhost. Change the host IP configuration attribute if it is different.

Launching & Viewing

Ensure that you have a Red5 Pro Server running at the location defined in the publisher configuration — in the example above, that is localhost. Launch the web page in a browser under a local server. In such circumstances, Python's SimpleHTTPServer is simple enough:

  1. Navigate to the directory that the HTML document resides.
  2. Open a terminal prompt and issue the following command:
$ python -m SimpleHTTPServer 8000

Open your favorite web browser and enter the following URL: http://localhost:8000. If you did not name the HTML document file index.html, you will see the filename you did create the document with listed in the browser; click the document listed to open it in the browser page.

Subscriber

Similar to how we setup the Publisher page, we will set up a Subscriber page to start consuming and displaying the stream broadcast using WebRTC.

The Red5 Pro HTML5 SDK supports subscribing using:

You can specify which tech to utilize explicitly, or allow the SDK to failover based on the browser support. For the purposes of this document, we will target the WebRTC-based subscriber.

Page Setup

Using your favorite editor or IDE for web-based projects, create another base HTML document just as you had done for the Publisher web page:

<!doctype html>
<html>
  <head>
    <!-- VideoJS styles -->
    <link rel="stylesheet" href="lib/videojs/video-js.min.css">
  </head>
  <body>
    <!-- * Recommended WebRTC Shim -->
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <!-- Failover Support libs -->
    <script src="lib/videojs/videojs.min.js"></script>
    <script src="lib/videojs/videojs-media-sources.min.js"></script>
    <script src="lib/videojs/videojs.hls.min.js"></script>
    <!-- Red5 Pro SDK -->
    <script src="lib/red5pro/red5pro-sdk.min.js"></script>
  </body>
</html>

Video Element

The WebRTC Subscriber will display the stream in a HTML5 video element.

  1.  To start, add the video element to the web page above the library dependencies in the body:
...
<body>
  <div id="video-container">
    <video id="red5pro-subscriber"></video>
  </div>
</body>
...
<!-- WebRTC Shim -->
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<!-- Exposes `red5prosdk` on the window global. -->
<script src="lib/red5pro/red5pro-sdk.min.js"></script>
...

RTCSubscriber

  1.  Access the red5prosdk global and create a new RTCSubscriber and PlaybackView:
...
<script>

  // Create a new instance of the WebRTC subcriber.
  var subscriber = new red5prosdk.RTCSubscriber();

  // Create a view instance based on video element id.
  var viewer = new red5prosdk.PlaybackView('red5pro-subscriber');
  // Attach the subscriber to the view.
  viewer.attachSubscriber(subscriber);

</script>
...

Configure & Subscribe

  1.  Provide a stream/server configuration to the RTCSubscriber instance:
  var protocol = window.location.protocol;
  var isSecure = protocol.charAt(protocol.length - 2);

  // Using Chrome/Google TURN/STUN servers.
  var iceServers = [{urls: 'stun:stun2.l.google.com:19302'}];

  // Initialize
  subscriber.init({
      protocol: isSecure ? 'wss' : 'ws',
      host: 'localhost',
      port: isSecure ? 8083 : 8081,
      app: 'live',
      streamName: 'mystream',
      iceServers: iceServers,
      subscriptionId: 'subscriber-' + Math.floor(Math.random() * 0x10000).toString(16),
    })
    .then(function() {
      // Invoke the playback action
      return subscriber.play();
    })
    .catch(function(error) {
      // A fault occurred while trying to initialize and subscribe to the stream.
      console.error(error);
    });

This example assumes you have downloaded the Red5 Pro Server and started it on your localhost. Change the host IP configuration attribute if it is different.

Launching & Viewing

Ensure that you have a Red5 Pro Server running at the location defined in the subscriber configuration — in the example above, that is localhost. Launch the web page in a browser under a local server. In such circumstances, Python's SimpleHTTPServer is simple enough:

  1. Navigate to the directory that the HTML document resides.
  2. Open a terminal prompt and issue the following command:
$ python -m SimpleHTTPServer 8000

Open your favorite web browser and enter the following URL: http://localhost:8000. If you did not name the HTML document file index.html, you will see the filename you did create the document with listed in the browser; click the document listed to open it in the browser page.

Red5 Pro HTML5 Streaming Example App

The Red5 Pro HTML5 Streaming Example App contains a simple project with a number of examples that can be used for testing and reference with the Red5 Pro HTML SDK.

The app is also included as a webapp with the server release for developer testing, and can be accessed at https://<your_server_ip>/webrtcexamples/ (or http://localhost:5080/webrtcexamples/ if you are running the server locally).

Further Documentation

Please refer to the documentation included in the Red5 Pro HTML SDK distribution for further detail on configuration, failover and life-cycle events.