Video.js Record

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

Table of Contents

• Installation
• Supported browsers
• Dependencies
• Usage
  • Audio/video/image
  • Audio-only
• Examples
• Options
• Methods
• Events
• Media constraints
• Get recorded data
  • Save data
  • Convert data
  • Timestamps
  • Upload data
• Controlling the input and output devices
• Responsive layout
• Customizing controls
• Hotkeys
• Picture-in-Picture
• Other audio libraries
• Other video libraries
• Localization
• Webpack
• Using with React
• Using with Angular
• More features using other plugins
• Development
• Font
• License
• Donate

Installation

Use npm (npm install videojs-record) to install the plugin or download the library and dependencies elsewhere. If you want to try the examples, check these instructions below.

Since v2.0 this plugin is compatible with video.js 6.0 and videojs-wavesurfer 2.0 or newer. If you want to use this plugin with an older version, check the archived releases for a 1.7.x or older release.

Take a look at the changelog when upgrading from a previous version of videojs-record.

Supported browsers

Check the wiki for supported browsers information.

Dependencies

The plugin has the following mandatory dependencies:

• Video.js - HTML5 media player that provides the user interface.
• webrtc-adapter - Provides cross-browser support for getUserMedia and other browser APIs used in this plugin.

When recording audio and/or video you also need:

• RecordRTC - Adds support for audio/video/GIF recording.

And when recording audio-only, the following dependencies are also required ( to visualize the audio waveform):

• videojs-wavesurfer - Transforms video.js into an audio-player using wavesurfer.js.
• wavesurfer.js - Provides a navigable waveform for audio files. Comes with a microphone plugin used for real-time visualization of the microphone audio signal.

Optional dependencies when using other audio libraries (note that most of these audio codecs are already available in most modern browsers):

• vmsg - Converts PCM audio data to compressed MP3 audio. Uses WebAssembly version of LAME encoder.
• opus-recorder - Converts the output of Web Audio API nodes as Opus and exports it into an Ogg container.
• libvorbis.js - Converts PCM audio data to compressed Ogg Vorbis audio, resulting a smaller audio files with similar quality.
• lamejs - Converts PCM audio data to compressed MP3 audio. Written in JavaScript so not very fast.
• recorder.js - A plugin for recording the PCM output of Web Audio API nodes.

Optional dependencies when using other video libraries:

• webm-wasm - Creates WebM recordings using libwebm (compiled with WebAssembly).

Optional dependencies when using converter libraries:

• ts-ebml - Creates seekable WebM files, by injecting metadata like duration.
• ffmpeg.js - FFmpeg builds ported to JavaScript using Emscripten.

Usage

Start by including the video.js stylesheet and library:

<link href="video-js.min.css" rel="stylesheet">
<script src="video.min.js"></script>

If you're going to record audio and/or video you need to include RecordRTC as well:

<script src="RecordRTC.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 for the plugin that includes a custom font with additional icons:

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

Audio/video/image

When recording either audio/video, video-only, screen-only, audio/screen, animated GIF or a single image, include a video element:

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

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="wavesurfer.min.js"></script>
<script src="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>

There is also support for additional audio libraries that allows you to record audio with alternative codecs (that otherwise might not be supported in the browser) like Ogg Vorbis, MP3 and Opus.

Examples

• audio/video (demo / source)
• video-only (demo / source)
• audio-only example (demo / source)
• image (demo / source)
• animated GIF (demo / source)
• screen-only (demo / source)
• audio/screen (demo / source)

To try out the examples locally, download the zip-file and unpack it, or checkout the repository using Git:

git clone https://github.com/collab-project/videojs-record.git

And install the dependencies using npm:

cd videojs-record
npm install

Build the library and assets once:

npm run build

And start the local webserver:

npm run start

And open http://localhost:8080/examples/audio-video.html in a browser.

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', {
    // video.js options
    controls: true,
    loop: false,
    fluid: false,
    width: 320,
    height: 240,
    plugins: {
        // videojs-record plugin options
        record: {
            image: false,
            audio: false,
            video: true,
            maxLength: 5,
            debug: true
        }
    }
});

The available options for this plugin are:

Methods

Methods for this plugin documented below are available using the record method of the video.js player instance. For example:

player.record().destroy();

All public methods are documented in the online API documentation.

Events

Plugin events that are available on the video.js player instance. For example:

player.on('startRecord', function() {
    console.log('started recording!');
});

Media constraints

Media stream constraints allow you to specify the types of media to request, along with any requirements for each type.

The following example shows how to change the camera or screen resolution to 1280 by 720 pixels:

var player = videojs('myVideo', {
    controls: true,
    loop: false,
    // dimensions of video.js player
    fluid: false,
    width: 1280,
    height: 720,
    plugins: {
        record: {
            maxLength: 5,
            debug: true,
            audio: false,
            video: {
                // video constraints: set resolution of camera
                mandatory: {
                    minWidth: 1280,
                    minHeight: 720,
                },
            },
            // dimensions of captured video frames
            frameWidth: 1280,
            frameHeight: 720
        }
    }
});

Get recorded data

Listen for the finishRecord event and obtain the recorded data from the player.recordedData object for further processing:

// user completed recording and stream is available
player.on('finishRecord', function() {
    // the recordedData object contains the stream data that
    // can be downloaded by the user, stored on server etc.
    console.log('finished recording: ', player.recordedData);
});

Save data

Use the saveAs method to show a 'Save as' browser dialog where the user can choose the storage location for the recorded data. It accepts a name object that contains a mapping between the media type and the filename. For example:

player.on('finishRecord', function() {
    // show save as dialog
    player.record().saveAs({'video': 'my-video-file-name.webm'});
});

Convert data

It's possible to process and convert the recorded data in the browser. For example, adding metadata like duration to recorded WebM files, or using FFmpeg to convert the data with a different codec.

For example, enable the ts-ebml plugin with the convertEngine option:

record: {
    audio: false,
    video: true,
    maxLength: 5,
    debug: true,
    // use the ts-ebml convert plugin to inject metadata in webm files
    convertEngine: 'ts-ebml'
}

And listen for the finishConvert event. For example:

// converter ready and stream is available
player.on('finishConvert', function() {
    // the convertedData object contains the converted data that
    // can be downloaded by the user, stored on server etc.
    console.log('finished converting: ', player.convertedData);
});

Check the converter plugins documentation for more information.

Timestamps

It's also possible to get data during recording with specific time-intervals. This could be useful in scenarios where you're recording a long clip and planning to upload recorded blobs to a server periodically, where the clip is stitched together.

Enable the event with the timeSlice option:

record: {
    audio: false,
    video: true,
    maxLength: 5,
    debug: true,
    // fire the timestamp event every 2 seconds
    timeSlice: 2000
}

And listen for the timestamp event. For example:

// monitor stream data during recording
player.on('timestamp', function() {
    // timestamps
    console.log('current timestamp: ', player.currentTimestamp);
    console.log('all timestamps: ', player.allTimestamps);
 
    // stream data
    console.log('array of blobs: ', player.recordedData);
    // or construct a single blob:
    // var blob = new Blob(blobs, {
    //     type: 'video/webm'
    // });
});

Check the timeslice example.

Upload data

The example below shows how to upload each recording:

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);
 
    var data = player.recordedData;
    var serverUrl = '/upload';
    var formData = new FormData();
    formData.append('file', data, data.name);
 
    console.log('uploading recording:', data.name);
 
    fetch(serverUrl, {
        method: 'POST',
        body: formData
    }).then(
        success => console.log('recording upload complete.')
    ).catch(
        error => console.error('an upload error occurred!')
    );
});

Check the simple upload example.

The example below shows how to 'stream' upload recorded data segments to a server using the jQuery library and the timestamp event:

var segmentNumber = 0;
 
player.on('timestamp', function() {
    if (player.recordedData && player.recordedData.length > 0) {
        var binaryData = player.recordedData[player.recordedData.length - 1];
 
        segmentNumber++;
 
        var formData = new FormData();
        formData.append('SegmentNumber', segmentNumber);
        formData.append('Data', binaryData);
 
        $.ajax({
            url: '/api/Test',
            method: 'POST',
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function (res) {
                console.log("segment: " + segmentNumber);
            }
        });
    }
});

Check the jquery.fileupload or Fine Uploader examples on how to upload the data to a server using these libraries.

Controlling the input and output devices

Use enumerateDevices to get a list of the available input and output devices on the user's system, e.g. FaceTime HD-camera, default (Built-in microphone) etc.

Check out the enumerateDevices example (demo / source).

After you acquired the device id (called deviceId in the example below) specify it in the player configuration using constraints:

record: {
    maxLength: 20,
    debug: true,
    audio: true,
    video: {
        // video constraints: use preset device
        deviceId: {exact: deviceId}
    }
}

If your system has multiple audio output devices, use setAudioOutput(deviceId) to change the active audio output device, and listen for the audioOutputReady event to be notified when the new output device is active.

player.on('audioOutputReady', function() {
    console.log('Changed audio output to deviceId:', deviceId);
});
 
// change audio output device
player.record().setAudioOutput(deviceId);

See the full change-audio-output example (demo or source).

If your system has multiple audio input devices and you want to display these devices and allow the user to choose one, check out the the full change-audio-input example (demo or source).

Similarly, if your system has multiple video input devices and you want the user to choose one, check out the change-video-input example (demo or source).

Responsive layout

The fluid option for video.js will resize the player according to the size of the window.

Configure the player; enable the video.js fluid option:

fluid: true

Customizing controls

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

controlBar: {
    // hide fullscreen and volume controls
    fullscreenToggle: false,
    volumePanel: false
},

Custom interface elements for this library that can be hidden are: deviceButton, recordIndicator, cameraButton, pipToggle and recordToggle.

Hotkeys

The hotKeys plugin option allows you to control this plugin using a keyboard (disabled by default). Note that this requires video.js 7.5.0 or newer.

The built-in hotkey handling is:

To enable the built-in handler, specify true for the hotKeys plugin option:

record: {
    maxLength: 20,
    debug: true,
    video: true,
    hotKeys: true
},

Or use your own handler by specifying a function:

record: {
    maxLength: 20,
    debug: true,
    video: true,
    hotKeys: function(event) {
        console.log('pressed key: ' + event.which);
 
        // check https://github.com/timoxley/keycode for codes
        if (event.which == 88) {
            // toggle record button when pressing 'x' key
            player.recordToggle.trigger('click');
        }
    }
},

Check out the hot-keys example (demo or source).

Picture-in-Picture

Picture-in-Picture (PiP) allows users to record and playback in a floating window (always on top of other windows) while interacting with other sites or applications.

Enable the PiP button with the pip option:

record: {
    pip: true
    debug: true,
    video: true,
    maxLength: 20
}

Check out the picture-in-picture example (demo or source).

Other audio libraries

RecordRTC is the default recording library but there is also support for other audio libraries. Check the audio plugins documentation for more information.

Other video libraries

RecordRTC is the default recording library but there is also support for other video libraries. Check the video plugins documentation for more information.

Localization

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

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

<script src="videojs-record/dist/lang/nl.js"></script>
<script src="video.js/dist/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 country code 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 lang directory for a list of supported languages. Pull requests to add more languages to this plugin are always welcome! You can also help out using the Transifex online translation tool.

Webpack

The Webpack wiki page shows how to configure webpack for videojs-record.

Using with React

The React wiki page wiki page shows how to get started with React and videojs-record using the create-react-app tool.

Alternatively, the react example shows how to integrate this plugin in a React component (demo or source).

Using with Angular

The Angular wiki page shows how to setup Angular and videojs-record.

More features using other plugins

The Video.js community created lots of plugins that can be used to enhance the player's functionality.

Development

Install dependencies using npm:

npm install

Build a minified version:

npm run build

Generated files are placed in the dist directory.

During development:

npm run start

This will watch the source directory and rebuild when any changes are detected. It will also serve the files on http://127.0.0.1:8080.

Generate the API documentation (placed in the docs directory):

npm run docs

All commands for development are listed in the package.json file and are run using:

npm run <command>

Font

Check the the font readme for more information.

License

This work is licensed under the MIT License.

Donate

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]