Merge pull request #19 from infrared5/develop

Develop

gulpfile.js

@@ -11,7 +11,7 @@ var version = require(pkg).version;
 var PROD = (process.env.NODE_ENV === 'production');
 var sourceDirectory = path.join(__dirname, 'src');
 var staticDirectory = path.join(__dirname, 'static');
-var buildDirectory = path.join(__dirname, PROD ? 'build': 'dist');
+var buildDirectory = path.join(__dirname, PROD ? 'dist' : 'build');
 var partialsDirectory = path.join(sourceDirectory, 'template', 'partial');
 
 var defaultOptions = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "red5pro-html-sdk-testbed",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Testbed examples for Red5 Pro HTML SDK",
   "main": "src/js/index.js",
   "repository": {
@@ -31,8 +31,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "clean:build": "rm -rf build",
     "clean:dist": "rm -rf dist",
-    "build": "gulp build",
+    "build": "NODE_ENV=develop gulp build",
     "predist": "npm run clean:dist",
-    "dist": "gulp bump-version && npm run build"
+    "dist": "gulp bump-version && NODE_ENV=production gulp build"
   }
 }

src/page/index.html

@@ -35,6 +35,14 @@ <h1 class="centered">Settings</h1>
           <label class="settings-label">Verbose R5 Logging:</label>
           <input type="checkbox" id="logging-field" name="logging-field" style="vertical-align: middle;">
         </p>
+        <p class="settings-field">
+          <label class="settings-label">Video Active:</label>
+          <input type="checkbox" id="video-active-field" name="video-active-field" style="vertical-align: middle;">
+        </p>
+        <p class="settings-field">
+          <label class="settings-label">Audio Active:</label>
+          <input type="checkbox" id="audio-active-field" name="audio-active-field" style="vertical-align: middle;">
+        </p>
       </div>
     </div>
     <script>
@@ -61,6 +69,8 @@ <h1 class="centered">Settings</h1>
         var stream1Field = document.getElementById('stream1-field');
         var stream2Field = document.getElementById('stream2-field');
         var loggingField = document.getElementById('logging-field');
+        var videoField = document.getElementById('video-active-field');
+        var audioField = document.getElementById('audio-active-field');
         var streamSwapButton = document.getElementById('stream-swap-btn');
 
         hostField.addEventListener('blur', function () {
@@ -83,6 +93,16 @@ <h1 class="centered">Settings</h1>
           seal(configuration);
         });
 
+        videoField.addEventListener('change', function () {
+          configuration.video = !configuration.video;
+          seal(configuration);
+        });
+
+        audioField.addEventListener('change', function () {
+          configuration.audio = !configuration.audio;
+          seal(configuration);
+        });
+
         streamSwapButton.addEventListener('click', function () {
           var stream1Value = stream1Field.value;
           var stream2Value = stream2Field.value;
@@ -96,7 +116,9 @@ <h1 class="centered">Settings</h1>
           hostField.value = config.host;
           stream1Field.value = config.stream1;
           stream2Field.value = config.stream2;
-          loggingField.checked = config.verboseLogging ? true : false
+          loggingField.checked = config.verboseLogging ? true : false;
+          videoField.checked = config.video ? true : false;
+          audioField.checked = config.audio ? true : false;
         }
 
         populate(configuration)

src/page/test/publish1080/index.js

@@ -26,8 +26,12 @@
   };
   var userMedia = {
     video: {
-      width: 1920,
-      height: 1080
+      width: {
+        exact: 1920
+      },
+      height: {
+        exact: 1080
+      }
     }
   };
 
@@ -53,7 +57,7 @@
     return Object.assign({}, {
       audio: configuration.audio,
       video: configuration.video
-     }, userMedia);
+     }, configuration.video ? userMedia : {});
   }
 
   function preview () {

src/page/test/publishCameraSource/index.js

@@ -25,7 +25,10 @@
     port: 8081,
     app: 'live'
   };
