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

Atomo con CSS

Atomo con CSS

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Colourlovers: Paletas de colores lista para el diseño web

Colourlovers: Paletas de colores lista para el diseño web

Algunos artículos que te pueden interesar

Selectores en JavaScript

Selectores en JavaScript

Muchas veces usamos jQuery por facilidad a la hora de seleccionar elementos del DOM, y poder trabajar con ellos. Pero, podemos acceder los mismos elementos de formas similares con puro javascript.

Andrés Cruz 27-08-2013

Primeros pasos con la APi de Soundcloud con JavaScript

Primeros pasos con la APi de Soundcloud con JavaScript

Se explica como emplear la API de Soundcloud para crear widget de canciones en nuestra página web controlar los widgets en base a eventos.

Andrés Cruz 27-04-2017

¿Cómo anclar el Footer a la parte inferior de la pantalla con solo CSS?

¿Cómo anclar el Footer a la parte inferior de la pantalla con solo CSS?

En esta nueva entrega, veremos ¿Cómo anclar el Footer a la parte inferior de la pantalla con solo CSS?

Andrés Cruz 14-08-2014