Feature/sl red5 dev 1034

src/page/sample-mixer-pages/singular-live/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

src/page/sample-mixer-pages/singular-live/README.md

@@ -0,0 +1,62 @@
+# Red5 CEF Mixer Page with Singular.live Integration
+
+This is an example page which can be loaded by a Red5 CEF Mixer to integrate with `Singular.live` overlays in order to broadcast out a single mixed stream.
+
+# Requirements
+
+Before using this example, you will first need to have a [Singular.live account](https://www.singular.live/) and at least one `App` in your account dashboard that can be used.
+
+## App Token
+
+From your `Singular.live` account dashboard, you will see the available `App`s listed. Each `App` has an associated **Public App Token** associated and accessed by first selecting the target `App` from the dashboard, then selecting the `i` icon.
+
+This will show you the associated URLs and Token(s) of the target `App`.
+
+**You will need to provide this token to the CEF Mixer page in order to integrate with your Singular.live App.**
+
+> More information about `Singular.live` and Apps can be found at: [https://support.singular.live/hc/en-us/articles/360034417991-Beginner-s-Guide-to-Singular](https://support.singular.live/hc/en-us/articles/360034417991-Beginner-s-Guide-to-Singular).
+
+# Usage
+
+The Red5 CEF Mixer is instructed to load a specified page at a URL and broadcast a live stream to a target Red5 Server. This is quickly and easily done using the `controller` html provided from the `mixer` webapp.
+
+In order to have a CEF Mixer load this example page to integrate with `Singular.live`, you will first need to deploy the files contained in this repository to a remote location which can be loaded over SSL.
+
+> For the purposes of this document, we will say that the files contained in this repo and the `index.html` page is accessible at: `https://red5testing.com`.
+
+When instructing the CEF Mixer to load this example from `https://red5testing.com` it is important to provided some query parameters in order to integrate with `Singular.live`.
+
+## Query Parameters
+
+The following query parameters are recognized by the page:
+
+### Required
+
+- `sl_token` - The App Token from `Singular.live`. Please read the [Requirements](#requirements) section for accessing the token.
+- `host` - The Red5 Server endpoint that has the live stream you wish to consume and overlay the content from `Singular.live`.
+- `name` - The name of the stream on the `host` Red5 Server to consume.
+
+### Optional
+
+- `app` - The target webapp context that the stream resides in on the `host`. _Default is `live`._
+- `fit` - The `object-fit` style to apply to the playback stream. _Default is `cover`._
+- `vod` - A Flag to denote whether the stream to playback is VOD or not. _Default is `false`._
+- `vodURL` - The full URL to a VOD file to playback. _Default is `undefined`._
+
+When specifying `vod=true`, the page will utilize [HLS.js](https://github.com/video-dev/hls.js/) to playback the HLS file in browsers that do not support native HLS.
+
+> If you provde the full URL for a VOD file using the `vodURL` query parameter, you do not need to define `vod=true` as well. Additionally, any `vodURL` provided is recommended to be url-encoded so as to avoid breaking the parsing of the query parameters.
+
+### Example URL
+
+The following example URL is one to provide to the CEF Mixer with a live playback of a stream named `stream1` accessible from the `live` webapp context on `https://myred5.com` with an overlay App token of `abcd123` from a Singular.live account:
+
+```sh
+https://red5testing.com?sl_token=abcd1234&host=myred5.com&app=live&name=stream1
+```
+
+The following example URL is one to provide to the CEF Mixer if the above stream is a VOD file residing on the same server:
+
+```sh
+https://red5testing.com?sl_token=abcd1234&host=myred5.com&app=live&name=stream1&vod=true
+```

src/page/sample-mixer-pages/singular-live/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Red5 & Singular.live</title>
+		<link rel="stylesheet" href="style/style.css" />
+    <script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
+		<script src="https://unpkg.com/red5pro-webrtc-sdk@latest/red5pro-sdk.min.js"></script>
+    <script src="https://app.singular.live/libs/singulargraphics/1.0.0/singulargraphics.js"></script>
+	</head>
+	<body>
+		<div id="app">
+      <div id="video-container">
+        <video id="red5pro-subscriber" autoplay playsinline></video>
+      </div>
+
+      <iframe id="SingularOverlay"
+        class="overlay"
+        frameborder="0" scrolling="no" allowfullscreen
+        src="https://app.singular.live/singularplayer/client">
+      </iframe>
+
+    </div>
+    <div id="error-container" class="hidden">
+      <div id="error-message"></div>
+    </div>
+		<script type="module" src="script/main.js"></script>
+		<!-- <script type="module" src="script/simple.js"></script> -->
+	</body>
+</html>

src/page/sample-mixer-pages/singular-live/script/main.js

@@ -0,0 +1,180 @@
+/*
+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.
+*/
+import { query, isHostAnIPAddress } from './url-util.js'
+
+const { host, app, name, fit, vod, overlayToken, vodURL, pageURL } = query()
+const container = document.querySelector('#app')
+
+const red5pro = window.red5prosdk
+const singular = window.SingularGraphics
+red5pro.setLogLevel('debug')
+
+let retryTimeout = 0
+const RETRY_DELAY = 1000
+
+const options = {
+  class: 'overlay',
+  endpoint: 'http://app.singular.live',
+  interactive: false,
+  syncGraphics: true,
+  showPreloader: true,
+  aspect: '',
+}
+
+const overlay = singular('SingularOverlay', options)
+overlay.addListener('message', (type, params) => {
+  console.log('message', type, params)
+})
+overlay.addListener('error', (type, params) => {
+  console.error('error', type, params)
+  showError(
+    `${type}: ${
+      params
+        ? typeof params !== 'string'
+          ? JSON.stringify(params)
+          : params
+        : ''
+    }`
+  )
+})
+overlay.renderAppOutput(overlayToken, null, (success) => {
+  if (success) {
+    if (vod || vodURL) {
+      loadVOD()
+    } else if (pageURL) {
+      loadPage(pageURL)
+    } else {
+      loadLive()
+    }
+  } else {
+    showError("Couldn't load composition")
+  }
+})
+
+const loadLive = async () => {
+  clearTimeout(retryTimeout)
+  try {
+    document.querySelector('#red5pro-subscriber').style['object-fit'] = fit
+    const isSecure = !isHostAnIPAddress(host)
+    // CEF Mixer does not support WHIP/WHEP at the moment...
+    // const subscriber = new red5pro.WHEPClient()
+    const subscriber = new red5pro.RTCSubscriber()
+    subscriber.on('*', (event) => {
+      const { type } = event
+      if (type !== 'Subscribe.Time.Update') {
+        console.log(type)
+        if (
+          type === 'Subscribe.Connection.Closed' ||
+          type === 'Subscribe.Play.Unpublish'
+        ) {
+          subscriber.unsubscribe()
+          retryTimeout = setTimeout(loadLive, RETRY_DELAY)
+        }
+      }
+    })
+    await subscriber.init({
+      host,
+      protocol: isSecure ? 'wss' : 'ws',
+      port: isSecure ? 443 : 5080,
+      app: app || 'live',
+      streamName: name,
+    })
+    await subscriber.subscribe()
+  } catch (e) {
+    console.error(e)
+    if (!vod) {
+      retryTimeout = setTimeout(loadLive, RETRY_DELAY)
+    }
+  }
+}
+
+const loadVOD = async () => {
+  const element = document.getElementById('red5pro-subscriber')
+  const isSecure = !isHostAnIPAddress(host)
+  const protocol = isSecure ? 'https' : 'http'
+  const port = isSecure ? 443 : 5080
+  const url =
+    vodURL || `${protocol}://${host}:${port}/${app || 'live'}/${name}.m3u8`
+  if (Hls.isSupported()) {
+    const hls = new Hls()
+    hls.attachMedia(element)
+    hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+      hls.loadSource(url)
+    })
+    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      try {
+        element.play()
+      } catch (e) {
+        console.error(e)
+      }
+    })
+    hls.on(Hls.Events.ERROR, function (err, info) {
+      showError(`[Error]:: ${err}, ${JSON.stringify(info)}`)
+    })
+    // Hook in and call overlay SDK methods here:
+    // videoPlaying
+    // videoBuffering
+    // videoFinished
+    // videoTime
+    element.onplay = () => overlay.videoPlaying()
+    element.onwaiting = () => overlay.videoBuffering()
+    element.onended = () => overlay.videoFinished()
+    element.ontimeupdate = () => overlay.videoTime(element.currentTime)
+  } else if (element.canPlayType('application/vnd.apple.mpegurl')) {
+    element.src = url
+    element.addEventListener('loadedmetadata', function () {
+      try {
+        element.play()
+      } catch (e) {
+        console.error(e)
+      }
+    })
+  } else {
+    showError('Your browser does not support HLS video playback.')
+  }
+}
+
+const loadPage = (url) => {
+  const videoContainer = document.querySelector('#video-container')
+  const iframe = document.createElement('iframe')
+  iframe.classList.add('overlay')
+  iframe.style['z-index'] = 0
+  iframe.setAttribute('src', url)
+  iframe.setAttribute('width', '100%')
+  iframe.setAttribute('height', '100%')
+  iframe.setAttribute('frameborder', '0')
+  iframe.setAttribute('scrolling', 'no')
+  iframe.setAttribute('allowfullscreen', 'true')
+  container.insertBefore(iframe, videoContainer)
+  videoContainer.parentNode.removeChild(videoContainer)
+}
+
+const showError = (message) => {
+  const container = document.querySelector('#error-container')
+  const error = document.querySelector('#error-message')
+  container.classList.remove('hidden')
+  error.textContent = message
+}