collab-project · denismosolov · Aug 24, 2021 · Aug 24, 2021 · Aug 24, 2021 · Aug 24, 2021
diff --git a/docs/demo/countdown.html b/docs/demo/countdown.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Audio/Video Example - Record Plugin for Video.js</title>
+
+  <link href="//unpkg.com/video.js@7.14.3/dist/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="//unpkg.com/video.js@7.14.3/dist/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/videojs-record/dist/videojs.record.min.js"></script>
+
+  <script src="browser-workarounds.js"></script>
+
+  <style>
+  /* change player background color */
+  #myVideo {
+      background-color: #9ab87a;
+  }
+  </style>
+</head>
+<body>
+
+<video id="myVideo" playsinline class="video-js vjs-default-skin">
+  <p class="vjs-no-js">
+    To view this video please enable JavaScript, or consider upgrading to a
+    web browser that
+    <a href="https://videojs.com/html5-video-support/" target="_blank">
+      supports HTML5 video.
+    </a>
+  </p>
+</video>
+
+<script>
+var options = {
+    controls: true,
+    bigPlayButton: false,
+    width: 320,
+    height: 240,
+    plugins: {
+        record: {
+            audio: true,
+            video: true,
+            maxLength: 10,
+            countdownOverlay: true,
+            countdownSteps: 5,
+            countdownTimeBetweenSteps: 500,
+            displayMilliseconds: false,
+            debug: true
+        }
+    }
+};
+
+// apply some workarounds for certain browsers
+applyVideoWorkaround();
+
+var player = videojs('myVideo', options, function() {
+    // print version information at startup
+    var msg = 'Using video.js ' + videojs.VERSION +
+        ' with videojs-record ' + videojs.getPluginVersion('record') +
+        ' and recordrtc ' + RecordRTC.version;
+    videojs.log(msg);
+});
+
+// error handling
+player.on('deviceError', function() {
+    console.log('device error:', player.deviceErrorCode);
+});
+
+player.on('error', function(element, error) {
+    console.error(error);
+});
+
+// recording is started after 5 seconds
+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);
+});
+</script>
+
+</body>
+</html>
diff --git a/docs/examples.md b/docs/examples.md
@@ -13,6 +13,7 @@ View the examples online:
 | [Screen-only](https://collab-project.github.io/videojs-record/demo/screen-only.html) | Basic screen-only example | [example source](https://github.com/collab-project/videojs-record/blob/master/examples/screen-only.html) |
 | [Audio/screen](https://collab-project.github.io/videojs-record/demo/audio-screen.html) | Basic audio/screen example | [example source](https://github.com/collab-project/videojs-record/blob/master/examples/audio-screen.html) |
 | [Animated GIF](https://collab-project.github.io/videojs-record/demo/animated-gif.html) | Basic animated GIF example | [example source](https://github.com/collab-project/videojs-record/blob/master/examples/animated-gif.html) |
+| [Countdown](https://collab-project.github.io/videojs-record/demo/countdown.html) | Basic audio/video example with countdown | [example source](https://github.com/collab-project/videojs-record/blob/master/examples/countdown.html) |
 | [Timeslice](https://collab-project.github.io/videojs-record/demo/timeslice.html) | Get data during recording with specific time-intervals | [example source](https://github.com/collab-project/videojs-record/blob/master/examples/timeslice.html) |
 | [Hotkeys](https://collab-project.github.io/videojs-record/demo/hot-keys.html) | Control this plugin using a keyboard | [example source](https://github.com/collab-project/videojs-record/blob/master/examples/hot-keys.html) |
 | [Multi](https://collab-project.github.io/videojs-record/demo/multi.html) | Using multiple video.js players on a single page | [example source](https://github.com/collab-project/videojs-record/blob/master/examples/multi.html) |

diff --git a/docs/options.md b/docs/options.md
@@ -54,4 +54,7 @@ Additional options for this plugin are:
 | `convertOptions` | array | `[]` | List of string options to pass to the convert engine. |
 | `convertAuto` | boolean | `true` | By default the converter automatically starts once recording completed. Use `false` to disable this behavior, allowing you to start the converter manually instead. |
 | `hotKeys` | boolean or function | `false` | Enable [keyboard hotkeys](hotkeys.md). Disabled by default. |
+| `countdownOverlay` | boolean | `false` | Adds the countdown overlay after clicking on the record button. The recording starts once the countdown reaches 0. |
+| `countdownSteps` | float | `3` | Amount of countdown steps (Initial value). |
+| `countdownTimeBetweenSteps` | float | `1000` | Time interval in milliseconds after which it decreases the countdown value by 1. |
 | `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/examples/audio-video.html b/examples/audio-video.html
@@ -39,6 +39,7 @@
             audio: true,
             video: true,
             maxLength: 10,
+            countdownOverlay: true,
             debug: true
         }
     }

diff --git a/examples/countdown.html b/examples/countdown.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Countdown Overlay 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="../dist/videojs.record.js"></script>
+
+  <script src="browser-workarounds.js"></script>
+
+  <style>
+  /* change player background color */
+  #myVideo {
+      background-color: #9ab87a;
+  }
+  </style>
+</head>
+<body>
+
+<video id="myVideo" playsinline class="video-js vjs-default-skin"></video>
+
+<script>
+var options = {
+    controls: true,
+    bigPlayButton: false,
+    width: 320,
+    height: 240,
+    fluid: false,
+    plugins: {
+        record: {
+            audio: true,
+            video: true,
+            maxLength: 10,
+            countdownOverlay: true,
+            countdownSteps: 5,
+            countdownTimeBetweenSteps: 1000,
+            debug: true
+        }
+    }
+};
+
+// apply some workarounds for opera browser
+applyVideoWorkaround();
+
+var player = videojs('myVideo', options, function() {
+    // print version information at startup
+    var msg = 'Using video.js ' + videojs.VERSION +
+        ' with videojs-record ' + videojs.getPluginVersion('record') +
+        ' and recordrtc ' + RecordRTC.version;
+    videojs.log(msg);
+});
+
+// error handling
+player.on('deviceError', function() {
+    console.log('device error:', player.deviceErrorCode);
+});
+
+player.on('error', function(element, error) {
+    console.error(error);
+});
+
+// recording is started after 5 seconds
+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);
+});
+</script>
+
+</body>
+</html>
diff --git a/src/css/components/countdown-overlay.scss b/src/css/components/countdown-overlay.scss
@@ -0,0 +1,20 @@
+/* Countdown Overlay (3-2-1 countdown when start recording)
+--------------------------------------------------------------------------------
+*/
+
+.vjs-record-countdown {
+  position: absolute;
+  bottom: 3em;
+  left: 0;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  span {
+    font-size: 6em;
+  }
+}
diff --git a/src/css/videojs.record.scss b/src/css/videojs.record.scss
@@ -7,3 +7,4 @@
 @import "components/camera-button";
 @import "components/record-indicator";
 @import "components/picture-in-picture-toggle";
+@import "components/countdown-overlay";
diff --git a/src/js/controls/countdown-overlay.js b/src/js/controls/countdown-overlay.js
@@ -0,0 +1,53 @@
+/**
+ * @file countdown-overlay.js
+ * @since 4.5.0
+ */
+
+import videojs from 'video.js';
+
+const Component = videojs.getComponent('Component');
+
+/**
+ * Overlay for displaying the countdown.
+ *
+ * @class
+ * @augments videojs.Component
+ */
+class CountdownOverlay extends Component {
+    /**
+     * Create the `Countdown`s DOM element.
+     *
+     * @return {Element}
+     *         The dom element that gets created.
+     */
+    createEl() {
+        const spanElement = videojs.dom.createEl('span');
+        const el = super.createEl('div', {
+            className: 'vjs-record-countdown',
+            dir: 'ltr'
+        });
+        el.appendChild(spanElement);
+
+        return el;
+    }
+
+    /**
+     * Show the `CountdownOverlay` element if it is hidden by removing the
+     * 'vjs-hidden' class name from it.
+     */
+    show() {
+        if (this.layoutExclude && this.layoutExclude === true) {
+            // ignore
+            return;
+        }
+        super.show();
+    }
+
+    setCountdownValue(value) {
+        this.el().firstChild.innerText = value;
+    }
+}
+
+Component.registerComponent('CountdownOverlay', CountdownOverlay);
+
+export default CountdownOverlay;
diff --git a/src/js/controls/record-toggle.js b/src/js/controls/record-toggle.js
@@ -72,12 +72,45 @@ class RecordToggle extends Button {
     handleClick(event) {
         let recorder = this.player_.record();
         if (!recorder.isRecording()) {
-            recorder.start();
+            if (recorder.countdownOverlay) {
+                // @todo move to recorder
+                this.startWithCountdown(recorder);
+            } else {
+                recorder.start();
+            }
         } else {
             recorder.stop();
         }
     }
 
+    /**
+     * Display the countdown and start the recording when 0 is reached
+     *
+     * @param {Record} recorder
+     *        Instance of the Record plugin.
+     */
+    startWithCountdown(recorder) {
+        let currentValue = recorder.countdownSteps;
+        let interval = recorder.countdownTimeBetweenSteps;
+        let startOrDown = () => {
+            if (currentValue <= 0) {
+                this.player_.countdownOverlay.hide();
+                this.enable();
+                recorder.start();
+            } else {
+                this.player_.countdownOverlay.setCountdownValue(currentValue);
+                currentValue--;
+                setTimeout(startOrDown, interval);
+            }
+        };
+
+        this.disable();
+        this.player_.countdownOverlay.show();
+        this.player_.countdownOverlay.setCountdownValue(currentValue);
+
+        startOrDown();
+    }
+
     /**
      * Add the vjs-icon-record-stop class to the element so it can change appearance.
      *

diff --git a/src/js/defaults.js b/src/js/defaults.js
@@ -135,6 +135,12 @@ const pluginDefaultOptions = {
     convertAuto: true,
     // Enable keyboard hotkeys.
     hotKeys: false,
+    // Enable the 3-2-1 countdown before the recording
+    countdownOverlay: false,
+    // Time interval in milliseconds after which it decreases the countdown
+    countdownTimeBetweenSteps: 1000,
+    // Countdown start value
+    countdownSteps: 3,
     // Use this object to specify additional settings for the library used by the
     // plugin (only used in opus-recorder, ffmpeg.js, ffmpeg.wasm and vmsg plugins).
     pluginLibraryOptions: {}

diff --git a/src/js/videojs.record.js b/src/js/videojs.record.js
@@ -12,6 +12,7 @@ import RecordCanvas from './controls/record-canvas';
 import DeviceButton from './controls/device-button';
 import CameraButton from './controls/camera-button';
 import RecordToggle from './controls/record-toggle';
+import CountdownOverlay from './controls/countdown-overlay';
 import RecordIndicator from './controls/record-indicator';
 import PictureInPictureToggle from './controls/picture-in-picture-toggle';
 
@@ -127,6 +128,13 @@ class Record extends Plugin {
         player.recordToggle = new RecordToggle(player, options);
         player.recordToggle.hide();
 
+        if (this.countdownOverlay) {
+            // add countdown overlay
+            player.countdownOverlay = new CountdownOverlay(player, options);
+            player.addChild(player.countdownOverlay);
+            player.countdownOverlay.hide();
+        }
+
         // picture-in-picture
         let oldVideoJS = videojs.VERSION === undefined || compareVersion(videojs.VERSION, '7.6.0') === -1;
         if (!('pictureInPictureEnabled' in document)) {
@@ -152,6 +160,9 @@ class Record extends Plugin {
             if (player.pipToggle) {
                 customUIElements.push('pipToggle');
             }
+            if (player.countdownOverlay) {
+                customUIElements.push('countdownOverlay');
+            }
 
             customUIElements.forEach((element) => {
                 if (this.player.options_.controlBar[element] !== undefined) {
@@ -226,6 +237,11 @@ class Record extends Plugin {
         // animation settings
         this.animationFrameRate = recordOptions.animationFrameRate;
         this.animationQuality = recordOptions.animationQuality;
+
+        // countdown settings
+        this.countdownOverlay = recordOptions.countdownOverlay;
+        this.countdownTimeBetweenSteps = recordOptions.countdownTimeBetweenSteps;
+        this.countdownSteps = recordOptions.countdownSteps;
     }
 
     /**
@@ -1466,6 +1482,11 @@ class Record extends Plugin {
             this.player.controlBar.playToggle.hide();
         }
 
+        if (this.player.countdownOverlay) {
+            // hide countdown overlay
+            this.player.countdownOverlay.hide();
+        }
+
         // show device selection button
         this.player.deviceButton.show();