Cordova - Medienerfassung

Dieses Plugin wird für den Zugriff auf die Erfassungsoptionen des Geräts verwendet.

Schritt 1 - Installieren des Media Capture Plugins

Um dieses Plugin zu installieren, öffnen wir command prompt und führen Sie den folgenden Code aus -

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

Schritt 2 - Schaltflächen hinzufügen

Da wir Ihnen zeigen möchten, wie Sie Audio, Bild und Video aufnehmen, erstellen wir drei Schaltflächen in index.html.

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

Schritt 3 - Ereignis-Listener hinzufügen

Der nächste Schritt ist das Hinzufügen von Ereignis-Listenern onDeviceReady im index.js.

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

Schritt 4A - Audiofunktion erfassen

Die erste Rückruffunktion in index.js ist audioCapture. Um den Soundrekorder zu starten, verwenden wircaptureAudioMethode. Wir verwenden zwei Optionen -limit ermöglicht die Aufnahme von nur einem Audioclip pro Einzelaufnahmevorgang und duration ist die Anzahl der Sekunden eines Soundclips.

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

Wenn wir drücken AUDIO Taste wird der Soundrekorder geöffnet.

Die Konsole zeigt das zurückgegebene Array von Objekten an, die Benutzer erfasst haben.

Schritt 4B - Bildaufnahmefunktion

Die Funktion zum Aufnehmen von Bildern ist dieselbe wie die letzte. Der einzige Unterschied ist, dass wir verwendencaptureImage Methode dieses Mal.

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

Jetzt können wir klicken IMAGE Taste zum Starten der Kamera.

Wenn wir ein Bild aufnehmen, protokolliert die Konsole das Array mit dem Bildobjekt.

Schritt 4C - Videofunktion aufnehmen

Wiederholen wir das gleiche Konzept für die Videoaufnahme. Wir werden verwendenvideoCapture Methode dieses Mal.

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

Wenn wir drücken VIDEO Taste öffnet sich die Kamera und wir können das Video aufnehmen.

Sobald das Video gespeichert ist, gibt die Konsole das Array erneut zurück. Diesmal mit Videoobjekt im Inneren.