Support for optional plugin settings

CHANGES.md

@@ -4,9 +4,15 @@ videojs-record changelog
 3.8.0 - unreleased
 ------------------
 
-- Bump required version for videojs-wavesurfer to 2.9.0 or newer
+- Support for specifying optional plugin settings using the `pluginLibraryOptions`
+  option (#383)
+- New options: `videoBitRate` and `videoFrameRate` (currently only used in the
+  webm-wasm plugin)
 - Fix `RecordRTC.MediaStreamRecorder` import when using the `timeSlice` option
 - Examples: add `timeSlice` example demonstrating use of `timestamp` event
+- Bump required version for videojs-wavesurfer to 2.9.0 or newer for wavesurfer.js
+  3.0.0 support
+- Bump required version for recordrtc to 5.5.8
 - Bump required version for webrtc-adapter to 7.2.8 or newer
 
 

README.md

@@ -253,6 +253,8 @@ The available options for this plugin are:
 | `videoEngine` | string | `'recordrtc'` | Video recording library/plugin to use. Legal values are `recordrtc` and `webm-wasm`. |
 | `videoMimeType` | string | `'video/webm'` | The mime type for the video recorder. Use `video/mp4` (Firefox) or `video/webm;codecs=H264` (Chrome 52 and newer) for MP4. A full list of supported mime-types in the Chrome browser is listed [here](https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/fast/mediarecorder/MediaRecorder-isTypeSupported.html). |
 | `videoRecorderType` | string or function | `'auto'` | Video recorder type to use. This allows you to specify an alternative recorder class, e.g. `WhammyRecorder`. Defaults to `auto` which let's recordrtc specify the best available recorder type. |
+| `videoBitRate` | float | `1200` |  The video bitrate in kbps (only used in webm-wasm plugin). |
+| `videoFrameRate` | float | `30` |  The video frame rate in frames per second (only used in webm-wasm plugin). |
 | `videoWorkerURL` | string | `''` | URL for the video worker, for example: `../node_modules/webm-wasm/dist/webm-worker.js`. Currently only used for webm-wasm plugin. Use an empty string '' to disable (default). |
 | `videoWebAssemblyURL` | string | `''` | URL for the video worker WebAssembly file. Use an empty string '' to disable (default). Currently only used for the webm-wasm plugin. |
 | `audioEngine` | string | `'recordrtc'` | Audio recording library/plugin to use. Legal values are `recordrtc`, `libvorbis.js`, `vmsg`, `opus-recorder`,  `lamejs` and `recorder.js`. |
@@ -269,6 +271,7 @@ The available options for this plugin are:
 | `animationQuality` | float | `10` | Sets quality of color quantization (conversion of images to the maximum 256 colors allowed by the GIF specification). Lower values (minimum = 1) produce better colors, but slow processing significantly. The default produces good color mapping at reasonable speeds. Values greater than 20 do not yield significant improvements in speed. |
 | `convertEngine` | string | `''` | Media converter library to use. Legal values are `ts-ebml` or an empty string `''` to disable (default). [Check the](#convert-data) `player.convertedData` object for the converted data. |
 | `hotKeys` | boolean or function | `false` | Enable [keyboard hotkeys](#hotkeys). Disabled by default. |
+| `pluginLibraryOptions` | object | `{}` | Use this object to specify additional settings for the library used by the plugin. Currently only used in the opus-recorder and vmsg plugins. |
 
 Methods
 -------

examples/plugins/audio-only-mp3.html

@@ -55,6 +55,12 @@
             debug: true,
             audioEngine: 'vmsg',
             audioWebAssemblyURL: '../../node_modules/vmsg/vmsg.wasm'
+            // use the pluginLibraryOptions option to specify optional settings for the
+            // vmsg library. For example:
+            // pluginLibraryOptions: {
+            //    shimURL: '/static/js/wasm-polyfill.js',
+            //    pitch: 1
+            // }
         }
     }
 };

examples/plugins/audio-only-opus.html

@@ -58,6 +58,12 @@
             audioSampleRate: 48000,
             audioChannels: 2,
             audioWorkerURL: '../../node_modules/opus-recorder/dist/encoderWorker.min.js'
+            // use the pluginLibraryOptions option to specify optional settings for the
+            // opus-recorder library. For example:
+            // pluginLibraryOptions: {
+            //    monitorGain: 0.4,
+            //    originalSampleRateOverride: 16000
+            // }
         }
     }
 };

