Creating a Publisher

Creating a Publisher

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 publisher.html
  4. To start, add the video element to the web page above the library dependencies in the body:

       <div id="video-container">
         <video id="red5pro-publisher"></video>
     <!-- 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. Create a Red5 Pro Publisher and attach it to a view

      // 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');
  6. Get access to the user media

    // Access user media.
         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.
         view.preview(media, true);
       }, function(error) {
  7. Initialize the publisher and use it to publish your broadcast

       // Using Chrome/Google TURN/STUN servers.
       var iceServers = [{urls: 'stun:stun2.l.google.com:19302'}];
       // Initialize
           protocol: 'ws',
           host: 'localhost',
           port: 8081,
           app: 'live',
           streamName: 'mystream',
           iceServers: iceServers,
           tcpMuxPolicy: 'negotiate'
         .then(function() {
           // Invoke the publish action
           return publisher.publish();
         .catch(function(error) {
           // A fault occurred while trying to initialize and publish the stream.