How to capture videos from the camera with PhoneGap using a hybrid app

The camera is a fundamental means to obtain photographs and videos of everything that surrounds us through the phone and as developers it is a means that we can use even in applications that are not native, hybrid and our case of interest the PhoneGap development framework allows us carry out this work and many more.

In a previous entry we saw how to capture an image by selecting the gallery application and how to take a photo using the device's camera with PhoneGap, now we will see an extension of the above and we will see how to capture videos with PhoneGap using the same scheme. hybrid applications; the procedure is very similar to the one we saw previously since it has a very similar structure but invoking a new method.

Defining the navigator.device.capture.captureVideo method to capture the video

First we create the method that will be in charge of handling all the video capture, which would be the method navigator.camera.getPicture(app.fotoLoaded, app.errorAlTomarFoto,options) in taking the image but this is used to capture a video via device camera:

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

We will define the above method in a JavaScript function for easy access:

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

As we can realize, the function receives three parameters consisting of a function when the upload of the video shot was successful, the next parameter when an error occurred in the video shot and the last or third parameter corresponds to the number of captures of videos that we will make, in this case there are two, by default the limit is one.

Success and error method

The next step is to define the success and error methods of capturing the video:

    function captureSuccess(mediaFiles) {
        var i, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {
            uploadFile(mediaFiles[i]);
        }
    }

    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, NULL, 'Uh oh!');
    }

The uploadFile method would be responsible for uploading the video to a server using PHP, but this is another story; We have already talked about uploading files with CodeIgniter in case you want to consult this section; finally, the load function in JavaScript:

    function uploadFile(mediaFile) {
        var ft = new FileTransfer(),
            path = mediaFile.fullPath,
            name = mediaFile.name;

        ft.upload(path,
            "http://my.domain.com/upload.php",
            function(result) {
                console.log('Upload success: ' + result.responseCode);
                console.log(result.bytesSent + ' bytes sent');
            },
            function(error) {
                console.log('Error uploading file ' + path + ': ' + error.code);
            },
            { fileName: name });
    }

Now the only thing left for us to do is associate a button with the method we initially created to take the video:

<button onclick="capture();">Capture Image</button>

And this is it, with these simple steps we can use the camera of a device, take a video and even send it to the server with an application that we already have configured, all this with a hybrid app.

JavaScript

Video

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy