Cordova - Media Capture

Questo plugin viene utilizzato per accedere alle opzioni di acquisizione del dispositivo.

Passaggio 1: installazione del plug-in Media Capture

Per installare questo plugin, apriremo command prompt ed esegui il codice seguente:

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

Passaggio 2: aggiungere pulsanti

Dato che vogliamo mostrarti come catturare audio, immagini e video, creeremo tre pulsanti in index.html.

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

Passaggio 3: aggiungere ascoltatori di eventi

Il passaggio successivo consiste nell'aggiungere ascoltatori di eventi all'interno onDeviceReady in index.js.

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

Passaggio 4A - Funzione di acquisizione dell'audio

La prima funzione di callback in index.js è audioCapture. Per avviare il registratore di suoni, useremocaptureAudiometodo. Stiamo usando due opzioni:limit consentirà la registrazione di un solo clip audio per singola operazione di acquisizione e duration è il numero di secondi di un clip audio.

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');
   }
}

Quando premiamo AUDIO pulsante, il registratore di suoni si aprirà.

La console mostrerà la matrice restituita di oggetti catturati dagli utenti.

Passaggio 4B - Funzione di acquisizione dell'immagine

La funzione per l'acquisizione dell'immagine sarà la stessa dell'ultima. L'unica differenza è che stiamo usandocaptureImage metodo questa volta.

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');
   }
}

Ora possiamo fare clic IMAGE pulsante per avviare la fotocamera.

Quando scattiamo una foto, la console registrerà l'array con l'oggetto immagine.

Passaggio 4C - Funzione di acquisizione video

Ripetiamo lo stesso concetto per l'acquisizione di video. Noi useremovideoCapture metodo questa volta.

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');
   }
}

Se premiamo VIDEO pulsante, la fotocamera si aprirà e possiamo registrare il video.

Una volta salvato il video, la console restituirà nuovamente l'array. Questa volta con l'oggetto video all'interno.