Video.js Record

A Video.js plugin for recording audio/video files.

Installation

Use bower (bower install videojs-record) or npm (npm install videojs-record) to install the plugin or download and include the dependencies manually.

Dependencies

The plugin has the following mandatory dependencies:

• Video.js - HTML5 media player that provides the user interface.
• RecordRTC.js - Adds support for audio/video recording.

When recording audio-only, the following dependencies are also required:

• wavesurfer.js - Provides a navigable waveform for audio files. Comes with a microphone plugin used for realtime visualization of the microphone audio signal.
• videojs-wavesurfer - Turns Video.js into an audio-player.

Usage

Whether you're going to record audio or video, or both, you'll always need video.js and recordrtc.js. Start by including the following:

<link href="http://cdnjs.cloudflare.com/ajax/libs/video.js/4.12.3/video-js.css" rel="stylesheet">

<script src="http://cdnjs.cloudflare.com/ajax/libs/video.js/4.12.3/video.js"></script>
<script src="http://recordrtc.org/latest.js"></script>

The videojs-record plugin automatically registers itself when the script is included on the page:

<script src="videojs.record.js"></script>

Add the extra stylesheet that includes a custom font with additional icons:

<link href="videojs.record.css" rel="stylesheet">

Audio/video

When recording both audio/video, or video-only, include a video element:

<video id="myVideo" class="video-js vjs-default-skin"></video>

Check out the full audio/video or video-only examples.

Audio-only

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.

<script src="http://wavesurfer.fm/dist/wavesurfer.min.js"></script>
<script src="http://wavesurfer.fm/dist/plugin/wavesurfer.microphone.min.js"></script>
<script src="videojs.wavesurfer.js"></script>

And define an audio element:

<audio id="myAudio" class="video-js vjs-default-skin"></audio>

Check out the full audio-only example.

Options

Configure the player using the video.js options, and enable the plugin by adding a record configuration to plugins. For example:

var player = videojs("myVideo",
{
    controls: true,
    loop: false,
    width: 320,
    height: 240,
    plugins: {
        record: {
            audio: false,
            video: true,
            maxLength: 5
        }
    }
});

The available options for this plugin are:

Methods

Methods for this plugin:

Events

Events for this plugin that are available on the video.js player instance:

Get recorded data

Listen for the finishRecord event and obtain the clip data from the player.recordedData attribute for further processing:

// 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);
});

Customizing controls

To disable and hide specific controls, use the video.js children option:

children: {
    controlBar: {
        children: {
            // hide fullscreen control
            fullscreenToggle: false
        }
    }
},

Localization

This plugin supports multiple languages. Each language has it's own file (found in the lang directory) that contains the translated text.

Using a different language, for example Dutch (nl), is done by including the Video.js language file and the plugin's language file:

<script src="videojs-record/dist/lang/nl.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/video.js/4.11.3/lang/nl.js"></script>

And setting the Video.js player's language option:

language: "nl"

Adding support for an additional language is done by adding a new file with a filename that consists of the countrycode and the .json extension, eg. fr.json. The build script compiles the JSON into a usable language file, eg. fr.js. Check the Video.js wiki for a list of supported countrycodes. Pull requests to add more languages to this plugin are always welcome!

More features using other plugins

The Video.js community created lots of plugins that can be used to enhance the player's functionality. Plugins actually tested with videojs-record:

• videojs-persistvolume - Saves user's volume setting using localStorage, but falls back to cookies if necessary.

Development

Install grunt-cli:

sudo npm install -g grunt-cli

Install dependencies using npm:

npm install

Or using bower:

bower install

Build a minified version:

grunt

Generated files are placed in the dist directory.

License

This work is licensed under the MIT License.