red5pro · bustardcelly · Nov 10, 2020 · Nov 10, 2020 · Nov 10, 2020 · Nov 10, 2020
diff --git a/src/page/sm-test/PubSubStreamManagerProxy/README.md b/src/page/sm-test/PubSubStreamManagerProxy/README.md
@@ -0,0 +1,56 @@
+# Two Way Stream Manager Proxy Video Chat
+
+This example demonstrates two way communication using Red5 Pro. It also demonstrates using servlet requests on the server.
+
+> The Two-Way example requires access to a service that returns a stream listing. You may run into Cross-Origin Resource Sharing (**CORS**) issues if trying to use this example without the proper **CORS** settings provided by the server.
+
+It is recommended to view this example as part of the `webrtcexamples` webapp shipped with the [Red5 Pro Server](https://account.red5pro.com/download).
+
+More information on CORS can be found at: [https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS).
+## Publisher Stream Manager Proxy
+
+**Please refer to the [Publisher Stream Manager Proxy Documentation](../publishStreamManagerProxy/README.md) to learn more about the setup of a publisher through a stream manager.**
+
+## Subscriber Stream Manager Proxy
+
+**Please refer to the [Subscriber Stream Manager Proxy Documentation](../subscribeStreamManagerProxy/README.md) to learn more about the setup of a subscriber through a stream manager.**
+
+## Basic Two Way
+
+**Please refer to the [Basic Two Way Documentation](../../test/twoWay/README.md) to learn more about the basic setup of a publisher.**
+
+## Example Code
+
+- **[index.html](index.html)**
+- **[index.js](index.js)**
+
+> These examples use the WebRTC-based Subscriber implementation from the Red5 Pro HTML SDK. However, there is failover support to allow for Flash-based subscriber on unsupported browsers.
+
+# Setup
+
+Two way communication simply requires setting up a publish stream and a subscribe stream at the same time.  You can test the example with two browser pages.  On the second browser page, use the *Settings* page to swap the names of the stream.
+
+The subscriber portion will automatically connect when the second person begins streaming.
+
+# Getting Live Streams
+
+To get all the streams that a stream manager is handling on a cluster, use the `list` function of the stream manager api.
+
+```js
+var baseUrl = isSecure ? protocol + '://' + host : protocol + '://' + host + portURI;
+var url = baseUrl + '/streammanager/api/2.0/event/list';
+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 {
+      return res.text();
+    }
+  })
+```
+
+[index #202](index.js#L202)
+
+After that, it's handled the same way that the returned data from the `streams` servlet would have been. For more information on this and other parts of the Stream Manager API, see our dcumentation [here](https://www.red5pro.com/docs/autoscale/streammanagerapi-v2.html)
diff --git a/src/page/sm-test/PubSubStreamManagerProxy/index.html b/src/page/sm-test/PubSubStreamManagerProxy/index.html
@@ -0,0 +1,89 @@
+<!doctype html>
+{{> license}}
+<html>
+  <head>
+    {{> meta title='Pub & Sub Stream Manager Test'}}
+    {{> header-scripts}}
+    {{> header-stylesheets}}
+    <style>
+      a {
+        color: #db1f26;
+        text-decoration: underline;
+      }
+      .red5pro-media-container {
+        height: auto;
+      }
+      .streams-container {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+      }
+      .stream-section {
+        flex: 1;
+      }
+      .stream-title {
+        border-bottom: 1px solid #999;
+      }
+      @media (max-width: 1023px) {
+        .stream-section {
+            width: 50%;
+            margin: 0 10px;
+         }
+      }
+      @media (max-width: 767px) {
+        .stream-section {
+            width: 100%;
+            margin: 0px auto;
+         }
+        .streams-container {
+          flex-direction: column;
+        }
+        .stream-section:nth-child(even) {
+          margin-top: 20px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    {{> top-bar }}
+    {{> navigation isTestPage=true }}
+    <div id="app">
+      {{> settings-link}}
+      <div class="ice-background">
+        <div class="test-notification">
+          <p>The Pub&Sub example requires access to a service that returns a stream listing. You may run into Cross-Origin Resource Sharing (<strong>CORS</strong>) issues if trying to use this example without the proper <strong>CORS</strong> settings provided by the server.</p>
+          <br/>
+          <p>It is recommended to view this example as part of the <code>webrtcexamples</code> webapp shipped with the <a href="https://account.red5pro.com/download" target="_blank">Red5 Pro Server</a>.</p>
+        </div>
+      </div>
+       {{> test-title title='Stream Manager Proxy Pub&Sub Test'}}
+      <div class="streams-container">
+        <div class="stream-section">
+          <p class="centered status-field stream-title">Publisher Stream: <span id="pub-stream-title">N/A</span></p>
+          <p id="pub-status-field" class="centered status-field">On hold.</p>
+          {{> statistics-field packets_field='Packets Sent'}}
+          <video id="red5pro-publisher"
+                 class="red5pro-publisher"
+                 controls autoplay muted playsinline
+                 width="640" height="480">
+          </video>
+        </div>
+        <div class="stream-section">
+          <p class="centered status-field stream-title">Subscriber Stream: <span id="sub-stream-title">N/A</span></p>
+          <p id="sub-status-field" class="centered status-field">On hold.</p>
+          {{> statistics-field packets_field='Packets Received'}}
+          <video id="red5pro-subscriber"
+                  controls autoplay playsinline
+                  class="red5pro-subscriber red5pro-media red5pro-media-background"
+                  width="640" height="480">
+          </video>
+        </div>
+      </div>
+    </div>
+    {{> body-scripts}}
+    {{> mobile-subscriber-util}}
+    <script src="../../script/publisher-status.js"></script>
+    <script src="../../script/subscription-status.js"></script>
+    <script src="index.js"></script>
+  </body>
+</html>