use imports in documentation

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

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
-<script src="dist/videojs.record.js"></script>
-<script src="dist/plugins/videojs.record.ffmpegjs.js"></script>
+```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:

docs/plugins/lamejs.md

@@ -12,14 +12,19 @@ audio-only.
 
 ## Usage
 
-Include the `videojs.record.lamejs.js` plugin:
+Install the library:
 
-```html
-<script src="dist/videojs.record.js"></script>
-<script src="dist/plugins/videojs.record.lamejs.js"></script>
+```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

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
-<script src="libvorbis.min.js"></script>
+```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
-<script src="dist/videojs.record.js"></script>
-<script src="dist/plugins/videojs.record.libvorbis.js"></script>
+<script src="libvorbis.js/js/libvorbis.min.js"></script>
+```
+
+Import the plugin:
+
+```javascript
+import LibVorbisEngine from 'videojs-record/dist/plugins/videojs.record.libvorbis.js';
 ```
 
 And use `libvorbis.js` for the `audioEngine` option:

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
-<script src="recorder.min.js"></script>
+<script src="opus-recorder/dist/recorder.min.js"></script>
 ```
 
-Include the `videojs.record.opus-recorder.js` plugin:
+Import the plugin:
 
-```html
-<script src="dist/videojs.record.js"></script>
-<script src="dist/plugins/videojs.record.opus-recorder.js"></script>
+```javascript
+import OpusRecorderEngine from 'videojs-record/dist/plugins/videojs.record.opus-recorder.js';
 ```
 
 And specify the `opus-recorder` `audioEngine` and `audioWorkerURL` options.

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
-<script src="recorder.js"></script>
+<script src="recorderjs/dist/recorder.js"></script>
 ```
 
-And include the `videojs.record.recorderjs.js` plugin:
+Import the plugin:
 
-```html
-<script src="dist/videojs.record.js"></script>
-<script src="dist/plugins/videojs.record.recorderjs.js"></script>
+```javascript
+import RecorderjsEngine from 'videojs-record/dist/plugins/videojs.record.recorderjs.js';
 ```
 
 And specify the `recorder.js` `audioEngine` option:

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
-<script src="dist/videojs.record.js"></script>
-<script src="dist/plugins/videojs.record.ts-ebml.js"></script>
+```javascript
+import TsEBMLEngine from 'videojs-record/dist/plugins/videojs.record.ts-ebml.js';
 ```
 
 And specify the `ts-ebml` `convertEngine` option. For example:

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
-<script src="dist/videojs.record.js"></script>
-<script src="dist/plugins/videojs.record.vmsg.js"></script>
+```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

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
-<script src="dist/videojs.record.js"></script>
-<script src="dist/plugins/videojs.record.webm-wasm.js"></script>
+```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

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
-<link href="video-js.min.css" rel="stylesheet">
-<script src="video.min.js"></script>
+```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
-<script src="RecordRTC.js"></script>
+```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
-<script src="videojs.record.js"></script>
+```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
-<link href="videojs.record.css" rel="stylesheet">
+```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
 <video id="myVideo" playsinline class="video-js vjs-default-skin"></video>
@@ -42,13 +42,19 @@ include a `video` element:
 ![Audio-only screenshot](img/audio-only.png?raw=true "Audio-only screenshot")
 
 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
-<script src="wavesurfer.min.js"></script>
-<script src="wavesurfer.microphone.min.js"></script>
-<script src="videojs.wavesurfer.js"></script>
+```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!");
 });
 ```