Cordova - Media Capture

Cordova - Media Capture

The cordova-plugin-media-capture plugin provides access to the device’s native audio, image, and video capture capabilities. This allows users to record audio, take pictures, or record videos directly within your application.

Step 1 - Installing the Media Capture Plugin

Add the plugin to your project via the command line:

cordova plugin add cordova-plugin-media-capture

Note: This plugin may also require cordova-plugin-file as a dependency for handling captured media files.

Step 2 - Adding UI Elements (Buttons)

In index.html, create buttons to trigger audio, image, and video capture.

<!-- In index.html -->
<button id="captureAudioButton">Capture Audio</button>
<button id="captureImageButton">Capture Image</button>
<button id="captureVideoButton">Capture Video</button>
<div id="mediaFilesStatus" style="margin-top:10px;"></div>

Step 3 - Adding Event Listeners

In your JavaScript file (e.g., index.js), set up event listeners for these buttons after the deviceready event.

// In index.js, after 'deviceready'
document.addEventListener('deviceready', () => {
    if (!navigator.device || !navigator.device.capture) {
        alert("Media Capture API not available. Is the plugin installed?");
        return;
    }
    document.getElementById("captureAudioButton").addEventListener("click", captureUserAudio);
    document.getElementById("captureImageButton").addEventListener("click", captureUserImage);
    document.getElementById("captureVideoButton").addEventListener("click", captureUserVideo);
}, false);

Step 4 - Implementing Capture Functions

The plugin exposes navigator.device.capture object with methods like captureAudio(), captureImage(), and captureVideo().

A. Capture Audio (captureUserAudio)

This function launches the native audio recorder application.

function captureUserAudio() {
    const options = {
        limit: 1, // Maximum number of audio clips to record
        duration: 10 // Maximum duration of a single audio clip in seconds
    };
    navigator.device.capture.captureAudio(onCaptureSuccess, onCaptureError, options);
}

// Shared success callback for all capture types
function onCaptureSuccess(mediaFiles) {
    let statusHtml = '<h4>Capture Successful!</h4>';
    for (let i = 0, len = mediaFiles.length; i < len; i += 1) {
        const mediaFile = mediaFiles[i];
        statusHtml += '<p>**Name:** ' + mediaFile.name + '<br>' +
                      '**Full Path:** ' + mediaFile.fullPath + '<br>' +
                      '**Type:** ' + mediaFile.type + '<br>' +
                      '**Size:** ' + mediaFile.size + ' bytes</p>';
        console.log('Captured file: ', mediaFile);
        // You can use mediaFile.fullPath with cordova-plugin-file to read/upload the file
        // Or, if it's an image/video, display it.
    }
    document.getElementById('mediaFilesStatus').innerHTML = statusHtml;
}

// Shared error callback
function onCaptureError(error) {
    const msg = 'Capture Error: Code ' + error.code + '\n' + (error.message || '');
    console.error(msg);
    alert(msg);
    document.getElementById('mediaFilesStatus').innerHTML = '<p style="color:red;">' + msg + '</p>';
}

When the AUDIO button is pressed, the device’s sound recorder UI will open. After recording, onCaptureSuccess receives an array of MediaFile objects.

The console and status area will show details of the captured audio file(s). For example:

// Console Output Example for Audio:
// Captured file: {name: "audio_...mp3", fullPath: "cdvfile://localhost/persistent/path/to/audio.mp3", type: "audio/mpeg", ...}

B. Capture Image (captureUserImage)

This function launches the native camera application to take pictures. Note: For more control over image capture (like quality, encoding, direct base64 data), cordova-plugin-camera is often preferred. This plugin’s captureImage is simpler for basic image capture.

function captureUserImage() {
    const options = {
        limit: 1 // Maximum number of images to capture
    };
    // Note: For image capture, the options object is currently only supported on iOS.
    // It's generally simpler and might not offer as many options as cordova-plugin-camera.
    navigator.device.capture.captureImage(onCaptureSuccess, onCaptureError, options);
}

Pressing the IMAGE button opens the camera. Captured image details are processed by onCaptureSuccess.

The console and status area will show details of the captured image file(s).

C. Capture Video (captureUserVideo)

This function launches the native video recorder application.

function captureUserVideo() {
    const options = {
        limit: 1, // Maximum number of video clips
        duration: 15, // Maximum duration of a single video clip in seconds
        // quality: 1 // (0=low, 1=high). Only for iOS. Android uses device default.
    };
    navigator.device.capture.captureVideo(onCaptureSuccess, onCaptureError, options);
}

Pressing the VIDEO button opens the video camera. Captured video details are processed by onCaptureSuccess.

The console and status area will show details of the captured video file(s).

MediaFile Object

The onCaptureSuccess callback receives an array of MediaFile objects. Each MediaFile object has the following properties:

Additionally, a getFormatData(successCallback, errorCallback) method is available on MediaFile objects to retrieve format information like codecs, bitrate, duration (for audio/video), height, and width (for image/video).

CaptureError Object

The onCaptureError callback receives a CaptureError object with a code property (and an optional message on some platforms):

Important Considerations

Refer to the official cordova-plugin-media-capture documentation for the most current details and platform-specific behaviors.