Feature/webhooks sm integration af 12

package.json

@@ -1,6 +1,6 @@
 {
   "name": "red5pro-html-sdk-testbed",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "description": "Testbed examples for Red5 Pro HTML SDK",
   "main": "src/js/index.js",
   "repository": {

src/page/sm-webhook-test/publishStreamManagerProxyWebhook/README.md

@@ -0,0 +1,74 @@
+# Publishing Over Stream Manager with Webhook Integration
+
+**This test is intended to be used with Stream Manager that contains a webapp with webhook integration.**
+
+---
+
+The streammanager WebRTC proxy is a communication layer built inside streammanager web application which allows it to act as a proxy gateway for webrtc publishers / subscribers. The target use case of this communication layer is to facilitate a secure browser client to be able to connect to a "unsecure" remote websocket endpoint for consuming WebRTC services offered by Red5pro. 
+
+Streammanager autoscaling works with dynamic nodes which are associated with dynamic IP addresses and cannot have a SSL attached to them. The proxy layer helps publishers to connect and initiate a WebRTC publish session from a `secure` (ssl enabled) domain to a `unsecure` Red5pro origin having using an IP address.
+
+**Please refer to the [Basic Publisher Documentation](../publish/README.md) to learn more about the basic setup.**
+
+> In order to properly run the Stream Manager examples, you will need to configure you server for cluster infrastructure as described in the following documentation: [https://www.red5pro.com/docs/server/autoscale/](https://www.red5pro.com/docs/server/autoscale/).
+
+> You also need to ensure that the stream manager proxy layer is `enabled`. The configuration section can be found in stream manager's config file - `red5-web.properties`
+
+```txt
+## WEBSOCKET PROXY SECTION
+proxy.enabled=true
+```
+
+## Example Code
+
+- **[index.html](index.html)**
+- **[index.js](index.js)**
+
+# Usage
+
+This test allows for:
+
+* Receiving messages from a webhook interceptor through an additional WebSocket connection used for only such messaging.
+* Sending additional `connectionParams` along with the Stream Manager Proxy connection that are to be used with webhook integration.
+
+## Webhook Connection Form
+
+Included in the the `index.html` page is field for a **Webhook Socket Connection URL**. Enter in the full WebSocket endpoint that will issue webhook notifications.
+
+> By default, the **URL** field has `wss://xxx.xxx.xxx:8083/live/webhook` pre-populated as the value. Replace `xxx.xxx.xxx` with the target domain name. Ensure that you have an additional webhook interceptor server running that will forward along the webhook messages on that socket channel, as well.
+
+## Stream Manager Connection Form
+
+Also included in the `index.html` page are fields for additional information to pass along in the `connectionParams` of a connecting Publisher to the Stream Manager in its request for an Origin address.
+
+The following fields are available:
+
+* **username** - optional `username` to provide in Stream Manager Socket connection (`undefined` is sent if not specified).
+* **password** - optional `password` to provide in Stream Manager Socket connection (`undefined` is sent if not specified).
+* **customer scope** - the required `customerScope` used by the webhook webapp to signal hooks on.
+* **meta** - optional `meta` object with additional information to pass in webhook notification.
+* **recording** - flag to send `recording` parameter and define the stream mode as a recording. If not selected, the stream mode is `live`.
+
+These additional `connectionParams` are appended to the connection made to the Stream Manager Proxy after receipt of Origin address to broadcast on.
+
+As an example of the outgoing WebSocket URL in the request (assembled and connection handled by the Red5 Pro SDK):
+
+```ssh
+wss://streammanager.company.com:8083/streammanager?id=mystream&username=foo&password=bar&customerScope=scope&recording=true&meta=%7B%22foo%22%3A%22bar%22%7D&host=xxx.xxx.xxx&app=live
+```
+
+## Start Publishing
+
+Once you have provided the proper **Webhook Socket URL** and additional **Connection Params**, click the `Start Publishing` button to begin a publishing session over the Stream Manager Proxy.
+
+## Stop Publishing
+
+After a publishing session has begun, you can optionally stop publishing by clicking the `Stop Publishing` button.
+
+> Stopping publishing and restarting will begin the process of Stream Manager negotiation for Origin and Proxy Connection again.
+
+# Webhook Notifications
+
+If properly connected to a webhook interceptor WebSocket connection that forwards along webhooks from the webapp distributed on the target Origin, you should be able to open the dev console of your browser and see webhook notification sbeing received during the lifecycle events of the Publisher.
+
+> The WebSocket conneciton for webhook notification will receieve **all** notifications associated with the `customerScope`.

src/page/sm-webhook-test/publishStreamManagerProxyWebhook/index.html

@@ -0,0 +1,82 @@
+<!doctype html>
+<html>
+  <head>
+    {{> meta title='Publish Stream Manager Proxy Test'}}
+    {{> header-scripts}}
+    {{> header-stylesheets}}
+    <style>
+      #address-field {
+        padding: 6px;
+        background-color: #ccc;
+      }
+      #additional-form {
+        padding: 1rem 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      {{> version }}
+      {{> settings-link}}
+      <div class="ice-background">
+      <div class="test-notification">
+        <p>In order to properly run the Stream Manager examples, you will need to configure you server for cluster infrastructure as described in the following documentation:</p>
+        <p><a href="https://www.red5pro.com/docs/server/autoscale/" target="_blank">https://www.red5pro.com/docs/server/autoscale/</a></p>
+		<p>Additionally to use this example stream manager proxy gateway should be enabled.</p>
+      </div>
+      </div>
+      {{> test-info testTitle='Publish SM Proxy Webhook Test'}}
+      {{> status-field-publisher}}
+      {{> statistics-field}}
+      <div class="centered"><p id="address-field">Origin Address: N/A</p></div>
+      <div id="additional-form" class="ice-background">
+        <p style="width: 100%; text-align: center;"><strong>Webhook Socket Connection:</strong></p>
+        <div>
+          <p class="settings-field">
+            <label class="settings-label" for="websocket-field">URL:</label>
+            <input type="text" id="websocket-field" name="websocket-field"
+              style="vertical-align: middle; min-width: 360px;"
+              value="wss://xxx.xxx.xxx:8083/live/webhook">
+          </p>
+        </div>
+        <hr />
+        <p style="width: 100%; text-align: center;"><strong>Additional Connection Params:</strong></p>
+        <div>
+          <p class="settings-field">
+            <label class="settings-label" for="username-field">Username (Optional):</label>
+            <input type="text" id="username-field" name="username-field" style="vertical-align: middle;">
+          </p>
+          <p class="settings-field">
+            <label class="settings-label" for="password-field">Password (Optional):</label>
+            <input type="text" id="password-field" name="password-field" style="vertical-align: middle;">
+          </p>
+          <p class="settings-field">
+            <label class="settings-label" for="customer-field">Customer Scope:</label>
+            <input type="text" id="customer-field" name="customer-field" style="vertical-align: middle;">
+          </p>
+          <p class="settings-field">
+            <label class="settings-label" for="meta-field">Meta Object (JSON):</label>
+            <textarea id="meta-field" name="meta-field" style="vertical-align: middle; min-height: 70px; min-width: 240px; font-size: 1rem; padding-left: 0.8rem; border: 1px solid #ddd;">{}</textarea>
+          </p>
+          <p class="settings-field">
+            <label class="settings-label" for="recording-field">Enable Recording:</label>
+            <input type="checkbox" id="recording-field" name="recording-field" style="vertical-align: middle;">
+          </p>
+          <hr />
+          <p class="centered">
+            <button id="submit-button" style="margin-right: 1rem;">Start Publishing</button>
+            <button id="stop-button" disabled>Stop Publishing</button>
+          </p>
+        </div>
+      </div>
+      <div class="centered">
+        <video id="red5pro-publisher" controls autoplay playsinline muted></video>
+      </div>
+    </div>
+    <!-- Red5 Pro Stream Manager Extension -->
+    <script src="../../lib/red5pro/red5pro-ext-stream-manager.min.js"></script>
+    {{> body-scripts}}
+    <script src="index.js"></script>
+  </body>
+</html>
+