Merge b7bb0ee into b2a8b35

collab-project · Jan 30, 2021 · abab008 · abab008
2 parents b2a8b35 + b7bb0ee
commit abab008
Show file tree

Hide file tree

Showing 15 changed files with 321 additions and 21 deletions.
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,11 @@
 
 ## 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)
+- 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/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/examples/plugins/video-only-ffmpegwasm.html b/examples/plugins/video-only-ffmpegwasm.html
@@ -0,0 +1,104 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ffmpeg.wasm video-only example - Record Plugin for Video.js</title>
+
+  <link href="../../node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
+  <link href="../../dist/css/videojs.record.css" rel="stylesheet">
+  <link href="../assets/css/examples.css" rel="stylesheet">
+
+  <script src="../../node_modules/video.js/dist/video.min.js"></script>
+  <script src="../../node_modules/recordrtc/RecordRTC.js"></script>
+  <script src="../../node_modules/webrtc-adapter/out/adapter.js"></script>
+  <script src="../../node_modules/@ffmpeg/ffmpeg/dist/ffmpeg.min.js"></script>
+
+  <script src="../../dist/videojs.record.js"></script>
+  <script src="../../dist/plugins/videojs.record.ffmpeg-wasm.js"></script>
+
+  <script src="../browser-workarounds.js"></script>
+
+  <style>
+  /* change player background color */
+  #myVideo {
+      background-color: #F5BDAB;
+  }
+  </style>
+</head>
+<body>
+
+<video id="myVideo" playsinline class="video-js vjs-default-skin"></video>
+
+<script>
+/* eslint-disable */
+var options = {
+    controls: true,
+    width: 320,
+    height: 240,
+    fluid: false,
+    bigPlayButton: false,
+    controlBar: {
+        volumePanel: false
+    },
+    plugins: {
+        record: {
+            audio: false,
+            video: true,
+            maxLength: 20,
+            debug: true,
+            displayMilliseconds: false,
+            convertEngine: 'ffmpeg.wasm',
+            // convert recorded data to MP3
+            convertOptions: ['-f', 'mp3', '-codec:a', 'libmp3lame', '-qscale:a', '2'],
+            // specify MP3 output mime-type
+            pluginLibraryOptions: {
+                outputType: 'audio/mpeg'
+            },
+            convertWorkerURL: '../../node_modules/@ffmpeg/core/dist/ffmpeg-core.js'
+        }
+    }
+};
+
+// apply some workarounds for opera browser
+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!');
+});
+
+// converter started processing
+player.on('startConvert', function() {
+    console.log('started converting!');
+});
+
+// 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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,14 +74,16 @@
   "dependencies": {
     "recordrtc": ">=5.6.1",
     "video.js": ">=7.0.5",
-    "videojs-wavesurfer": ">=3.3.0",
+    "videojs-wavesurfer": ">=3.4.0",
     "webrtc-adapter": ">=7.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/register": "^7.12.10",
+    "@ffmpeg/core": "^0.8.5",
+    "@ffmpeg/ffmpeg": "^0.9.7",
     "@mattiasbuelens/web-streams-polyfill": "^0.3.2",
     "add-zero": "^1.0.0",
     "babel-loader": "^8.2.2",
@@ -121,7 +123,7 @@
     "lamejs": ">=1.2.0",
     "libvorbis.js": ">=1.1.2",
     "log-timestamp": "^0.3.0",
-    "mini-css-extract-plugin": "^1.3.4",
+    "mini-css-extract-plugin": "^1.3.5",
     "node-fs-extra": "^0.8.2",
     "node-static": "^0.7.11",
     "npm-run-all": "^4.1.5",

diff --git a/src/js/defaults.js b/src/js/defaults.js
@@ -121,8 +121,8 @@ const pluginDefaultOptions = {
     imageOutputQuality: 0.92,
     // Accepts numbers in milliseconds; use this to force intervals-based blobs.
     timeSlice: 0,
-    // Media converter library to use. Legal values are 'ts-ebml' and 'ffmpeg.js'.
-    // Use an empty string '' to disable (default).
+    // Media converter library to use. Legal values are 'ts-ebml', 'ffmpeg.wasm'
+    // and 'ffmpeg.js'. Use an empty string '' to disable (default).
     convertEngine: '',
     // URL for the converter worker.
     convertWorkerURL: '',

diff --git a/src/js/engine/convert-engine.js b/src/js/engine/convert-engine.js
@@ -12,9 +12,10 @@ const Component = videojs.getComponent('Component');
 // supported convert plugin engines
 const TSEBML = 'ts-ebml';
 const FFMPEGJS = 'ffmpeg.js';
+const FFMPEGWASM = 'ffmpeg.wasm';
 
 // all convert plugins
-const CONVERT_PLUGINS = [TSEBML, FFMPEGJS];
+const CONVERT_PLUGINS = [TSEBML, FFMPEGJS, FFMPEGWASM];
 
 /**
  * Base class for converter backends.
@@ -76,5 +77,5 @@ videojs.ConvertEngine = ConvertEngine;
 Component.registerComponent('ConvertEngine', ConvertEngine);
 
 export {
-    ConvertEngine, CONVERT_PLUGINS, TSEBML, FFMPEGJS
+    ConvertEngine, CONVERT_PLUGINS, TSEBML, FFMPEGJS, FFMPEGWASM
 };
diff --git a/src/js/engine/engine-loader.js b/src/js/engine/engine-loader.js
@@ -6,7 +6,7 @@
 import videojs from 'video.js';
 
 import RecordRTCEngine from './record-rtc';
-import {CONVERT_PLUGINS, TSEBML, FFMPEGJS} from './convert-engine';
+import {CONVERT_PLUGINS, TSEBML, FFMPEGJS, FFMPEGWASM} from './convert-engine';
 import {RECORDRTC, LIBVORBISJS, RECORDERJS, LAMEJS, OPUSRECORDER, OPUSMEDIARECORDER, VMSG, WEBMWASM, AUDIO_PLUGINS} from './record-engine';
 
 /**
@@ -124,6 +124,11 @@ const getConvertEngine = function(convertEngine) {
             ConvertEngineClass = videojs.FFmpegjsEngine;
             break;
 
+        case FFMPEGWASM:
+            // ffmpeg.wasm
+            ConvertEngineClass = videojs.FFmpegWasmEngine;
+            break;
+
         default:
             // unknown engine
             throw new Error('Unknown convertEngine: ' + convertEngine);