Red5 Documentation

Creating a Subscriber

Creating a Subscriber

Watch a demonstration of the current section
  1. From your File System, create a folder called examples
  2. Open an editor that points at the examples folder
  3. Create a file named subscriber.html
  4. 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>
     ...
  5. 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>
     ...
  6. After establishing a subscriber and PlaybackView, initialize the subscriber:

       // Using Chrome/Google TURN/STUN servers.
       var iceServers = [{urls: 'stun:stun2.l.google.com:19302'}];
    
       // Initialize
       subscriber.init({
           protocol: 'ws',
           host: 'localhost',
           port: 8081,
           app: 'authexample',
           streamName: 'aaa',
           iceServers: iceServers,
           subscriptionId: 'subscriber-' + Math.floor(Math.random() * 0x10000).toString(16),
           rtcpMuxPolicy: 'negotiate'
         })
         .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);
         });