-  var userMedia = {};
+  var userMedia = {
+    audio: configuration.audio,
+    video: configuration.video
+  };
 
   function onPublisherEvent (event) {
     console.log('[Red5ProPublisher] ' + event.type + '.');
@@ -45,14 +48,16 @@
   }
 
   function getUserMediaConfiguration () {
-    return Object.assign({}, {
-      audio: configuration.audio,
-      video: configuration.video
-    }, userMedia);
+    return Object.assign({}, userMedia);
   }
 
   var SELECT_DEFAULT = 'Select a camera...';
   function onCameraSelect (selection) {
+
+    if (!configuration.video) {
+      return;
+    }
+
     if (selection && selection !== 'undefined' && selection !== SELECT_DEFAULT) {
       // assign selected camere to defined UserMedia.
       userMedia.video = {

src/page/test/publishCameraSwap/index.js

@@ -75,7 +75,7 @@
    return Object.assign({}, {
       audio: configuration.audio,
       video: configuration.video
-    }, userMedia);
+    }, configuration.video ? userMedia : {});
   }
 
   function preview () {

src/page/test/publishCustomSource/README.md

@@ -0,0 +1,151 @@
+# Publishing on Red5 Pro
+This is the basic starter example on publishing to a Red5 Pro stream using the Red5 Pro HTML SDK.
+
+### Example Code
+- **[index.html](index.html)**
+- **[index.js](index.js)**
+
+> These examples use the WebRTC-based Publisher implementation from the Red5 Pro HTML SDK. However, there is failover support to allow for Flash-base publisher on unsupported browsers.
+
+## How to Publish
+Publishing to a Red5 Pro stream requires a few components to function fully.
+
+#### Including the SDK
+You will need to include the Red5 Pro SDK library on the page. The root of the library is accessible from `window.red5prosdk`:
+
+```html
+<!doctype html>
+<html>
+  <head>
+...
+  </head>
+  <body>
+    <video id="red5pro-publisher-video"></video>
+...
+    <script src="lib/red5pro/red5pro.min.sdk"></script>
+    <script>
+      (function (window, red5pro) {
+...
+      })(window, window.red5prosdk);
+    </script>
+...
+  </body>
+</html>
+```
+
+#### Publisher & Viewer
+A Publisher instance - for the purposes of these examples, the `RTCPublisher` implementation - is required to attach a stream and request publishing. Additionally, a `PublisherView` is required to "preview" the stream in the browser:
+
+```js
+var publisher = new red5pro.RTCPublisher();
+var view = new red5pro.PublisherView('red5pro-publisher-video');
+```
+
+<sup>
+[index.js #57](index.js#L57)
+</sup>
+
+#### MediaStream
+A `MediaStream` needs to be requested from the browser and provided to the `RTCPublisher` implementation. This is done using the `getUserMedia` method on the `navigator` instance of the page which will return the `MediaStream` on success callback:
+
+```js
+var nav = navigator.mediaDevice || navigator;
+nav.getUserMedia({
+    audio: true,
+    video: true
+  }, function (media) {
+...
+  }, function (error) {
+    console.error('Error accessing media: ' + error);
+  });
+```
+
+When requesting the `MediaStream` you provide a constraints declaration for the audio and video components.
+
+> More information: [Media.getUserMedia from MDN](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
+
+<sup>
+[index.js #64](index.js#L64)
+</sup>
+
+#### Preview the Stream
+To preview a `MediaStream` returned from `getUserMedia`, add the stream to the Publisher instance and `PublisherView` which has a reference to a `video` DOM element:
+
+```js
+var nav = navigator.mediaDevice || navigator;
+nav.getUserMedia({
+    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.
+    // 3. Associate publisher & view (optional).
+    publisher.attachStream(media);
+    view.preview(media, true);
+    view.attachPublisher(publisher);
+
+  }, function (error) {
+    console.error('Error accessing media: ' + error);
+  });
+```
+
+<sup>
+[index.js #71](index.js#L71)
+</sup>
+
+#### Configuration & Initialization
+The Publisher instance needs to be initialized with a configuration describing the remote endpoint that it needs to connect and stream to:
+
+```js
+var configuration = {
+  protocol: 'ws',
+  host: 'localhost',
+  port: 8081,
+  app: 'live',
+  streamName: 'stream1',
+  iceServers: [
+    {
+      "urls": "stun:stun2.l.google.com:19302"
+    }
+  ]
+};
+
+publisher.init(configuration)
+  .then(function () {
+...
+  })
+  .catch(function (error) {
+...
+  });
+```
+
+<sup>
+[index.js #88](index.js#L88)
+</sup>
+
+> Read more about configurations and their attributes from the [Red5 Pro HTML SDK Documentation](https://github.com/infrared5/red5pro-html-sdk#publisher).
+
+#### Publishing
+The `init` method of the Publisher instance returns a `Promise` which, when resolved, relays the capability to start a publishing session. Use the resolve of the `Promise` to start a Red5 Pro stream:
+
+```js
+publisher.init(configuration)
+  .then(function () {
+    return publisher.publish();
+  })
+  .then(function () {
+    console.log('Successfully started a broadcast session!');
+  })
+  .catch(function () {
+    console.error('Could not start a broadcast session: ' + error);
+  })
+```
+
+<sup>
+[index.js #101](index.js#L101)
+</sup>
+
+### View Your Stream
+After you have started a broadcast session, open a browser window and navigate to your Red5 Pro server (e.g., [http://localhost:5080/live/subscribe.jsp](http://localhost:5080/live/subscribe.jsp) to see a list of streams. Select the stream name used from this example and view in the browser using WebRTC, Flash or HLS playback options.

src/page/test/publishCustomSource/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    {{> meta title='Publish Test'}}
+    {{> header-scripts}}
+    {{> header-stylesheets}}
+  </head>
+  <body>
+    <div id="app">
+      {{> version }}
+      {{> settings-link}}
+      {{> test-info testTitle='Publish Test'}}
+      {{> status-field-publisher}}
+      <div class="centered">
+        <canvas id="red5pro-publisher-video" controls class="video-element"></canvas>
+      </div>
+    </div>
+    {{> body-scripts}}
+    <script src="index.js"></script>
+  </body>
+</html>