collab-project · thijstriemstra · Sep 29, 2018 · Sep 29, 2018 · Sep 30, 2018 · Sep 30, 2018
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,5 +1,15 @@
 # videojs-record changelog
 
+## x.x.x - unreleased
+
+- New gifshot plugin: improved animated GIF support (#291)
+
+**Backwards-incompatible changes** (when upgrading from a previous version):
+
+- Support for animated GIF recording using RecordRTC was removed and replaced
+  with a new plugin using the Gifshot library (#291)
+
+
 ## 4.2.0 - unreleased
 
 - New ffmpeg.wasm converter plugin: convert recorded data into other

diff --git a/build-config/fragments/common.js b/build-config/fragments/common.js
@@ -72,6 +72,13 @@ module.exports = {
             commonjs2: 'recordrtc',
             amd: 'recordrtc',
             root: 'RecordRTC' // indicates global variable
+        },
+        // plugins
+        'gifshot': {
+            commonjs: 'gifshot',
+            commonjs2: 'gifshot',
+            amd: 'gifshot',
+            root: 'gifshot' // indicates global variable
         }
     },
     module: {

diff --git a/examples/animated-gif.html b/examples/animated-gif.html
@@ -9,29 +9,30 @@
   <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="//cdn.webrtc-experiment.com/gif-recorder.js"></script>
   <script src="../node_modules/webrtc-adapter/out/adapter.js"></script>
+  <script src="../node_modules/gifshot/dist/gifshot.js"></script>
 
   <script src="../dist/videojs.record.js"></script>
+  <script src="../dist/plugins/videojs.record.gifshot.js"></script>
 
   <style>
   /* change player background color */
-  #myVideo {
+  #myAnimation {
       background-color: #4ecdc4;
   }
   </style>
 </head>
 <body>
 
-<video id="myVideo" playsinline class="video-js vjs-default-skin"></video>
+<video id="myAnimation" playsinline class="video-js vjs-default-skin"></video>
 
 <script>
 /* eslint-disable */
+var clipDuration = 5;
 var options = {
     controls: true,
-    width: 320,
-    height: 240,
+    width: 240,
+    height: 180,
     fluid: false,
     bigPlayButton: false,
     controlBar: {
@@ -41,19 +42,31 @@
     plugins: {
         record: {
             animation: true,
-            animationQuality: 20,
-            animationFrameRate: 200,
-            maxLength: 5,
+            // options for gifshot library
+            animationOptions: {
+             // The amount of time (in seconds) to wait between each frame capture
+                interval: 0.1,
+                // The number of frames to use to create the animated GIF
+                // Note: Each frame is captured every 100 milliseconds of a video and every ms for existing images
+                //'numFrames': 10,
+                numFrames: (clipDuration * 1000) / 100,
+                // The amount of time (10 = 1s) to stay on each frame
+                frameDuration: 1,
+                // CSS filter that will be applied to the image, e.g. 'grayscale(100%)'
+                filter: ''
+            },
+            maxLength: clipDuration,
+            msDisplayMax: 2,
             debug: true
         }
     }
 };
 
-var player = videojs('myVideo', options, function() {
+var player = videojs('myAnimation', options, function() {
     // print version information at startup
     var msg = 'Using video.js ' + videojs.VERSION +
         ' with videojs-record ' + videojs.getPluginVersion('record') +
-        ' and recordrtc ' + RecordRTC.version;
+        ' and gifshot ' + gifshot.VERSION;
     videojs.log(msg);
 });
 
@@ -77,6 +90,7 @@
     // can be downloaded by the user, stored on server etc.
     console.log('finished recording: ', player.recordedData);
 });
+
 </script>
 
 </body>

diff --git a/karma.conf.js b/karma.conf.js
@@ -38,6 +38,7 @@ const chromeFlags = [
     '--enable-experimental-web-platform-features',
     '--js-flags=--max-old-space-size=8196'
 ];
+
 //-------------------------------------------
 // Firefox CLI options
 //-------------------------------------------
@@ -138,8 +139,8 @@ module.exports = function(config) {
             // ffmpeg.wasm
             {pattern: 'node_modules/@ffmpeg/ffmpeg/dist/ffmpeg.min.js', included: false, served: true},
             {pattern: 'node_modules/@ffmpeg/core/dist/ffmpeg-core.js', included: false, served: true},
-            // gif-recorder: only available on CDN
-            'http://cdn.webrtc-experiment.com/gif-recorder.js',
+            // gifshot
+            'node_modules/gifshot/dist/gifshot.min.js',
 
             // -------------------------------------------
             // specs
@@ -163,6 +164,7 @@ module.exports = function(config) {
             // do not include tests or libraries
             'src/js/**/*.js': ['coverage']
         },
+        webpack: webpackConfig,
         webpackMiddleware: {
             stats: 'errors-only'
         },
@@ -245,7 +247,6 @@ module.exports = function(config) {
                 { type: 'lcov', subdir: 'lcov' }
             ]
         },
-        webpack: webpackConfig,
         customLaunchers: {
             Chrome_dev: {
                 base: 'Chrome',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -104,6 +104,7 @@
     "file-loader": "^6.2.0",
     "fine-uploader": ">=5.16",
     "formidable": "^1.2.2",
+    "gifshot": ">=0.4.5",
     "fs-extra": "^9.1.0",
     "host-environment": "^2.1.2",
     "htmlhint": "^0.14.2",

diff --git a/src/js/controls/animation-display.js b/src/js/controls/animation-display.js
@@ -8,7 +8,7 @@ import videojs from 'video.js';
 const Component = videojs.getComponent('Component');
 
 /**
- * Image for displaying animated GIF image.
+ * Component for displaying animated GIF images.
  *
  * @class
  * @augments videojs.Component
@@ -27,6 +27,17 @@ class AnimationDisplay extends Component {
             innerHTML: '<img />'
         });
     }
+
+    /**
+     * Set `src` of image element.
+     *
+     * @param {object} data - TODO
+     */
+    load(data) {
+        let img = this.el().firstChild;
+
+        img.src = data;
+    }
 }
 
 Component.registerComponent('AnimationDisplay', AnimationDisplay);

diff --git a/src/js/controls/record-canvas.js b/src/js/controls/record-canvas.js
@@ -8,7 +8,7 @@ import videojs from 'video.js';
 const Component = videojs.getComponent('Component');
 
 /**
- * Canvas for displaying snapshot image.
+ * Component for displaying images on a `canvas` element.
  *
  * @class
  * @augments videojs.Component
@@ -27,6 +27,49 @@ class RecordCanvas extends Component {
             innerHTML: '<canvas></canvas>'
         });
     }
+
+    /**
+     * Clear the `RecordCanvas`s `canvas` element.
+     */
+    clear() {
+        let canvas = this.el().firstChild;
+
+        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+    }
+
+    /**
+     * Draw `ImageData` frame onto `canvas` element.
+     *
+     * @param {ImageData} [imgData] - ImageData to draw onto canvas.
+     */
+    drawFrame(imgData) {
+        let canvas = this.el().firstChild;
+
+        // set the image size to the dimensions of the recorded animation
+        canvas.width = imgData.width;
+        canvas.height = imgData.height;
+
+        canvas.getContext('2d').putImageData(
+            imgData, 0, 0, 0, 0,
+            imgData.width,
+            imgData.height
+        );
+    }
+
+    /**
+     * Draw image onto `canvas` element.
+     *
+     * @param {HTMLElement} [element] - HTML element to draw onto canvas.
+     */
+    drawImage(element) {
+        let canvas = this.el().firstChild;
+
+        canvas.getContext('2d').drawImage(
+            element, 0, 0,
+            canvas.width,
+            canvas.height
+        );
+    }
 }
 
 Component.registerComponent('RecordCanvas', RecordCanvas);

diff --git a/src/js/defaults.js b/src/js/defaults.js
@@ -11,7 +11,7 @@ const pluginDefaultOptions = {
     audio: false,
     // Include video in the recorded clip.
     video: false,
-    // Animated GIF.
+    // Animated GIF using the gifshot library.
     animation: false,
     // Screen capture.
     screen: false,
@@ -100,6 +100,8 @@ const pluginDefaultOptions = {
     // Enables the audioBufferUpdate event that provides realtime AudioBuffer
     // instances from the input audio device.
     audioBufferUpdate: false,
+    // Options for animated GIFs using the gifshot library.
+    animationOptions: {},
     // Frame rate in frames per second.
     animationFrameRate: 200,
     // Sets quality of color quantization (conversion of images to the

diff --git a/src/js/engine/engine-loader.js b/src/js/engine/engine-loader.js
@@ -7,7 +7,7 @@ import videojs from 'video.js';
 
 import RecordRTCEngine from './record-rtc';
 import {CONVERT_PLUGINS, TSEBML, FFMPEGJS, FFMPEGWASM} from './convert-engine';
-import {RECORDRTC, LIBVORBISJS, RECORDERJS, LAMEJS, OPUSRECORDER, OPUSMEDIARECORDER, VMSG, WEBMWASM, AUDIO_PLUGINS} from './record-engine';
+import {RECORDRTC, LIBVORBISJS, RECORDERJS, LAMEJS, OPUSRECORDER, OPUSMEDIARECORDER, VMSG, WEBMWASM, GIFSHOT, AUDIO_PLUGINS} from './record-engine';
 
 /**
  * Get audio plugin engine class.
@@ -89,6 +89,17 @@ const getVideoEngine = function(videoEngine) {
     return VideoEngineClass;
 };
 
+/**
+ * Get animation plugin engine class.
+ *
+ * @private
+ * @returns {Object} Animation engine plugin.
+ */
+const getAnimationEngine = function() {
+    // only gifshot supported at the moment
+    return videojs.GifshotEngine;
+};
+
 /**
  * Check whether any audio record plugins are enabled.
  *
@@ -137,5 +148,5 @@ const getConvertEngine = function(convertEngine) {
 };
 
 export {
-    getAudioEngine, isAudioPluginActive, getVideoEngine, getConvertEngine
+    getAudioEngine, isAudioPluginActive, getVideoEngine, getConvertEngine, getAnimationEngine
 };
diff --git a/src/js/engine/record-engine.js b/src/js/engine/record-engine.js
@@ -21,7 +21,8 @@ const LAMEJS = 'lamejs';
 const OPUSRECORDER = 'opus-recorder';
 const OPUSMEDIARECORDER = 'opus-media-recorder';
 const VMSG = 'vmsg';
-
+// animation
+const GIFSHOT = 'gifshot';
 // video
 const WEBMWASM = 'webm-wasm';
 
@@ -33,9 +34,11 @@ const AUDIO_PLUGINS = [
 // all video plugins
 const VIDEO_PLUGINS = [WEBMWASM];
 
-// all record plugins
-const RECORD_PLUGINS = AUDIO_PLUGINS.concat(VIDEO_PLUGINS);
+// all animation plugins
+const ANIMATION_PLUGINS = [GIFSHOT];
 
+// all record plugins
+const RECORD_PLUGINS = AUDIO_PLUGINS.concat(VIDEO_PLUGINS).concat(ANIMATION_PLUGINS);
 
 /**
  * Base class for recorder backends.
@@ -130,6 +133,6 @@ Component.registerComponent('RecordEngine', RecordEngine);
 
 export {
     RecordEngine, RECORD_PLUGINS, AUDIO_PLUGINS, VIDEO_PLUGINS,
-    RECORDRTC, LIBVORBISJS, RECORDERJS, LAMEJS, OPUSRECORDER,
-    OPUSMEDIARECORDER, VMSG, WEBMWASM
+    ANIMATION_PLUGINS, RECORDRTC, LIBVORBISJS, RECORDERJS, LAMEJS,
+    OPUSRECORDER, OPUSMEDIARECORDER, VMSG, WEBMWASM, GIFSHOT
 };