PhoneGap Media Recorder Plugin

We are happy to present the PhoneGap Media Recorder Plugin for Android and iOS. It provides an implementation for recording audio and video with a device camera and is based on the W3C Media Recorder API. This plugin uses the PhoneGap Media Stream Plugin which is based on the W3C Media Stream API to access the stream which is used to build a MediaRecorder object.

Quickstart

The implementation in iOS allows the user to open a camera view and record a video. Android has integrated support for the W3C Media Stream API and the W3C Media Recorder API.

The camera view in the iOS implementation looks like:

The Android version of the plugin allows the user to stream the video capture on a <video> tag and the user can then take a picture which is returned as a Blob:

How to Install

This plugin can be installed by using one of the following commands:

phonegap plugin add phonegap-plugin-media-recorder
phonegap plugin add https://github.com/phonegap/phonegap-plugin-media-recorder

Quickstart

The MediaRecorder constructor uses the MediaStream obtained from the Phonegap Media Stream Plugin as shown below:

navigator.mediaDevices.getUserMedia({
    'audio': true,
    'video': {facingMode: 'user'}
 }).then(function(stream) {
    var mediaRecorder = new MediaRecorder(stream);
 });

This mediaRecorder object can then be used to start recording audio/video using mediaRecorder.start(). The start() method gets the recording started as shown below:

mediaRecorder.onstart = function() {
    console.log('Recording Started');
};
mediaRecorder.start();

The start() method also accepts an optional timeslice parameter which allows the user to pass the number of milliseconds after which the recorded data will be available in chunks.

mediaRecorder.onstop = function() {
    console.log('Recording Stopped');
};
mediaRecorder.start(10000);  // mediaRecorder.ondataavailable fired            
                                every 10 seconds

The above functionality is currently not supported on iOS and passing a timeslice parameter does not work to record content in chunks.

The recording can be stopped by using mediaRecorder.stop() as shown below:

mediaRecorder.onstop = function() {
    console.log('Recording Stopped');
};
mediaRecorder.stop();

When the recording is finished, the recorded data can be retrieved and played from mediaRecorder.ondataavailable which is triggered after media.start() (only for iOS video) , media.stop() and mediaRecorder.requestData() (only when recording state is notinactive) as shown below:

mediaRecorder.ondataavailable = function(blob) {
    var videoTag = document.getElementById("vid");// video tag
    if(device.platform === 'iOS') {               // iOS device
        videoTag.src = mediaRecorder.src;
    } else {                                     // Android device
        var recordedChunks = [];
        recordedChunks.push(blob.data);
        videoTag.src = URL.createObjectURL(new
                       Blob(recordedChunks));
    }
}
mediaRecorder.requestData();

The mediaRecorder object has other methods like pause() and resume() which, along with full example code are explained in detail here.

Quirks

In order to add a blob object as a source for a video tag, blob: should be added to the media-src part of the Content-Security-Policy meta tag in your index.html.

Contact Us

Your feedback is graciously accepted and appreciated!

Please submit your pull requests and issues here.