diff --git a/src/webapps/live/proxy-publisher-record-auth.html b/src/webapps/live/proxy-publisher-record-auth.html
new file mode 100644
index 00000000..f5d64541
--- /dev/null
+++ b/src/webapps/live/proxy-publisher-record-auth.html
@@ -0,0 +1,459 @@
+<!doctype html>
+<!-- Copyright © 2015 Infrared5, Inc. All rights reserved.
+
+The accompanying code comprising examples for use solely in conjunction with Red5 Pro (the "Example Code")
+is  licensed  to  you  by  Infrared5  Inc.  in  consideration  of  your  agreement  to  the  following
+license terms  and  conditions.  Access,  use,  modification,  or  redistribution  of  the  accompanying
+code  constitutes your acceptance of the following license terms and conditions.
+
+Permission is hereby granted, free of charge, to you to use the Example Code and associated documentation
+files (collectively, the "Software") without restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The Software shall be used solely in conjunction with Red5 Pro. Red5 Pro is licensed under a separate end
+user  license  agreement  (the  "EULA"),  which  must  be  executed  with  Infrared5,  Inc.
+An  example  of  the EULA can be found on our website at: https://account.red5pro.com/assets/LICENSE.txt.
+
+The above copyright notice and this license shall be included in all copies or portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,  INCLUDING  BUT
+NOT  LIMITED  TO  THE  WARRANTIES  OF  MERCHANTABILITY, FITNESS  FOR  A  PARTICULAR  PURPOSE  AND
+NONINFRINGEMENT.   IN  NO  EVENT  SHALL INFRARED5, INC. BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN  AN  ACTION  OF  CONTRACT,  TORT  OR  OTHERWISE,  ARISING  FROM,  OUT  OF  OR  IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->
+<html lang=en>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <script src="//webrtchacks.github.io/adapter/adapter-latest.js"></script>
+    <script src="lib/screenfull/screenfull.min.js"></script>
+    <link href="lib/red5pro/red5pro-media.css" rel="stylesheet">
+    <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
+    <style>
+      #prompt {
+        text-align: center;
+        padding: 10px;
+      }
+      .in-progress {
+        background-color: rgba(0, 0, 255, .2);
+      }
+      .success {
+        background-color: rgba(0, 255, 0, .2);
+      }
+      .failure {
+        background-color: rgba(255, 0, 0, .2);
+      }
+      #wrapper {
+        width: 100%;
+        height: 480px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="top-bar-wrap" class="clr">
+      <div id="top-bar" class="clr bar-container has-no-content">
+        <div id="top-bar-inner" class="clr">
+          <div id="top-bar-content" class="clr top-bar-right">
+            <div id="top-bar-nav" class="navigation clr">
+              <ul id="menu-top-menu" class="top-bar-menu dropdown-menu sf-menu sf-js-enabled" style="touch-action: pan-y;">
+                <li id="menu-item-801" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-801"><a href="https://account.red5pro.com/register" class="menu-link">Sign Up</a></li>
+                <li id="menu-item-802" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-802"><a href="https://account.red5pro.com/login" class="menu-link">Log In</a></li>
+                <li id="menu-item-3017" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3017"><a href="https://red5pro.com/contact-information/" class="menu-link">Contact Us</a></li>
+                <li id="menu-item-2150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2150"><a href="https://calendly.com/red5-pro/15-minute-phone-call" class="menu-link">Let’s Talk!</a></li>
+              </ul>
+            </div>
+          </div><!-- #top-bar-content -->
+        </div><!-- #top-bar-inner -->
+      </div><!-- #top-bar -->
+    </div>
+    <script src="lib/smartmenus-1.1.0/libs/jquery/jquery.js"></script>
+    <link rel="stylesheet" href="lib/smartmenus-1.1.0/css/sm-core-css.css">
+    <link rel="stylesheet" href="lib/smartmenus-1.1.0/css/sm-clean/sm-clean.css">
+    <!-- navigation bar -->
+    <nav class="main-nav" role="navigation">
+
+      <!-- Mobile menu toggle button (hamburger/x icon) -->
+      <input id="main-menu-state" type="checkbox">
+      <label class="main-menu-btn" for="main-menu-state">
+        <span class="main-menu-btn-icon"></span> Toggle main menu visibility
+      </label>
+
+      <div class="nav-brand" href="https://www.red5pro.com" data-elementor-open-lightbox="">
+        <a href="https://www.red5pro.com">
+          <img alt="Red5 Pro" class="brand-icon" src="css/assets/Red5Pro_logo_white_red.svg">
+            <noscript><img alt="Red5 Pro" data-src="css/assets/Red5Pro_logo_white_red.svg" class="brand-icon" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+            <noscript><img src="css/assets/Red5Pro_logo_white_red.svg" class="brand-icon" alt="Red5 Pro" /></noscript>
+        </a>
+    </div>
+
+      <!-- Sample menu definition -->
+      <ul id="main-menu" class="sm sm-clean" data-smartmenus-id="15729809764360535">
+        <li><a href="#" class="has-submenu" id="sm-15729809764360535-1" aria-haspopup="true" aria-controls="sm-15729809764360535-2" aria-expanded="false">Product<span class="sub-arrow"></span></a>
+          <ul id="sm-15729809764360535-2" role="group" aria-hidden="true" aria-labelledby="sm-15729809764360535-1" aria-expanded="false">
+            <li><a href="#" class="has-submenu" id="sm-15729809764360535-3" aria-haspopup="true" aria-controls="sm-15729809764360535-4" aria-expanded="false">Red5 Pro<span class="sub-arrow"></span></a>
+              <ul id="sm-15729809764360535-4" role="group" aria-hidden="true" aria-labelledby="sm-15729809764360535-3" aria-expanded="false">
+                <li><a href="https://www.red5pro.com/red5-pro-server/">Server</a></li>
+                <li><a href="https://www.red5pro.com/red5pro-mobile-sdks/">SDKs</a></li>
+                <li><a href="https://www.red5pro.com/product-professional-services/">Professional Services</a></li>
+              </ul>
+            </li>
+            <li><a href="#" class="has-submenu" id="sm-15729809764360535-5" aria-haspopup="true" aria-controls="sm-15729809764360535-6" aria-expanded="false">Open Source<span class="sub-arrow"></span></a>
+              <ul id="sm-15729809764360535-6" role="group" aria-hidden="true" aria-labelledby="sm-15729809764360535-5" aria-expanded="false">
+                <li><a href="https://www.red5pro.com/open-source/">Overview</a></li>
+                <li><a href="https://github.com/red5pro">Github Repos</a></li>
+                <li><a href="https://www.red5pro.com/red5-media-server/">Media Server</a></li>
+                <li><a href="https://www.red5pro.com/red5-rtmp-client/">RTMP Client</a></li>
+                <li><a href="https://github.com/infrared5/react-native-red5pro">React Native Library</a></li>
+                <li><a href="https://www.red5pro.com/open-source-cordova/">Cordova Plugin For Red5 Pro</a></li>
+                <li><a href="https://www.red5pro.com/open-source-xamarin/">Xamarin Plugin for Red5 Pro</a></li>
+                <li><a href="https://github.com/red5pro?utf8=%E2%9C%93&amp;q=bees&amp;type=&amp;language=">Load Testing Tools</a></li>
+                <li><a href="https://www.red5pro.com/open-source-other-libraries/">Other Libraries</a></li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li><a href="https://www.red5pro.com/pricing" class="has-submenu" id="sm-15729809764360535-7" aria-haspopup="true" aria-controls="sm-15729809764360535-8" aria-expanded="false">Red5 Pro License Pricing<span class="sub-arrow"></span></a>
+          <ul id="sm-15729809764360535-8" role="group" aria-hidden="true" aria-labelledby="sm-15729809764360535-7" aria-expanded="false">
+            <li><a href="https://www.red5pro.com/pricing/">Plan Overview</a></li>
+            <li><a href="https://www.red5pro.com/developer-pro/">Red5 Pro Developer License</a></li>
+            <li><a href="https://www.red5pro.com/start-up-pro/">Red5 Pro Start Up Pro License</a></li>
+            <li><a href="https://www.red5pro.com/growth-pro/">Red5 Pro Growth Pro License</a></li>
+            <li><a href="https://www.red5pro.com/enterprise/">Red5 Pro Enterprise License</a></li>
+            <li><a href="https://www.red5pro.com/mobile-sdk/">Red5 Pro Mobile SDK</a></li>
+            <li><a href="https://www.red5pro.com/professional-services/">Red5 Pro and Professional Services</a></li>
+            <li><a href="https://www.red5pro.com/pricing-comparison/">Red5 Pro License Pricing Comparison</a></li>
+          </ul>
+        </li>
+        <li><a href="#" class="has-submenu" id="sm-15729809764360535-9" aria-haspopup="true" aria-controls="sm-15729809764360535-10" aria-expanded="false">Resources<span class="sub-arrow"></span></a>
+          <ul id="sm-15729809764360535-10" role="group" aria-hidden="true" aria-labelledby="sm-15729809764360535-9" aria-expanded="false">
+            <li><a href="https://www.red5pro.com/webinars/">Webinars</a></li>
+            <li><a href="https://www.red5pro.com/white-papers/">White Papers</a></li>
+            <li><a href="https://blog.red5pro.com/">Blog</a></li>
+          </ul>
+         </li>
+        <li><a href="#" class="has-submenu" id="sm-15729809764360535-11" aria-haspopup="true" aria-controls="sm-15729809764360535-12" aria-expanded="false">Developer Zone<span class="sub-arrow"></span></a>
+          <ul id="sm-15729809764360535-12" role="group" aria-hidden="true" aria-labelledby="sm-15729809764360535-11" aria-expanded="false">
+            <li><a href="https://www.red5pro.com/developer-zone/">Overview</a></li>
+            <li><a href="#" class="has-submenu" id="sm-15729809764360535-13" aria-haspopup="true" aria-controls="sm-15729809764360535-14" aria-expanded="false">Github Links<span class="sub-arrow"></span></a>
+              <ul id="sm-15729809764360535-14" role="group" aria-hidden="true" aria-labelledby="sm-15729809764360535-13" aria-expanded="false">
+                <li><a href="https://github.com/Red5">Red5</a></li>
+                <li><a href="https://github.com/red5pro">Red5 Pro</a></li>
+              </ul>
+            </li>
+            <li><a href="https://qa-site.red5pro.com/docs">Introduction</a></li>
+            <li><a href="https://qa-site.red5pro.com/docs/#quick-start-guides">Quick Start Guides</a></li>
+            <li><a href="https://qa-site.red5pro.com/docs/streaming/">Streaming SDKs</a></li>
+            <li><a href="https://qa-site.red5pro.com/docs/server/">Red5 Pro Server</a></li>
+            <li><a href="https://qa-site.red5pro.com/docs/developerseries/">Developer Series</a></li>
+            <li><a href="https://qa-site.red5pro.com/docs/serverside-guide/">Server-Side Guide</a></li>
+            <li><a href="https://qa-site.red5pro.com/docs/autoscale/">Autoscaling + Stream Manager</a></li>
+          </ul>
+        </li>
+        <li><a href="#" class="has-submenu" id="sm-15729809764360535-15" aria-haspopup="true" aria-controls="sm-15729809764360535-16" aria-expanded="false">Customers &amp; Industries<span class="sub-arrow"></span></a>
+          <ul id="sm-15729809764360535-16" role="group" aria-hidden="true" aria-labelledby="sm-15729809764360535-15" aria-expanded="false">
+            <li><a href="https://www.red5pro.com/whos-using-red5-pro/">Who’s Using Red5 Pro</a></li>
+            <li><a href="#" class="has-submenu" id="sm-15729809764360535-17" aria-haspopup="true" aria-controls="sm-15729809764360535-18" aria-expanded="false">Industries<span class="sub-arrow"></span></a>
+              <ul id="sm-15729809764360535-18" role="group" aria-hidden="true" aria-labelledby="sm-15729809764360535-17" aria-expanded="false">
+                <li><a href="https://www.red5pro.com/live-auction-video-streaming/">Live Auction Video Streaming</a></li>
+                <li><a href="https://www.red5pro.com/government-iot-and-surveillance-video-streaming/">Government – IoT and Surveillance</a></li>
+                <li><a href="https://www.red5pro.com/video-games-and-esports-video-streaming/">Video Games and eSports</a></li>
+                <li><a href="https://www.red5pro.com/social-media-video-streaming/">Social Media Video Streaming</a></li>
+                <li><a href="https://www.red5pro.com/broadcast-video-streaming/">Broadcast Video Streaming</a></li>
+                <li><a href="https://www.red5pro.com/online-gambling-video-streaming/">Online Gambling Video Streaming</a></li>
+              </ul>
+            </li>
+            <li><a href="#" class="has-submenu" id="sm-15729809764360535-19" aria-haspopup="true" aria-controls="sm-15729809764360535-20" aria-expanded="false">Case Studies<span class="sub-arrow"></span></a>
+              <ul id="sm-15729809764360535-20" role="group" aria-hidden="true" aria-labelledby="sm-15729809764360535-19" aria-expanded="false">
+                <li><a href="https://www.red5pro.com/novetta/">Novetta</a></li>
+                <li><a href="https://www.red5pro.com/singular-live/">Singular.Live</a></li>
+                <li><a href="https://www.red5pro.com/invaluable/">Invaluable</a></li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li><a href="#" class="has-submenu" id="sm-15729809764360535-21" aria-haspopup="true" aria-controls="sm-15729809764360535-22" aria-expanded="false">Help<span class="sub-arrow"></span></a>
+          <ul id="sm-15729809764360535-22" role="group" aria-hidden="true" aria-labelledby="sm-15729809764360535-21" aria-expanded="false">
+            <li><a href="https://red5pro.zendesk.com/hc/en-us">FAQs</a></li>
+            <li><a href="https://red5pro.zendesk.com/hc/en-us/requests/new">Ticket Submissions</a></li>
+            <li><a href="https://calendly.com/red5-pro/15-minute-phone-call">Talk to Sales</a></li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+    <link rel="stylesheet" href="css/sm-proxy.css" type="text/css">
+    <script src="lib/smartmenus-1.1.0/jquery.smartmenus.js"></script>
+        <script>
+            // SmartMenus init
+            $(function() {
+              var retry = function () {
+                var t = setTimeout(function () {
+                  clearTimeout(t);
+                  init();
+                }, 500);
+              }
+              var init = function () {
+                if (!$ && !window.jQuery) {
+                  retry();
+                } else if ((window.jQuery && window.jQuery().smartmenus) || ($ && $().smartmenus)) {
+                  ($ || jQuery)('#main-menu').smartmenus({
+                    subMenusSubOffsetX: 1,
+                    subMenusSubOffsetY: -8
+                  });
+                } else {
+                  retry();
+                }
+              }
+              init();
+            });
+
+            // SmartMenus mobile menu toggle button
+            (function($) {
+              var $mainMenuState = $('#main-menu-state');
+              if ($mainMenuState.length) {
+                // animate mobile menu
+                $mainMenuState.change(function(e) {
+                  var $menu = $('#main-menu');
+                  if (this.checked) {
+                    $menu.hide().slideDown(250, function() { $menu.css('display', ''); });
+                  } else {
+                    $menu.show().slideUp(250, function() { $menu.css('display', ''); });
+                  }
+                });
+                // hide mobile menu beforeunload
+                $(window).bind('beforeunload unload', function() {
+                  if ($mainMenuState[0].checked) {
+                    $mainMenuState[0].click();
+                  }
+                });
+              }
+            })(($ || window.jQuery));
+
+    </script>
+    <div id="wrapper">
+      <video id="red5pro-publisher" width="640" height="480"
+             controls autoplay muted playsinline
+             class="red5pro-media red5pro-media-background">
+     </video>
+    </div>
+    <div id="prompt" class="in-progress">Connecting...</div>
+    <script>
+      (function() {
+       console.log('------- USAGE --------');
+       console.log('');
+       console.log('This page is designed to establish a broadcast session over the Stream Manager Proxy of a Red5 Pro Server. You can provide query params in the URL in order to configure the session to your server deployment.');
+       console.log('The following query params are available:');
+       console.log('%c [host] ' + '%c       : hostname or IP. Default: `window.location.hostname`', 'background: #222; color: #ebefd0', 'background: #fff; color: #222');
+       console.log('%c [protocol] ' + '%c   : protocol which Stream Manager is served over (`http` or `https`). Default: `window.location.protocol`', 'background: #222; color: #ebefd0', 'background: #fff; color: #222');
+       console.log('%c [port] ' + '%c       : port number that Stream Maager is served on. Default: `window.location.port`', 'background: #222; color: #ebefd0', 'background: #fff; color: #222');
+       console.log('%c [app] ' + '%c        : webapp name to stream to on the server. Default: `live`', 'background: #222; color: #ebefd0', 'background: #fff; color: #222');
+       console.log('%c [streamName] ' + '%c : The unique stream name to broadcast with. Required, no default.', 'background: #222; color: #ebefd0', 'background: #fff; color: #222');
+       console.log('%c [verbose] ' + '%c    : Flag to enable verbose logging in Dev Console. Optional.', 'background: #222; color: #ebefd0', 'background: #fff; color: #222');
+       console.log('%c [view] ' + '%c       : Target broadcast tech (`rtc` or `rtmp`). Optional.', 'background: #222; color: #ebefd0', 'background: #fff; color: #222');
+       console.log('%c [audio] ' + '%c       : Flag to use audio in broadcast. Default: `true`', 'background: #222; color: #ebefd0', 'background: #fff; color: #222');
+       console.log('%c [cameraWidth] ' + '%c  : Camera width of broadcast. Default: `640`', 'background: #222; color: #ebefd0', 'background: #fff; color: #222');
+       console.log('%c [cameraHeight] ' + '%c  : Camera height of broadcast. Default: `480`', 'background: #222; color: #ebefd0', 'background: #fff; color: #222');
+       console.log('%c [dc] ' + '%c       : Request to switch from socket to RTCDataChannel after signalling is complete. Optional.', 'background: #222; color: #ebefd0', 'background: #fff; color: #222');
+       console.log('');
+       console.log('%c [ EXAMPLE ] ' + '%c   : ' + '%c proxy-publisher.html?host=myred5proserver.com&protocol=https&port=43&app=live&streamName=mystream&verbose=1  ', 'background: #222; color: #ebefd0',  'background: #fff; color: #222', 'background: #d0efd2; color: #222');
+       console.log('');
+       console.log('----------------------');
+       console.log('%cIf this page is served from the `live` webapp of the Stream Manager Server, the only param you are required to provide is `streamName`.', 'padding: 4px; line-height: 20px; background: #222; color: #ebefd0');
+       console.log('----------------------');
+      })();
+    </script>
+    <script src="lib/es6/es6-fetch.js"></script>
+    <script src="lib/es6/es6-promise.min.js"></script>
+    <script src="lib/red5pro/red5pro-sdk.min.js"></script>
+    <script>
+      (function (window, red5prosdk) {
+
+       // Easy access/parse query params.
+        function getParameterByName(name, url) { // eslint-disable-line no-unused-vars
+          if (!url) {
+            url = window.location.href;
+          }
+          name = name.replace(/[\[\]]/g, "\\$&");
+          var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+              results = regex.exec(url);
+          if (!results) return null;
+          if (!results[2]) return '';
+          return decodeURIComponent(results[2].replace(/\+/g, " "));
+        }
+
+        // Set console log level.
+        if (getParameterByName('verbose') === '1') {
+          red5prosdk.setLogLevel('debug');
+        }
+        else {
+          red5prosdk.setLogLevel('error');
+        }
+
+        // Request the origin server from Stream Manager.
+        function requestOrigin (protocol, port, host, app, streamName, isSecure) {
+          var portURI = (port.length > 0 ? ':' + port : '');
+          var baseUrl = isSecure ? (protocol + '://' + host) : (protocol + '://' + host + portURI);
+          var url = baseUrl + '/streammanager/api/4.0/event/' + app + '/' + streamName + '?action=broadcast';
+            return new Promise(function (resolve, reject) {
+              fetch(url)
+                .then(function (res) {
+                  if (res.headers.get("content-type") &&
+                    res.headers.get("content-type").toLowerCase().indexOf("application/json") >= 0) {
+                      return res.json();
+                  }
+                  else {
+                    throw new TypeError('Could not properly parse response.');
+                  }
+                })
+                .then(function (json) {
+                  if (json.errorMessage) {
+                    throw new Error(json.errorMessage);
+                  } else {
+                    resolve(json.serverAddress);
+                  }
+                })
+                .catch(function (error) {
+                  var jsonError = typeof error === 'string' ? error : JSON.stringify(error, null, 2)
+                  console.error('[PublisherStreamManagerProxyTest] :: Error - Could not request Origin IP from Stream Manager. ' + jsonError)
+                  reject(error);
+                });
+            });
+          }
+
+        // Configuration params.
+        var protocol = getParameterByName('protocol') || window.location.protocol;
+        protocol = (protocol.indexOf(':') !== -1) ? protocol.substring(0, protocol.lastIndexOf(':')) : protocol;
+        var port = getParameterByName('port') || window.location.port;
+        var host = getParameterByName('host') || window.location.hostname;
+        var app = getParameterByName('app') || 'live';
+        var order = getParameterByName('view') || ['rtc', 'rtmp'];
+        var streamName = getParameterByName('streamName');
+        var isSecure = protocol === 'https';
+        var smProtocol = protocol;
+        var smPort = isSecure ? '' : '5080';
+        var wsProtocol = isSecure ? 'wss' : 'ws';
+        var wsPort = isSecure ? 443 : 5080;
+        var audioParam = getParameterByName('audio');
+        var audioFlag = audioParam ? (audioParam === 'false' ? false : true) : true;
+        var cameraWidth = getParameterByName('cameraWidth') || getParameterByName('vw') || 640;
+        var cameraHeight = getParameterByName('cameraHeight') || getParameterByName('vh') || 480;
+        var frameRate = getParameterByName('fr') || 24;
+        var bandwidthAudio = getParameterByName('bwA') || 56;
+        var bandwidthVideo = getParameterByName('bwV') || 750;
+        var mode = getParameterByName('mode') || 'live';
+        var username = getParameterByName('username') || 'user'
+        var password = getParameterByName('password') || 'pass'
+        var token = getParameterByName('token') || 'token'
+        var switchToDC = true;
+        if (getParameterByName('dc')) {
+          var dc = getParameterByName('dc')
+          switchToDC = dc === '1' || dc === 'true'
+        }
+        var switchDelay = getParameterByName('delay') ? parseInt(getParameterByName('delay'), 10) : NaN
+
+        var rtcConfig = {
+          host: host,
+          streamName: streamName,
+          app: 'streammanager',
+          protocol: wsProtocol,
+          port: wsPort,
+          signalingSocketOnly: switchToDC,
+          streamMode: mode,
+          bandwidth: {
+            video: parseInt(bandwidthVideo, 10),
+            audio: parseInt(bandwidthAudio, 10)
+          },
+          mediaConstraints: {
+            audio: audioFlag,
+            video: {
+              width: { exact: parseInt(cameraWidth, 10) },
+              height: { exact: parseInt(cameraHeight, 10) },
+              frameRate: { exact: parseInt(frameRate, 10) }
+            }
+          },
+          socketSwitchDelay: !isNaN(switchDelay) || 1000
+        };
+        var rtmpConfig = {
+          host: host,
+          app: app,
+          streamName: streamName,
+          width: 640,
+          height: 480,
+          embedWidth: "100%",
+          embedHeight: 480,
+          streamMode: mode,
+          backgroundColor: '#000000'
+        };
+
+        var publisher;
+        var failover;
+        var inFailedState = false;
+
+        // Handle events from publisher.
+        function onPublisherEvent (event) {
+          console.log('[index.js] : Publisher Event - ' + event.type + '.');
+          displayPrompt(event.type);
+        }
+
+        // Update UI prompt display based on message.
+        function displayPrompt (message) {
+          if (inFailedState) {
+            return;
+          }
+          var prompt = document.getElementById('prompt');
+          prompt.innerText = message;
+          if (message === 'Publish.Start') {
+            prompt.classList.remove('in-progress');
+            prompt.classList.add('success');
+          }
+          else if (message === 'Publish.Fail' || message === 'Connect.Failure') {
+            prompt.classList.remove('in-progress');
+            prompt.classList.add('failure');
+            inFailedState = true;
+          }
+        }
+
+        requestOrigin(smProtocol, smPort, host, app, streamName, isSecure)
+          .then(function (originHost) {
+
+            // Origin server request is successful.
+            rtcConfig.connectionParams ={
+              host: originHost,
+              app: app,
+              username: username,
+              password: password,
+              token: token
+            };
+            rtmpConfig.host = originHost;
+
+            console.log('[rtc] : ' + JSON.stringify(rtcConfig, null, 2));
+            console.log('[rtmp] : ' + JSON.stringify(rtmpConfig, null, 2));
+
+            // Establish a broadcast session.
+            failover = new red5prosdk.Red5ProPublisher()
+            failover.setPublishOrder(order)
+              .init({
+                rtmp: rtmpConfig,
+                rtc: rtcConfig
+              })
+              .then(function (publisherImpl) {
+                publisher = publisherImpl;
+                publisher.on('*', onPublisherEvent);
+                publisher.publish();
+              })
+              .catch(function (error) {
+                console.error(error);
+                displayPrompt('Publish.Fail');
+              });
+
+          })
+          .catch(function (error) {
+            console.error(error);
+            displayPrompt('Publish.Fail');
+          });
+
+      })(window, window.red5prosdk);
+    </script>
+  </body>
+</html>
