Córdoba - Captura de medios

Este complemento se utiliza para acceder a las opciones de captura del dispositivo.

Paso 1: instalación del complemento de captura de medios

Para instalar este complemento, abriremos command prompt y ejecuta el siguiente código -

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture

Paso 2: agregar botones

Como queremos mostrarte cómo capturar audio, imagen y video, crearemos tres botones en index.html.

<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>

Paso 3: agregar oyentes de eventos

El siguiente paso es agregar detectores de eventos dentro onDeviceReady en index.js.

document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);

Paso 4A - Función de captura de audio

La primera función de devolución de llamada en index.js es audioCapture. Para iniciar la grabadora de sonido, usaremoscaptureAudiométodo. Estamos usando dos opciones:limit permitirá grabar solo un clip de audio por operación de captura y duration es el número de segundos de un clip de sonido.

function audioCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureAudio(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Cuando presionamos AUDIO , se abrirá la grabadora de sonido.

La consola mostrará la matriz devuelta de objetos capturados por los usuarios.

Paso 4B - Función de captura de imagen

La función de captura de imagen será la misma que la anterior. La única diferencia es que estamos usandocaptureImage método esta vez.

function imageCapture() {
   var options = {
      limit: 1
   };
   navigator.device.capture.captureImage(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Ahora podemos hacer clic IMAGE para iniciar la cámara.

Cuando tomemos una foto, la consola registrará la matriz con el objeto de imagen.

Paso 4C - Función de captura de video

Repitamos el mismo concepto para capturar video. UsaremosvideoCapture método esta vez.

function videoCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureVideo(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Si presionamos VIDEO , la cámara se abrirá y podremos grabar el video.

Una vez que se guarda el video, la consola devolverá la matriz una vez más. Esta vez con objeto de video adentro.