collab-project · thijstriemstra · Jan 31, 2021 · Nov 14, 2020 · Nov 14, 2020 · Nov 14, 2020
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -36,6 +36,8 @@ jobs:
           ${{ runner.OS }}-
     - name: Install Node.js modules
       run: npm ci
+    - name: Lint
+      run: npm run lint
     - name: Build
       run: npm run build
     - name: Test

diff --git a/CHANGES.md b/CHANGES.md
@@ -2,8 +2,12 @@
 
 ## 4.2.0 - unreleased
 
-- New opus-media-recorder plugin: provides cross-browser Opus codec support with
-  various audio formats such as Ogg and WebM (#355)
+- New ffmpeg.wasm converter plugin: convert recorded data into other
+  audio/video/image file formats (#522)
+- New opus-media-recorder plugin: provides cross-browser Opus codec
+  support for various audio formats such as Ogg and WebM (#355)
+- ffmpeg.js plugin is deprecated; use new ffmpeg.wasm plugin instead
+- Bump required version for videojs-wavesurfer (3.4.0 or newer)
 
 
 ## 4.1.1 - 2020/11/01

diff --git a/build-config/fragments/dev.js b/build-config/fragments/dev.js
@@ -56,6 +56,16 @@ module.exports = {
             console.log(colors.green(' [examples] wasm mime-type handler ready'));
             console.log('');
 
+            // ========================================================
+            // use proper headers for SharedArrayBuffer on Firefox
+            // see https://github.com/ffmpegwasm/ffmpeg.wasm/issues/102
+            // ========================================================
+            app.use((req, res, next) => {
+                res.header('Cross-Origin-Opener-Policy', 'same-origin');
+                res.header('Cross-Origin-Embedder-Policy', 'require-corp');
+                next();
+            });
+
             // =============================================
             // file upload handler for simple upload example
             // =============================================

diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -34,6 +34,7 @@
   - [UmiJS](frameworks/umijs.md)
 
 - Plugins
+  - [ffmpeg.wasm](plugins/ffmpeg.wasm.md)
   - [ffmpeg.js](plugins/ffmpeg.js.md)
   - [ts-ebml](plugins/ts-ebml.md)
   - [webm-wasm](plugins/webm-wasm.md)

diff --git a/docs/demo/video-only-ffmpegwasm.html b/docs/demo/video-only-ffmpegwasm.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ffmpeg.wasm video-only example - Record Plugin for Video.js</title>
+
+  <link href="//vjs.zencdn.net/7.10.2/video-js.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">
+
+  <script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
+  <script src="//unpkg.com/recordrtc/RecordRTC.js"></script>
+  <script src="//unpkg.com/webrtc-adapter/out/adapter.js"></script>
+  <script src="//unpkg.com/@ffmpeg/ffmpeg/dist/ffmpeg.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.ffmpeg-wasm.js"></script>
+
+  <script src="browser-workarounds.js"></script>
+
+  <style>
+  /* change player background color */
+  #myVideo {
+      background-color: #54a86b;
+  }
+  </style>
+</head>
+<body>
+
+<video id="myVideo" playsinline class="video-js vjs-default-skin"></video>
+
+<script>
+var options = {
+    controls: true,
+    width: 320,
+    height: 240,
+    fluid: false,
+    bigPlayButton: false,
+    controlBar: {
+        volumePanel: false
+    },
+    plugins: {
+        record: {
+            audio: false,
+            video: true,
+            maxLength: 20,
+            displayMilliseconds: true,
+            debug: true,
+            convertEngine: 'ffmpeg.wasm',
+            convertWorkerURL: '//unpkg.com/@ffmpeg/core/dist/ffmpeg-core.js',
+            // convert recorded data to MP4 (and copy over audio data without encoding)
+            convertOptions: ['-c:v', 'libx264', '-preset', 'slow', '-crf', '22', '-c:a', 'copy', '-f', 'mp4'],
+            // specify output mime-type
+            pluginLibraryOptions: {
+                outputType: 'video/mp4'
+            }
+        }
+    }
+};
+
+// apply some workarounds for certain browsers
+applyVideoWorkaround();
+
+var player = videojs('myVideo', options, function() {
+    // print version information at startup
+    videojs.log('Using video.js', videojs.VERSION,
+        'with videojs-record', videojs.getPluginVersion('record'),
+        'and recordrtc', RecordRTC.version);
+});
+// error handling
+player.on('deviceError', function() {
+    console.log('device error:', player.deviceErrorCode);
+});
+
+player.on('error', function(element, error) {
+    console.error(error);
+});
+
+// user clicked the record button and started recording
+player.on('startRecord', function() {
+    console.log('started recording!');
+});
+
+// user completed recording and stream is available
+player.on('finishRecord', function() {
+    // the blob object contains the recorded data that
+    // can be downloaded by the user, stored on server etc.
+    console.log('finished recording: ', player.recordedData);
+});
+
+// converter completed and stream is available
+player.on('finishConvert', function() {
+    // the convertedData object contains the recorded data that
+    // can be downloaded by the user, stored on server etc.
+    console.log('finished converting: ', player.convertedData);
+});
+</script>
+</body>
+</html>
diff --git a/docs/dependencies.md b/docs/dependencies.md
@@ -40,4 +40,5 @@ Optional dependencies when using other [video plugins](plugins#video):
 Optional dependencies when using [converter plugins](plugins#converter):
 
 - [ts-ebml](plugins/ts-ebml.md) - Creates seekable WebM files, by injecting metadata like duration.
-- [ffmpeg.js](plugins/ffmpeg.js.md) - Run [FFmpeg](https://ffmpeg.org) in the browser and perform on-the-fly transcoding of recorded data.
+- [ffmpeg.wasm](plugins/ffmpeg.wasm.md) - Run [FFmpeg](https://ffmpeg.org) in the browser and perform on-the-fly transcoding of recorded data.
+- [ffmpeg.js](plugins/ffmpeg.js.md) - Deprecated FFmpeg plugin.
diff --git a/docs/options.md b/docs/options.md
@@ -34,7 +34,7 @@ Additional options for this plugin are:
 | `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). |
+| `videoWorkerURL` | string | `''` | URL for the video worker, for example: `../node_modules/webm-wasm/dist/webm-worker.js`. Currently only used for the 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`,  `opus-media-recorder`, `lamejs` and `recorder.js`. |
 | `audioRecorderType` | string or function | `'auto'` | Audio recorder type to use. This allows you to specify an alternative recorder class, e.g. `StereoAudioRecorder`. Defaults to `auto` which let's recordrtc specify the best available recorder type. Currently this setting is only used with the `recordrtc` `audioEngine`. |
@@ -48,8 +48,8 @@ Additional options for this plugin are:
 | `audioBufferUpdate` | boolean | `false` | Enables the `audioBufferUpdate` event that provides real-time `AudioBuffer` instances from the input audio device. |
 | `animationFrameRate` | float | `200` | Frame rate for animated GIF (in frames per second). |
 | `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` and `ffmpeg.js`. Use an empty string `''` to disable (default). Inspect the [player.convertedData](recorded-data#convert-data) object for the converted data. |
-| `convertWorkerURL` | string | `''` | URL for the converter worker, for example: `/node_modules/ffmpeg.js/ffmpeg-worker-mp4.js`. Currently only used for ffmpeg.js plugin. Use an empty string '' to disable (default). |
+| `convertEngine` | string | `''` | Media converter library to use. Legal values are `ts-ebml`, `ffmpeg.wasm` and `ffmpeg.js`. Use an empty string `''` to disable (default). Inspect the [player.convertedData](recorded-data#convert-data) object for the converted data. |
+| `convertWorkerURL` | string | `''` | URL for the converter worker, for example: `/node_modules/ffmpeg.js/ffmpeg-worker-mp4.js`. Currently only used for ffmpeg.wasm and ffmpeg.js plugins. Use an empty string '' to disable (default). |
 | `convertOptions` | array | `[]` | List of string options to pass to the convert engine. |
 | `hotKeys` | boolean or function | `false` | Enable [keyboard hotkeys](hotkeys.md). 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. |
+| `pluginLibraryOptions` | object | `{}` | Use this object to specify additional settings for the library used by the plugin. Currently only used for the ffmpeg.wasm, ffmpeg.js, opus-recorder and vmsg plugins. |
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -34,6 +34,8 @@
     "url": "git+https://github.com/collab-project/videojs-record.git"
   },
   "dependencies": {
+    "@ffmpeg/core": "^0.8.5",
+    "@ffmpeg/ffmpeg": "^0.9.7",
     "ffmpeg.js": "^4.2.9003",
     "lamejs": "^1.2.0",
     "libvorbis.js": "^1.1.2",

diff --git a/docs/plugins.md b/docs/plugins.md
@@ -9,7 +9,8 @@ following plugins:
 
 | Plugin | Description |
 | --- | --- |
-| [ffmpeg.js](plugins/ffmpeg.js.md) | Run [FFmpeg](https://ffmpeg.org) in the browser and perform on-the-fly transcoding of recorded data. |
+| [ffmpeg.wasm](plugins/ffmpeg.wasm.md) | Run [FFmpeg](https://ffmpeg.org) in the browser and perform on-the-fly transcoding of recorded data. |
+| [ffmpeg.js](plugins/ffmpeg.js.md) | Deprecated FFmpeg plugin. |
 | [ts-ebml](plugins/ts-ebml.md) | Creates seekable WebM files, by injecting metadata like duration. |
 
 ## Video

diff --git a/docs/plugins/ffmpeg.js.md b/docs/plugins/ffmpeg.js.md
@@ -1,5 +1,7 @@
 # ffmpeg.js plugin
 
+Note: this plugin is deprecated, use the [ffmpeg.wasm](ffmpeg.wasm.md) plugin instead.
+
 [FFmpeg](https://ffmpeg.org) is the Swiss-army knife of media transcoding. This plugin allows
 you to run FFmpeg in the browser and perform on-the-fly transcoding of recorded data.
 

diff --git a/docs/plugins/ffmpeg.wasm.md b/docs/plugins/ffmpeg.wasm.md
@@ -0,0 +1,63 @@
+# ffmpeg.wasm plugin
+
+[FFmpeg](https://ffmpeg.org) is the Swiss-army knife of media transcoding. This plugin allows
+you to run FFmpeg in the browser and perform on-the-fly transcoding of recorded data.
+
+This plugin uses [ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm) that provides a
+Webassembly / Javascript port of FFmpeg.
+
+## Example
+
+- [online demo](https://collab-project.github.io/videojs-record/demo/video-only-ffmpegwasm.html)
+- [demo source](https://github.com/collab-project/videojs-record/blob/master/examples/plugins/video-only-ffmpegwasm.html)
+
+## Usage
+
+Install the library:
+
+```console
+npm install --save @ffmpeg/ffmpeg @ffmpeg/core
+```
+
+Include the library and place it before any other scripts:
+
+```html
+<script src="@ffmpeg/ffmpeg/dist/ffmpeg.min.js"></script>
+```
+
+Import the plugin:
+
+```javascript
+import FFmpegWasmEngine from 'videojs-record/dist/plugins/videojs.record.ffmpeg-wasm.js';
+```
+
+And configure the `ffmpeg.wasm` `convertEngine`. For example:
+
+```javascript
+record: {
+    audio: true,
+    video: true,
+    maxLength: 20,
+    debug: true,
+    // enable ffmpeg.wasm plugin
+    convertEngine: 'ffmpeg.wasm',
+    convertWorkerURL: '../../node_modules/@ffmpeg/core/dist/ffmpeg-core.js',
+    // convert recorded data to MP4 (and copy over audio data without encoding)
+    convertOptions: ['-c:v', 'libx264', '-preset', 'slow', '-crf', '22', '-c:a', 'copy', '-f', 'mp4'],
+    // specify output mime-type
+    pluginLibraryOptions: {
+        outputType: 'video/mp4'
+    }
+}
+```
+
+## Options
+
+Options for this plugin:
+
+| Option | Value | Description |
+| --- | --- | --- |
+| `convertEngine` | `ffmpeg.wasm` | Enables the plugin. |
+| `convertOptions` | `['-f', 'mp3', '-codec:a', 'libmp3lame', '-qscale:a', '2']` | Array of arguments for FFmpeg. |
+| `pluginLibraryOptions` | `{outputType: 'video/mp4'}` | Specify output mime-type and other options. |
+| `convertWorkerURL` | `/path/to/@ffmpeg/core/dist/ffmpeg-core.js` | Specify encoding worker. |
diff --git a/docs/recorded-data.md b/docs/recorded-data.md
@@ -15,7 +15,7 @@ player.on('finishRecord', function() {
 ## Save data
 
 Use the `saveAs` method to show a 'Save as' browser dialog where the user can
-choose the storage location for the recorded data. It accepts a `name` object that
+choose the storage location for the recorded data. It accepts an object that
 contains a mapping between the media type and the filename. For example:
 
 ```javascript
@@ -48,7 +48,7 @@ record: {
 }
 ```
 
-And listen for the `finishConvert` event. For example:
+And listen for the `finishConvert` event:
 
 ```javascript
 // converter ready and stream is available