/

Flash/RTMP Subscriber


Overview

The Red5 Pro HTML SDK Flash-based Subscriber embeds a SWF file - utilizing swfobject - to incorporate playback over RTMP.

The Red5 Pro HTML SDK supports the following SWF integration:

  • A bare-bones RTMP playback viewer - included in the src directory as red5pro-subscriber.swf - and distributed with the live webapp of the Red5 Pro Server install.

    • Note: You will need to provide a URL to the swfobject library which will be dynamically injected at runtime if not - by default - found relative to the page at lib/swfobject.

    Flash Configuration Properties

PropertyRequiredDefaultDescription
protocol[x]rtmpThe protocol of the RTMP streaming endpoint; rtmp or rtmps)
port[x]1935The port that the stream is accessible on.
app[x]liveThe application to locate the stream.
host[x]NoneThe IP or address that the stream resides on.
streamName[x]NoneThe stream name to subscribe to.
mediaElementId[-]red5pro-subscriberThe target video or audio element id attribute which will display the stream.
buffer[-]1The amount ot buffer the stream (in seconds).
connectionParams[-]undefinedAn object of connection parameters to send to the server upon connection request.
width[x]640The width of the video element within the SWF movie.
height[x]480The height of the video element within the SWF movie.
embedWidth[x]100%The width of the object element for the SWF movie embed. (Integer or 100%)
embedHeight[x]100%The height of the object element for the SWF movie embed. (Integer or 100%)
swf[x]lib/red5pro/red5pro-subscriber.swfThe swf file location to use as the Flash client subscriber.
minFlashVersion[x]10.0.0Minimum semversion of the target Flash Player.
backgroundColor[-]0x000000The color to show in the background of the SWF movie.
swfobjectURL[x]lib/swfobject/swfobject.jsLocation of the swfobject dependency library that will be dynamically injected.
productInstallURL[x]lib/swfobject/playerProductInstall.swfLocation of the playerProductInstall SWF used by swfobject.

Flash Example

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 Flash/RTMP subcriber.
  var subscriber = new red5prosdk.RTMPSubscriber();

  // Initialize
  subscriber.init({
    protocol: 'rtmp',
    port: 1935,
    host: 'localhost',
    app: 'live',
    streamName: 'mystream',
    swf: 'lib/red5pro-subscriber.swf'
    productInstallURL: 'lib/swfobject/playerProductInstall.swf',
    minFlashVersion: '10.0.0',
    buffer: 1,
    width: 640,
    height: 480,
    embedWidth: '100%',
    embedHeight: '100%'
  })
  .then(function(subscriber) {
    // `subcriber` is the Flash/RTMP 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);