DesarrolloLibre

Desarrollo Web, Android y mucho más

08-05-2017

En una anterior entrada vimos cómo capturar una imagen seleccionando la aplicación de la galería y cómo tomar una fotografía empleando la cámara del dispositivo con PhoneGap, ahora veremos cómo realizar una captura de videos con PhoneGap; el procedimiento es muy parecido al vimos anteriormente ya que presenta una estructura muy similar pero invocando un nuevo método.

Definiendo el método navigator.device.capture.captureVideo para la captura del vídeo

Primero creamos el método que se encargará de manejar toda la captura del video, que vendría siendo lo que es el métodonavigator.camera.getPicture(app.fotoCargada, app.errorAlTomarFoto,options) en la toma de la imagen pero este sirve para capturar un video a través de la cámara del dispositivo:

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

Definiremos el método anterior en una función JavaScript para un fácil acceso:

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

Cómo podemos darnos cuenta, la función recibe tres parámetros que consisten en una función cuando la carga de la toma del video fue exitosa, el siguiente parámetro cuando ocurrió un error en la toma del video y el último o tercer parámetro corresponde a la cantidad de capturas de videos que realizaremos, en este caso son dos, por defecto el límite es uno.

Método success y error

El siguiente paso consiste en definir los métodos de exito y error de la captura del 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!');
    }

El método de uploadFile se encargaría de realizar la carga del video a un servidor mediante un PHP, pero esto ya es otra historia; ya hemos hablado uploads de archivos con CodeIgniter en caso de que quiera consultar este apartado; finalmente, la función de carga en 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 });
    }

Ahora lo único que nos resta es asociar un botón al método que creamos en un inicio para la toma del video:

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

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Árbol arcoíris creciente

Árbol arcoíris creciente

Algunos artículos que te pueden interesar

Dando los primeros pasos con FlexBox: La caja flexible con CSS3

Dando los primeros pasos con FlexBox: La caja flexible con CSS3

Con la propiedad FlexBox podemos construir cajas flexibles, fluidas y adaptables con distintos tamaños y que sean adaptables facilmente a la resolución del dispositivo.

Andrés Cruz 22-09-2014

Geolocalización con JavaScript y Google Maps

Geolocalización con JavaScript y Google Maps

Utilizando la API de Google Maps para mostrar la ubicación del usuario.

Andrés Cruz 30-09-2013

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

En este artículo veremos como obtener los tres canales RGB de una imagen y operarlos por separados.

Andrés Cruz 15-05-2014