QBMediaRecorder

QBMediaRecorder

new QBMediaRecorder(optsopt)

Source:
Examples
var opts = {
    onstart: function onStart() { // Use named function.
        console.log('Recorder is started');
    },
    onstop: function onStop(Blob) {
        videoElement.src = URL.createObjectURL(blob);
    },
    mimeType: 'video/mp4'
};

// uses as global variable, QBMediaRecorder is built as a UMD module.
var recorder = new QBMediaRecorder(opts);
// For record 'audio/mp3' or 'audio/wav' need to add 'qbAudioRecorderWorker.js' file to your project.
var opts = {
    // use named function
    onstart: function onStart() {
        console.log('Recorder is started');
    },
    onstop: function onStop(Blob) {
        videoElement.src = URL.createObjectURL(blob);
    },
    // 'audio/wav' or 'audio/mp3'
    mimeType: 'audio/mp3',
    // set relative path (from folder node_modules for example)
    workerPath: '../node_modules/javascript-media-recorder/qbAudioRecorderWorker.js'
};

// uses as global variable, QBMediaRecorder is built as a UMD module.
var recorder = new QBMediaRecorder(opts);
Parameters:
Name Type Attributes Description
opts Object <optional>

Object of parameters.

Properties
Name Type Default Description
mimeType String video

Specifies the media type and container format for the recording. You can set simply: 'video' or 'audio' or 'audio/webm' ('audio/wav' or 'audio/mp3' mimeTypes uses AudioContext API instead of MediaRecorder API);
workerPath String

Relative path from index.html.
timeslice Number 1000

The minimum number of milliseconds of data to return in a single Blob, fire 'ondataavaible' callback (isn't need to use with 'audio/wav' of 'audio/mp3').
ignoreMutedMedia Boolean true

What to do with a muted input MediaStreamTrack, e.g. insert black frames/zero audio volume in the recording or ignore altogether.
onstart function

Called to handle the start event.
onstop function

Called to handle the stop event.
onpause function

Called to handle the pause event.
onresume function

Called to handle the resume event.
onerror function

Called to handle an ErrorEvent.
onchange function

Called to handle the change a stream event.
ondataavailable function

Called to handle the dataavailable event. The Blob of recorded data is contained in this event (Callback isn't supported if use 'audio/wav' of 'audio/mp3' for recording).

Methods

toggleMimeType(mimeType) → {Boolean}

Source:
Example
var opts = {
    onstart: function onStart() {
        console.log('Recorder is started');
    },
    onstop: function onStop(Blob) {
        videoElement.src = URL.createObjectURL(blob);
    },
    mimeType: 'video/mp4',
    // set the path to the worker before if 'audio/wav' or 'audio/mp3' mimeTypes will be used.
    workerPath: '../node_modules/javascript-media-recorder/qbAudioRecorderWorker.js'
};

var recorder = new QBMediaRecorder(opts);

recorder.toggleMimeType('audio/mp3');
Parameters:
Name Type Description
mimeType String

The mimeType to set as option.
Returns:
  • True if the MediaRecorder implementation is capable of recording Blob objects for the specified MIME type.
Type
Boolean

(static) isAvailable() → {Boolean}

Source:

It checks capability of recording in the environment.
Checks MediaRecorder, MediaRecorder.isTypeSupported and Blob.

Example
if(QBMediaRecorder.isAvailable()) {
    // ... show UI for recording
}
Returns:

Returns true if the QBMediaRecorder is available and can run, or false otherwise.

Type
Boolean

(static) isAudioContext() → {Boolean}

Source:

It checks the AudioContext API.
Checks window.AudioContext or window.webkitAudioContext.

Example
if(QBMediaRecorder.isAudioContext()) {
    // ... the QBMediaRecorder is available for recording 'audio/mp3' or 'audio/wav'
}
Returns:

Returns true if the AudioContext API is available in a browser, or false otherwise.

Type
Boolean

(static) isTypeSupported(mimeType) → {Boolean}

Source:

Returns a Boolean which is true if the MIME type specified is one the user agent can record.

Example
if( QBMediaRecorder.isTypeSupported('video/mp4') ) {
    el.textContent = 'Will be record in video/mp4';
}
Parameters:
Name Type Description
mimeType String

The mimeType to check.
Returns:
  • True if the MediaRecorder implementation is capable of recording Blob objects for the specified MIME type.
Type
Boolean

(static) getSupportedMimeTypes(typeopt) → {Array}

Source:

Return all supported mime types and container format.

Example
var type = QBMediaRecorder.getSupportedMimeTypes('audio');
console.info(`Call will recording in ${type[0]}`);
Parameters:
Name Type Attributes Default Description
type String <optional>
 video

Type of media.
Returns:

Array of supported mimetypes. Recommended mimetype has 0 index.

Type
Array

getState() → {String}

Source:

Return the current state of QBMediaRecorder instance.
Possibly states: inactive, recording, paused.

Example
var recorder = new QBMediaRecorder();
// ...some code

if(recorder.getState() == 'recording') {
    console.info('You are still recording.');
}
Returns:

Name of a state.

Type
String

start(stream) → {void}

Source:

Start to recording a stream.
Fire the method stop if an instance inprogress (has a state recording or paused).
Fire onstart callback.

Example
var options = {
    onstart: function onStart() {
        var time = 0,
            step = 1000;

        setTimeout(function () {
            time += step;
            console.info(`You are recording ${time} sec.`);
        }, step);
    }
}

var rec = new qbRecorder(options);
// ...
rec.start(stream);
Parameters:
Name Type Description
stream MediaStream

Stream object representing a flux of audio- or video-related data.
Returns:
Type
void

stop() → {Blob}

Source:

Stop to recording a stream.

Returns:

Blob of recorded chuncks.

Type
Blob

pause() → {void}

Source:

Pause to recording a stream.

Returns:
Type
void

resume() → {void}

Source:

Resume to recording a stream.

Returns:
Type
void

change(stream) → {void}

Source:

Change a recorded stream.

Parameters:
Name Type Description
stream MediaStream

Stream object representing a flux of audio- or video-related data.
Returns:
Type
void

download(fileNameopt, blobopt) → {void}

Source:

Create a file from blob and download as the file. Its method will fire 'stop' if recording in progress.

Example
var rec = new qbRecorder();
rec.start(stream);
// ...
rec.download(false); // Set false, name will be generated based on Date.now()
Parameters:
Name Type Attributes Default Description
fileName Strint <optional>
 Date.now()

Name of file.
blob Blob <optional>

You can set blob which you get from the method stop or don't set anything and we will get recorded chuncks.
Returns:
Type
void