diff --git a/docs/frameworks/webpack.md b/docs/frameworks/webpack.md
index e79986e7..58ac5f1d 100644
--- a/docs/frameworks/webpack.md
+++ b/docs/frameworks/webpack.md
@@ -4,6 +4,15 @@ This document describes how to setup [Webpack](https://webpack.js.org/) with vid
## Installation
+Create a project directory, e.g. `videojs-record-webpack`.
+
+Create a sample `package.json`:
+
+```console
+cd videojs-record-webpack
+npm init --force
+```
+
Install Webpack:
```console
@@ -13,7 +22,7 @@ npm install -D webpack webpack-dev-server webpack-cli css-loader style-loader
Install videojs-record:
```console
-npm install videojs-record
+npm install --save videojs-record
```
## Configuration
diff --git a/docs/plugins/ffmpeg.js.md b/docs/plugins/ffmpeg.js.md
index 55ad747f..78e90101 100644
--- a/docs/plugins/ffmpeg.js.md
+++ b/docs/plugins/ffmpeg.js.md
@@ -13,11 +13,16 @@ builds ported to JavaScript using the Emscripten project, optimized for in-brows
## Usage
-Include the `videojs.record.ffmpegjs.js` plugin:
+Install the library:
-```html
-
-
+```console
+npm install --save ffmpeg.js
+```
+
+Import the plugin:
+
+```javascript
+import FFmpegjsEngine from 'videojs-record/dist/plugins/videojs.record.ffmpegjs.js';
```
And configure the `ffmpeg.js` `convertEngine`. For example:
diff --git a/docs/plugins/lamejs.md b/docs/plugins/lamejs.md
index 4ce68f9b..231306af 100644
--- a/docs/plugins/lamejs.md
+++ b/docs/plugins/lamejs.md
@@ -12,14 +12,19 @@ audio-only.
## Usage
-Include the `videojs.record.lamejs.js` plugin:
+Install the library:
-```html
-
-
+```console
+npm install --save lamejs
```
-Enable lamejs by specifying the `lamejs` `audioEngine` and the
+Import the plugin:
+
+```javascript
+import LamejsEngine from 'videojs-record/dist/plugins/videojs.record.lamejs.js';
+```
+
+Enable the plugin by specifying the `lamejs` `audioEngine` and the
`audioWorkerURL` options:
```javascript
diff --git a/docs/plugins/libvorbis.js.md b/docs/plugins/libvorbis.js.md
index 7bd38551..fca36849 100644
--- a/docs/plugins/libvorbis.js.md
+++ b/docs/plugins/libvorbis.js.md
@@ -16,17 +16,22 @@ audio-only.
## Usage
-Include the libvorbis.js script and place it before any other scripts:
+Install the library:
-```html
-
+```console
+npm install --save libvorbis.js
```
-Also include the `videojs.record.libvorbis.js` plugin:
+Include the libvorbis.js library and place it before any other scripts:
```html
-
-
+
+```
+
+Import the plugin:
+
+```javascript
+import LibVorbisEngine from 'videojs-record/dist/plugins/videojs.record.libvorbis.js';
```
And use `libvorbis.js` for the `audioEngine` option:
diff --git a/docs/plugins/opus-recorder.md b/docs/plugins/opus-recorder.md
index dfed4f2a..7473d414 100644
--- a/docs/plugins/opus-recorder.md
+++ b/docs/plugins/opus-recorder.md
@@ -11,17 +11,22 @@ opus-recorder is currently only supported when recording audio-only.
## Usage
+Install the library:
+
+```console
+npm install --save opus-recorder
+```
+
Include the opus-recorder script and place it before any other scripts:
```html
-
+
```
-Include the `videojs.record.opus-recorder.js` plugin:
+Import the plugin:
-```html
-
-
+```javascript
+import OpusRecorderEngine from 'videojs-record/dist/plugins/videojs.record.opus-recorder.js';
```
And specify the `opus-recorder` `audioEngine` and `audioWorkerURL` options.
diff --git a/docs/plugins/recorder.js.md b/docs/plugins/recorder.js.md
index 6ff83ebe..31aa2ef8 100644
--- a/docs/plugins/recorder.js.md
+++ b/docs/plugins/recorder.js.md
@@ -13,17 +13,22 @@ Note that this plugin is deprecated because recorder.js is an unmaintained libra
## Usage
+Install the library:
+
+```console
+npm install --save git+https://github.com/mattdiamond/Recorderjs.git
+```
+
Include the recorder.js script on the page:
```html
-
+
```
-And include the `videojs.record.recorderjs.js` plugin:
+Import the plugin:
-```html
-
-
+```javascript
+import RecorderjsEngine from 'videojs-record/dist/plugins/videojs.record.recorderjs.js';
```
And specify the `recorder.js` `audioEngine` option:
diff --git a/docs/plugins/ts-ebml.md b/docs/plugins/ts-ebml.md
index b5f8c918..8438e5fd 100644
--- a/docs/plugins/ts-ebml.md
+++ b/docs/plugins/ts-ebml.md
@@ -10,11 +10,10 @@ for creating seekable webm files, by injecting metadata like duration.
## Usage
-Include the `videojs.record.ts-ebml.js` plugin:
+Import the plugin:
-```html
-
-
+```javascript
+import TsEBMLEngine from 'videojs-record/dist/plugins/videojs.record.ts-ebml.js';
```
And specify the `ts-ebml` `convertEngine` option. For example:
diff --git a/docs/plugins/vmsg.md b/docs/plugins/vmsg.md
index 3749b81c..c1303f05 100644
--- a/docs/plugins/vmsg.md
+++ b/docs/plugins/vmsg.md
@@ -10,11 +10,16 @@ and lightweight MP3 encoder. vmsg is currently only supported when recording aud
## Usage
-Include the `videojs.record.vmsg.js` plugin:
+Install the library:
-```html
-
-
+```console
+npm install --save vmsg
+```
+
+Import the plugin:
+
+```javascript
+import VmsgEngine from 'videojs-record/dist/plugins/videojs.record.vmsg.js';
```
And specify the `vmsg` `audioEngine` and `audioWorkerURL` options. Use the
diff --git a/docs/plugins/webm-wasm.md b/docs/plugins/webm-wasm.md
index ba0ff389..cbc21b22 100644
--- a/docs/plugins/webm-wasm.md
+++ b/docs/plugins/webm-wasm.md
@@ -10,11 +10,17 @@ recordings in JavaScript using libwebm (compiled using WebAssembly).
## Usage
-Include the `videojs.record.webm-wasm.js` plugin:
+Install the library and polyfill:
-```html
-
-
+```console
+npm install --save webm-wasm @mattiasbuelens/web-streams-polyfill
+```
+
+Import the polyfill and plugin:
+
+```javascript
+import '@mattiasbuelens/web-streams-polyfill/dist/polyfill.min.js';
+import WebmWasmEngine from 'videojs-record/dist/plugins/videojs.record.webm-wasm.js';
```
And specify the `webm-wasm` `videoEngine`, `videoWorkerURL` and
diff --git a/docs/usage.md b/docs/usage.md
index 6b5662d8..49a910f7 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -1,37 +1,37 @@
# Usage
## Setup
-Start by including the video.js stylesheet and library:
+Start by importing the video.js stylesheet and library:
-```html
-
-
+```javascript
+import 'video.js/dist/video-js.min.css';
+import videojs from 'video.js';
```
-If you're going to record audio and/or video you need to include RecordRTC as well:
+If you're going to record audio and/or video you need RecordRTC as well:
-```html
-
+```javascript
+import RecordRTC from 'recordrtc';
```
-The videojs-record plugin automatically registers itself when the script
-is included on the page:
+Add the extra stylesheet for the plugin that includes a
+[custom font](font) with additional icons:
-```html
-
+```javascript
+import 'videojs-record/dist/css/videojs.record.css';
```
-Add the extra stylesheet for the plugin that includes a
-[custom font](font) with additional icons:
+The videojs-record plugin will automatically register itself after importing
+it:
-```html
-
+```javascript
+import Record from 'videojs-record/dist/videojs.record.js';
```
## Audio/video/image/screen
-When recording either audio/video, video-only, screen-only, audio/screen, animated GIF or a single image,
-include a `video` element:
+When recording either audio/video, video-only, screen-only, audio/screen,
+animated GIF or a single image, include a `video` element:
```html
@@ -42,13 +42,19 @@ include a `video` element:
When recording audio-only, also include the wavesurfer.js library and
-the videojs-wavesurfer and microphone plugins. Make sure to place this before
-the `videojs.record.js` script.
+the videojs-wavesurfer and microphone plugins. Make sure to import
+these libraries before videojs-record.
-```html
-
-
-
+```javascript
+// the following imports are only needed when you're recording
+// audio-only using the videojs-wavesurfer plugin
+import WaveSurfer from 'wavesurfer.js';
+import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
+WaveSurfer.microphone = MicrophonePlugin;
+
+// register videojs-wavesurfer plugin
+import 'videojs-wavesurfer/dist/css/videojs.wavesurfer.css';
+import Wavesurfer from 'videojs-wavesurfer/dist/videojs.wavesurfer.js';
```
And define an `audio` element:
@@ -63,8 +69,8 @@ be supported in the browser) like Ogg Vorbis, MP3 and Opus.
## Configuration
-Define the player configuration and enable the videojs-record plugin by adding a `record` entry:
-
+Define the player configuration and enable the videojs-record plugin by adding
+a `record` entry:
```javascript
let options = {
@@ -89,13 +95,14 @@ let options = {
Finally, create the player:
-
```javascript
let player = videojs('myVideo', options, function() {
// print version information at startup
const msg = 'Using video.js ' + videojs.VERSION +
' with videojs-record ' + videojs.getPluginVersion('record');
videojs.log(msg);
+
+ console.log("videojs-record is ready!");
});
```