v4.0 (#474)

* bump required version for video.js (7.0.5) and videojs-wavesurfer (3.2.0) * update examples for videojs-wavesurfer 3.x * update tests config for videojs-wavesurfer 3.x * update changelog * build: adjust config for copy-webpack-plugin update * bump required version for recordrtc to 5.6.1 * fix milliseconds in formatTime (#443) * replace msDisplayMax with displayMilliseconds option * add exportImage * add mime module * fix mime-type for lamejs plugin * doc: add multi example * ci: disable firefox for now * ask again for device permissions in Firefox when user cleared them manually (#468) * audio+screen: add missing error handler * add optional fileExtension param * update dev dependencies
collab-project · May 19, 2020 · a36ba88 · a36ba88
1 parent 3f0aa39
commit a36ba88
Show file tree

Hide file tree

Showing 103 changed files with 2,060 additions and 697 deletions.
diff --git a/.htmlhintrc b/.htmlhintrc
@@ -0,0 +1,12 @@
+{
+    "tagname-lowercase": true,
+    "attr-lowercase": true,
+    "attr-value-double-quotes": false,
+    "doctype-first": true,
+    "tag-pair": true,
+    "spec-char-escape": true,
+    "id-unique": true,
+    "src-not-empty": true,
+    "attr-no-duplication": true,
+    "title-require": true
+}
diff --git a/.travis.yml b/.travis.yml
@@ -28,7 +28,7 @@ install:
 script:
   - npm run lint || travis_terminate 1
   - npm run build || travis_terminate 1
-  - npm run test || travis_terminate 1
+  - npm run test
   - npm run docs || travis_terminate 1
 
 cache: npm
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,9 +1,29 @@
 # videojs-record changelog
 
-## 3.12.0 - unreleased
-
-- Add compatibility for video.js 7.7.6 and newer (#465)
+## 4.0.0 - unreleased
+
+- Add ability to grab waveform (audio-only) or video frame data using
+  `exportImage` (#417)
+- Fix file extension for `video/x-matroska` mime-type (#464, #469)
+- Fix milliseconds in `formatTime` (#443)
+- Ask again for device permissions in Firefox when user cleared them
+  manually (#468)
+- Fixed missing error handler for microphone permissions in audio/screen
+  mode (#463)
 - Move documentation to website (#472)
+- Bump required version for:
+  - video.js (7.0.5 or newer)
+  - videojs-wavesurfer (3.2.0 or newer)
+  - recordrtc (5.6.1 or newer)
+- Add compatibility for video.js 7.7.6 and newer (#465)
+- Fix mime-type for lamejs plugin
+
+**Backwards-incompatible changes** (when upgrading from a previous version):
+
+- Configuration for microphone/audio-only has changed (due to videojs-wavesurfer upgrade):
+  - Specify `backend: 'WebAudio'` instead of `src: 'live'`
+  - Enable the wavesurfer.js microphone plugin using the `plugins` object of
+    the `wavesurfer` plugin config
 
 
 ## 3.11.0 - 2020/03/02

diff --git a/build-config/fragments/main.js b/build-config/fragments/main.js
@@ -11,14 +11,17 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const rootDir = path.resolve(__dirname, '..', '..');
 
 // copy fonts to dist
-let copyFontsPlugin = new CopyWebpackPlugin([
-    {
+let copyFontsPlugin = new CopyWebpackPlugin({
+    patterns: [{
         from: 'src/fonts/*',
         to: 'fonts',
         flatten: true,
-        ignore: ['*.json', '*.md']
-    }
-]);
+        globOptions: {
+            dot: false,
+            ignore: ['**/*.json', '**/*.md']
+        }
+    }]
+});
 
 module.exports = {
     entry: {

diff --git a/docs/controls.md b/docs/controls.md
@@ -4,11 +4,26 @@ To disable and hide specific controls, use the video.js `controlBar`
 option:
 
 ```javascript
-controlBar: {
-    // hide fullscreen and volume controls
-    fullscreenToggle: false,
-    volumePanel: false
-}
+let options = {
+    controls: true,
+    bigPlayButton: false,
+    controlBar: {
+        // hide fullscreen and volume controls
+        fullscreenToggle: false,
+        volumePanel: false
+    },
+    width: 320,
+    height: 240,
+    plugins: {
+        // videojs-record plugin options
+        record: {
+            audio: false,
+            video: true,
+            maxLength: 5,
+            debug: true
+        }
+    }
+};
 ```
 
 Custom interface elements for this library that can be hidden are:

diff --git a/docs/demo/animated-gif.html b/docs/demo/animated-gif.html
@@ -38,6 +38,7 @@
     controls: true,
     width: 320,
     height: 240,
+    bigPlayButton: false,
     controlBar: {
         volumePanel: false,
         fullscreenToggle: false

diff --git a/docs/demo/audio-only-ffmpegjs.html b/docs/demo/audio-only-ffmpegjs.html
@@ -5,7 +5,7 @@
   <title>ffmpeg.js Audio-only Example - Record Plugin for Video.js</title>
 
   <link href="//vjs.zencdn.net/7.6.6/video-js.min.css" rel="stylesheet">
-  <link href="//unpkg.com/videojs-wavesurfer@2.11.0/dist/css/videojs.wavesurfer.min.css" rel="stylesheet">
+  <link href="//unpkg.com/videojs-wavesurfer/dist/css/videojs.wavesurfer.min.css" rel="stylesheet">
   <link href="//unpkg.com/videojs-record/dist/css/videojs.record.min.css" rel="stylesheet">
   <link href="assets/examples.css" rel="stylesheet">
 
@@ -15,7 +15,7 @@
 
   <script src="//unpkg.com/wavesurfer.js/dist/wavesurfer.min.js"></script>
   <script src="//unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js"></script>
-  <script src="//unpkg.com/videojs-wavesurfer@2.11.0/dist/videojs.wavesurfer.min.js"></script>
+  <script src="//unpkg.com/videojs-wavesurfer/dist/videojs.wavesurfer.min.js"></script>
 
   <script src="//unpkg.com/videojs-record/dist/videojs.record.min.js"></script>
   <script src="//unpkg.com/videojs-record/dist/plugins/videojs.record.ffmpegjs.min.js"></script>
@@ -36,24 +36,37 @@
 <script>
 var options = {
     controls: true,
+    bigPlayButton: false,
     width: 600,
     height: 300,
     plugins: {
         wavesurfer: {
-            src: 'live',
+            backend: 'WebAudio',
             waveColor: '#f5f06e',
             progressColor: '#FAFCD2',
             cursorColor: '#FFFFFF',
             debug: true,
             cursorWidth: 1,
-            msDisplayMax: 20,
-            hideScrollbar: true
+            hideScrollbar: true,
+            plugins: [
+                // enable microphone plugin
+                WaveSurfer.microphone.create({
+                    bufferSize: 4096,
+                    numberOfInputChannels: 1,
+                    numberOfOutputChannels: 1,
+                    constraints: {
+                        video: false,
+                        audio: true
+                    }
+                })
+            ]
         },
         record: {
             audio: true,
             video: false,
             maxLength: 20,
             debug: true,
+            displayMilliseconds: true,
             convertEngine: 'ffmpeg.js',
             // convert recorded data to MP3
             convertOptions: ['-f', 'mp3', '-codec:a', 'libmp3lame', '-qscale:a', '2'],

diff --git a/docs/demo/audio-only-lamejs.html b/docs/demo/audio-only-lamejs.html
@@ -5,7 +5,7 @@
   <title>Lamejs Audio-only Example - Record Plugin for Video.js</title>
 
   <link href="//vjs.zencdn.net/7.6.6/video-js.min.css" rel="stylesheet">
-  <link href="//unpkg.com/videojs-wavesurfer@2.11.0/dist/css/videojs.wavesurfer.min.css" rel="stylesheet">
+  <link href="//unpkg.com/videojs-wavesurfer/dist/css/videojs.wavesurfer.min.css" rel="stylesheet">
   <link href="//unpkg.com/videojs-record/dist/css/videojs.record.min.css" rel="stylesheet">
   <link href="assets/examples.css" rel="stylesheet">
 
@@ -14,7 +14,7 @@
 
   <script src="//unpkg.com/wavesurfer.js/dist/wavesurfer.min.js"></script>
   <script src="//unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js"></script>
-  <script src="//unpkg.com/videojs-wavesurfer@2.11.0/dist/videojs.wavesurfer.min.js"></script>
+  <script src="//unpkg.com/videojs-wavesurfer/dist/videojs.wavesurfer.min.js"></script>
 
   <script src="//unpkg.com/videojs-record/dist/videojs.record.min.js"></script>
   <script src="//unpkg.com/videojs-record/dist/plugins/videojs.record.lamejs.min.js"></script>
@@ -33,23 +33,37 @@
 <script>
 var options = {
     controls: true,
+    bigPlayButton: false,
     width: 600,
     height: 300,
     plugins: {
         wavesurfer: {
-            src: 'live',
+            backend: 'WebAudio',
             waveColor: '#fffa00',
             progressColor: '#FAFCD2',
+            cursorColor: '#fffa00',
             debug: true,
             cursorWidth: 1,
-            msDisplayMax: 20,
-            hideScrollbar: true
+            hideScrollbar: true,
+            plugins: [
+                // enable microphone plugin
+                WaveSurfer.microphone.create({
+                    bufferSize: 4096,
+                    numberOfInputChannels: 1,
+                    numberOfOutputChannels: 1,
+                    constraints: {
+                        video: false,
+                        audio: true
+                    }
+                })
+            ]
         },
         record: {
             audio: true,
             video: false,
             maxLength: 20,
             debug: true,
+            displayMilliseconds: true,
             audioEngine: 'lamejs',
             audioWorkerURL: 'lib/lamejs/worker-example/worker-realtime.js',
             audioSampleRate: 44100,

diff --git a/docs/demo/audio-only-mp3.html b/docs/demo/audio-only-mp3.html
@@ -5,7 +5,7 @@
   <title>vmsg Audio-only Example - Record Plugin for Video.js</title>
 
   <link href="//vjs.zencdn.net/7.6.6/video-js.min.css" rel="stylesheet">
-  <link href="//unpkg.com/videojs-wavesurfer@2.11.0/dist/css/videojs.wavesurfer.min.css" rel="stylesheet">
+  <link href="//unpkg.com/videojs-wavesurfer/dist/css/videojs.wavesurfer.min.css" rel="stylesheet">
   <link href="//unpkg.com/videojs-record/dist/css/videojs.record.min.css" rel="stylesheet">
   <link href="assets/examples.css" rel="stylesheet">
 
@@ -14,7 +14,7 @@
 
   <script src="//unpkg.com/wavesurfer.js/dist/wavesurfer.min.js"></script>
   <script src="//unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js"></script>
-  <script src="//unpkg.com/videojs-wavesurfer@2.11.0/dist/videojs.wavesurfer.min.js"></script>
+  <script src="//unpkg.com/videojs-wavesurfer/dist/videojs.wavesurfer.min.js"></script>
 
   <script src="//unpkg.com/videojs-record/dist/videojs.record.min.js"></script>
   <script src="//unpkg.com/videojs-record/dist/plugins/videojs.record.vmsg.min.js"></script>
@@ -33,23 +33,36 @@
 <script>
 var options = {
     controls: true,
+    bigPlayButton: false,
     width: 600,
     height: 300,
     plugins: {
         wavesurfer: {
-            src: 'live',
+            backend: 'WebAudio',
             waveColor: '#fffa00',
             progressColor: '#FAFCD2',
             debug: true,
             cursorWidth: 1,
-            msDisplayMax: 20,
-            hideScrollbar: true
+            hideScrollbar: true,
+            plugins: [
+                // enable microphone plugin
+                WaveSurfer.microphone.create({
+                    bufferSize: 4096,
+                    numberOfInputChannels: 1,
+                    numberOfOutputChannels: 1,
+                    constraints: {
+                        video: false,
+                        audio: true
+                    }
+                })
+            ]
         },
         record: {
             audio: true,
             video: false,
             maxLength: 20,
             debug: true,
+            displayMilliseconds: true,
             audioEngine: 'vmsg',
             audioWebAssemblyURL: 'lib/vmsg/vmsg.wasm'
             // use the pluginLibraryOptions option to specify optional settings for the

diff --git a/docs/demo/audio-only-ogg.html b/docs/demo/audio-only-ogg.html
@@ -5,7 +5,7 @@
   <title>Libvorbis Audio-only Example - Record Plugin for Video.js</title>
 
   <link href="//vjs.zencdn.net/7.6.6/video-js.min.css" rel="stylesheet">
-  <link href="//unpkg.com/videojs-wavesurfer@2.11.0/dist/css/videojs.wavesurfer.min.css" rel="stylesheet">
+  <link href="//unpkg.com/videojs-wavesurfer/dist/css/videojs.wavesurfer.min.css" rel="stylesheet">
   <link href="//unpkg.com/videojs-record/dist/css/videojs.record.min.css" rel="stylesheet">
   <link href="assets/examples.css" rel="stylesheet">
 
@@ -14,7 +14,7 @@
   <script src="lib/libvorbis.js/libvorbis.min.js"></script>
   <script src="//unpkg.com/wavesurfer.js/dist/wavesurfer.min.js"></script>
   <script src="//unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js"></script>
-  <script src="//unpkg.com/videojs-wavesurfer@2.11.0/dist/videojs.wavesurfer.min.js"></script>
+  <script src="//unpkg.com/videojs-wavesurfer/dist/videojs.wavesurfer.min.js"></script>
 
   <script src="//unpkg.com/videojs-record/dist/videojs.record.min.js"></script>
   <script src="//unpkg.com/videojs-record/dist/plugins/videojs.record.libvorbis.min.js"></script>
@@ -33,24 +33,37 @@
 <script>
 var options = {
     controls: true,
+    bigPlayButton: false,
     width: 600,
     height: 300,
     fluid: false,
     plugins: {
         wavesurfer: {
-            src: 'live',
+            backend: 'WebAudio',
             waveColor: '#16425b',
             progressColor: '#3a7ca5',
             debug: true,
             cursorWidth: 1,
-            msDisplayMax: 20,
-            hideScrollbar: true
+            hideScrollbar: true,
+            plugins: [
+                // enable microphone plugin
+                WaveSurfer.microphone.create({
+                    bufferSize: 4096,
+                    numberOfInputChannels: 1,
+                    numberOfOutputChannels: 1,
+                    constraints: {
+                        video: false,
+                        audio: true
+                    }
+                })
+            ]
         },
         record: {
             audio: true,
             video: false,
             maxLength: 20,
             debug: true,
+            displayMilliseconds: true,
             audioEngine: 'libvorbis.js',
             audioSampleRate: 32000
         }