DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
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 

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

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Loader pino con CSS

Loader pino con CSS

Animacion SVG sencilla con solo HTML

Animacion SVG sencilla con solo HTML

Algunos artículos que te pueden interesar

Botones con fondo corredizo en CSS

Botones con fondo corredizo en CSS

En esta entrada veremos como crear unos fantásticos botones con fondo corredizo.

Andrés Cruz 21-04-2015

Entendiendo la propiedad perspective (perspectiva) en CSS

Entendiendo la propiedad perspective (perspectiva) en CSS

La propiedad perspective agrega un efecto tridimensional afectando la distancia que hay entre un observador y las figuras en el plano a través de una variación en el eje Z; en otras palabras, permite acercar/alejar figuras en el plano.

Andrés Cruz 05-02-2015

Truco para los bordes en CSS: Bordes internos

Truco para los bordes en CSS: Bordes internos

En esta entrada veremos como crear bordes que no influyan en el tamaño del contenedor; como bien sabrás al definir distintas propiedades como padding, margin y/o border éstas repercuten directamente en el tamaño del contenedor.

Andrés Cruz 13-04-2015