How to convert video to base64 using jquery and phonegap

Question

Here I have written the code in JavaScript using phonegap but unable to get video data in base64

function captureVideo() 
{

    navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1});
}

function captureSuccess(mediaFiles)
{

    console.log(JSON.stringify(mediaFiles));
    console.log("HERE I WANT BASE64 CODE");

}

Answer 1

To get a data-uri from the video frame you will have to draw it onto a canvas element first (as well as making sure that CORS requirements are fulfilled).

I am not that familiar with Cordova but hopefully this will get you in the right direction:

// create a canvas element
var canvas = document.createElement('canvas'),     // canvas
    ctx = canvas.getContext('2d'),                 // context
    video = document.getElementById('myVideoId');  // get video element somehow

// setup canvas dimension
canvas.width = video.videoWidth || video.width;
canvas.height = video.videoHeight || video.height;

// draw in current video frame
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

// extract data-uri
var dataUri = canvas.toDataURL();  // PNG is default, use image/jpeg for JPEG

If you need to do this many times then only set up canvas once and use the drawImage / toDataURL calls when you need a frame.

Hope this helps!