Video.js Record

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

Installation

You can use bower (bower install videojs-record) or npm (npm install videojs-record) to install the plugin, or download and include videojs.record.js in your project.

The plugin has the following mandatory dependencies:

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

If you're going to record audio-only, you'll also need these dependencies:

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

Using the Plugin

Whether you're going to record audio or video, or both, you'll always need video.js and recordrtc.js. Start by including these on your page:

<link href="http://vjs.zencdn.net/4.11.3/video-js.css" rel="stylesheet">

<script src="http://vjs.zencdn.net/4.11.3/video.js"></script>
<script src="http://recordrtc.org/latest.js"></script>

The videojs-record plugin automatically registers itself when you include the script on your page:

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

You also need to include an extra stylesheet that includes a custom font with additional icons:

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

Audio/video

If you want to record both audio/video, or video-only, then include a video element on your page that will display a live camera preview:

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

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

Audio-only

If you're only recording audio, you also need to include wavesurfer.js and the videojs-wavesurfer and microphone plugins. Make sure to place them before the videojs.record.js script.

<script src="http://wavesurfer.fm/build/wavesurfer.min.js"></script>
<script src="http://wavesurfer.fm/plugin/wavesurfer.microphone.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 entry. For example:

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

Plugin options

Available options for this plugin:

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

If you want to disable and hide specific controls, use the video.js children option:

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

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.