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

Sistema sola con CSS

Sistema sola con CSS

Partículas con Canvas en JavaScript

Partículas con Canvas en JavaScript

Botón flotante

Botón flotante

Algunos artículos que te pueden interesar

Cómo crear una tabla con resaltado en columnas y filas (vertical y horizontal)

Cómo crear una tabla con resaltado en columnas y filas (vertical y horizontal)

En esta entrada veremos cómo crear una tabla sencilla con resaltados (highlight) sobre las celdas seleccionadas horizontal y verticalmente (columnas y filas).

Andrés Cruz 05-05-2016

¿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

2 tags HTML que no conocias <base> y <abbr>

2 tags HTML que no conocias <base> y <abbr>

Andrés Cruz 19-11-2015