examples/plugins/video-only-webm-wasm.html

@@ -49,7 +49,9 @@
             debug: true,
             videoEngine: 'webm-wasm',
             videoWorkerURL: '../../node_modules/webm-wasm/dist/webm-worker.js',
-            videoWebAssemblyURL: 'webm-wasm.wasm'
+            videoWebAssemblyURL: 'webm-wasm.wasm',
+            videoBitRate: 1200,
+            videoFrameRate: 30
         }
     }
 };

package.json

@@ -70,7 +70,7 @@
     "opus"
   ],
   "dependencies": {
-    "recordrtc": ">=5.5.4",
+    "recordrtc": ">=5.5.8",
     "video.js": ">=6.2.7",
     "videojs-wavesurfer": ">=2.9.0",
     "webrtc-adapter": ">=7.2.8"

src/js/defaults.js

@@ -38,9 +38,13 @@ const pluginDefaultOptions = {
     // Turn off the camera/mic (and light) when audio and/or video recording
     // stops, and turns them on again when you resume recording.
     autoMuteDevice: false,
+    // The video bitrate in kbps (only used in webm-wasm plugin).
+    videoBitRate: 1200,
     // Video recording library to use. Legal values are 'recordrtc' (default)
     // and 'webm-wasm'.
     videoEngine: 'recordrtc',
+    // The video frame rate in frames per second (only used in webm-wasm plugin).
+    videoFrameRate: 30,
     // The mime type for the video recorder. Default to 'video/webm'.
     // Use 'video/mp4' (Firefox) or 'video/webm;codecs=H264' (Chrome 52 and
     // newer) for MP4.
@@ -113,7 +117,10 @@ const pluginDefaultOptions = {
     // string '' to disable (default).
     convertEngine: '',
     // Enable keyboard hotkeys.
-    hotKeys: false
+    hotKeys: false,
+    // Use this object to specify additional settings for the library used by the
+    // plugin (only used in opus-recorder and vmsg plugins).
+    pluginLibraryOptions: {}
 };
 
 export default pluginDefaultOptions;

src/js/engine/record-rtc.js

@@ -59,6 +59,7 @@ class RecordRTCEngine extends RecordEngine {
         // video/canvas settings
         this.engine.video = this.video;
         this.engine.canvas = this.canvas;
+        this.engine.bitrate = this.bitRate;
 
         // animated gif settings
         this.engine.quality = this.quality;

src/js/plugins/lamejs-plugin.js

@@ -14,6 +14,50 @@ const RecordEngine = videojs.getComponent('RecordEngine');
  * @augments RecordEngine
  */
 class LamejsEngine extends RecordEngine {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  {Player} player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+        super(player, options);
+
+        /**
+         * Enables console logging for debugging purposes.
+         *
+         * @type {boolean}
+         */
+        this.debug = false;
+        /**
+         * Specifies the sample rate to encode at.
+         *
+         * @type {number}
+         */
+        this.sampleRate = 44100;
+        /**
+         * Specifies the bitrate in kbps.
+         *
+         * @type {number}
+         */
+        this.bitRate = 128;
+        /**
+         * Path to `worker-realtime.js` worker script.
+         *
+         * @type {string}
+         */
+        this.audioWorkerURL = 'worker-realtime.js';
+        /**
+         * Mime-type for audio output.
+         *
+         * @type {string}
+         */
+        this.audioType = 'audio/mp3';
+    }
+
     /**
      * Setup recording engine.
      *
@@ -27,7 +71,6 @@ class LamejsEngine extends RecordEngine {
         this.inputStream = stream;
         this.mediaType = mediaType;
         this.debug = debug;
-        this.audioType = 'audio/mp3';
 
         this.config = {
             debug: this.debug,

src/js/plugins/libvorbis-plugin.js

@@ -14,6 +14,31 @@ const RecordEngine = videojs.getComponent('RecordEngine');
  * @augments RecordEngine
  */
 class LibVorbisEngine extends RecordEngine {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  {Player} player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+        super(player, options);
+
+        /**
+         * Enables console logging for debugging purposes.
+         *
+         * @type {boolean}
+         */
+        this.debug = false;
+        /**
+         * Specifies the sample rate to encode at.
+         *
+         * @type {number}
+         */
+        this.sampleRate = 32000;
+    }
     /**
      * Setup recording engine.
      *

src/js/plugins/opus-recorder-plugin.js

@@ -16,6 +16,68 @@ const RecordEngine = videojs.getComponent('RecordEngine');
  * @augments RecordEngine
  */
 class OpusRecorderEngine extends RecordEngine {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  {Player} player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+        super(player, options);
+
+        /**
+         * Enables console logging for debugging purposes.
+         *
+         * @type {boolean}
+         */
+        this.debug = false;
+        /**
+         * The number of channels to record. 1 = mono, 2 = stereo.
+         * Maximum 2 channels are supported.
+         *
+         * @type {number}
+         */
+        this.audioChannels = 2;
+        /**
+         * The length of the buffer that the internal `JavaScriptNode`
+         * uses to capture the audio. Can be tweaked if experiencing
+         * performance issues.
+         *
+         * @type {number}
+         */
+        this.bufferSize = 4096;
+        /**
+         * Specifies the sample rate to encode at. Supported values are
+         * 8000, 12000, 16000, 24000 or 48000.
+         *
+         * @type {number}
+         */
+        this.sampleRate = 48000;
+        /**
+         * Path to `encoderWorker.min.js` or `waveWorker.min.js` worker
+         * script.
+         *
+         * @type {string}
+         */
+        this.audioWorkerURL = 'encoderWorker.min.js';
+        /**
+         * Mime-type for audio output. Also supports `audio/wav`; but make sure
+         * to use waveEncoder worker in that case.
+         *
+         * @type {string}
+         */
+        this.audioType = 'audio/ogg';
+        /**
+         * Additional configuration options for the opus-recorder library.
+         *
+         * @type {object}
+         */
+        this.pluginLibraryOptions = {};
+    }
+
     /**
      * Setup recording engine.
      *
@@ -30,19 +92,23 @@ class OpusRecorderEngine extends RecordEngine {
         this.mediaType = mediaType;
         this.debug = debug;
 
-        // also supports 'audio/wav'; but make sure to use waveEncoder worker
-        // in that case
-        this.audioType = 'audio/ogg';
-
-        this.engine = new Recorder({
+        // minimal default config
+        this.config = {
             leaveStreamOpen: true,
             numberOfChannels: this.audioChannels,
             bufferLength: this.bufferSize,
             encoderSampleRate: this.sampleRate,
             encoderPath: this.audioWorkerURL
-        });
+        };
+
+        // extend config with optional options
+        this.config = Object.assign(this.config, this.pluginLibraryOptions);
+
+        // create Recorder engine
+        this.engine = new Recorder(this.config);
         this.engine.ondataavailable = this.onRecordingAvailable.bind(this);
 
+        // create new AudioContext
         let AudioContext = window.AudioContext || window.webkitAudioContext;
         this.audioContext = new AudioContext();
         this.audioSourceNode = this.audioContext.createMediaStreamSource(

src/js/plugins/recorderjs-plugin.js

@@ -14,6 +14,47 @@ const RecordEngine = videojs.getComponent('RecordEngine');
  * @augments RecordEngine
  */
 class RecorderjsEngine extends RecordEngine {
+    /**
+     * Creates an instance of this class.
+     *
+     * @param  {Player} player
+     *         The `Player` that this class should be attached to.
+     *
+     * @param  {Object} [options]
+     *         The key/value store of player options.
+     */
+    constructor(player, options) {
+        super(player, options);
+
+        /**
+         * Enables console logging for debugging purposes.
+         *
+         * @type {boolean}
+         */
+        this.debug = false;
+        /**
+         * The number of channels to record. 1 = mono, 2 = stereo.
+         * Maximum 2 channels are supported.
+         *
+         * @type {number}
+         */
+        this.audioChannels = 2;
+        /**
+         * The length of the buffer that the internal `JavaScriptNode`
+         * uses to capture the audio. Can be tweaked if experiencing
+         * performance issues.
+         *
+         * @type {number}
+         */
+        this.bufferSize = 4096;
+        /**
+         * Mime-type for audio output.
+         *
+         * @type {string}
+         */
+        this.audioType = 'audio/wav';
+    }
+
     /**
      * Setup recording engine.
      *
@@ -36,7 +77,8 @@ class RecorderjsEngine extends RecordEngine {
         // setup recorder.js
         this.engine = new Recorder(this.audioSourceNode, {
             bufferLen: this.bufferSize,
-            numChannels: this.audioChannels
+            numChannels: this.audioChannels,
+            type: this.audioType
         });
     }