如何从Cordova媒体捕获中显示图像和播放音频

时间:2014-12-20 05:20:14

标签: angularjs cordova

我正在尝试使用cordova和ngCordova设置媒体捕获 拍摄照片并录制音频后,我应该使用哪个功能或属性来显示图像并播放音频?

我尝试将fullPath和cdvfile作为图像src,但不起作用。还尝试将图像数据用作无效的base64数据

任何提示?

$ cordovaCamera作品

   $scope.captureImage = function() {
      var options = {
        limit: 3
      };

       $cordovaCamera.getPicture(options).then(function(imageData) {
         var i, prop;
         $scope.debug = '';
         for (prop in imageData[i]) {
           $scope.debug += prop + ':' + imageData[i][prop] + '\n';
         }

         $scope.imgs.push({

           src: "data:image/jpeg;base64," + imageData
         });

       }, function(error) {
//        // An error occured. Show a message to the user
        str = 'code: ' + error.code + '\n' + 'message: ' + error.message + '\n';
alert(str);
       });
      });

但我实际上想用$ cordovaCapture来捕捉图像和音频。我使用FileService返回可以使用的文件路径 按建议尝试window.resolveLocalFileSystemURL,但没有运气。 那我在这里做错了什么?

.controller('MyCtrl', [
  '$scope', '$cordovaCapture', '$cordovaCamera', 'FileService',
  function($scope, $cordovaCapture, $cordovaCamera, FileService) {
    $scope.imgs = [];
    $scope.ados = [];
    $scope.debug = '';

    $scope.captureAudio = function() {
      var options = {
        limit: 3,
        duration: 20
      };

      $cordovaCapture.captureAudio(options).then(function(audioData) {
        // Success! Audio data is here
        var i, path, len, prop;
        for (i = 0, len = audioData.length; i < len; i += 1) {
          // path = mediaFiles[i].fullPath;
          // do something interesting with the file
          $scope.ados.push(audioData[i]);  // fullPath at file:///var/xxxxxxx results in 404
        }
      }, function(error) {
        // An error occured. Show a message to the user
      });
    };

    $scope.captureImage = function() {
      var options = {
    quality : 75,
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType : Camera.PictureSourceType.CAMERA,
    allowEdit : true,
    encodingType: Camera.EncodingType.JPEG,
    targetWidth: 720,
    targetHeight: 1280,
    saveToPhotoAlbum: false
  };

  $cordovaCamera.getPicture(options).then(function(imageData) {

    var path = imageData;  // this gives /var/mobile/Containers/Data/Application/91036FB8-4195-4902-99E1-ED943E738DB3/tmp/cdv_photo_001.jpg

    FileService.readFile(path).then(function(result) {

      $scope.imgs.push({
        path: result
      });
    }, function(error) {
      var prop, msg;
      msg += 'Read file error:\n';
      for (prop in error.target) {
        msg += prop + ': ' + error.target[prop] + '\n';
      }
      alert(msg);
    });


  }, function(err) {
    // An error occured. Show a message to the user
    alert(err);
  });
    };
  }
])

.service('FileService', [
  '$cordovaFile', '$q',
  function($cordovaFile, $q) {
    this.readFile = function(path) {
      // Reads a file as TEXT
      var deferred = $q.defer();

      function onFileSystemSuccess(fileSystem) {
        alert('onFileSystemSuccess:'+fileSystem.name);  // this is OK
      }

      function onResolveSuccess(fileEntry) {
        alert('onResolveSuccess:'+fileEntry.name);
// can resolve to "cdv_photo_001.jpg" fine

        fileEntry.file(function(file) {
          var reader = new FileReader();

          reader.onloadend = function(evt) {
// this triggers second "Loaded: null"

            alert('Loaded: ' + evt.target.result);
            deferred.resolve(evt);
          };
          reader.onerror = function(evt) {
// this triggers first "Error: null"

            alert('Error: ' + evt.target.result);
            deferred.reject(evt);
          };

          reader.readAsText(file);
        });
      }

      function fail(evt) {
        alert('fail:'+evt.target.error.code);
      }

      window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, fail);
      window.resolveLocalFileSystemURL(path, onResolveSuccess, fail);

      return deferred.promise;
    };
  }
])

2 个答案:

答案 0 :(得分:0)

这与this question有些相同,但我不会将其视为重复。首先看看我的答案,它应该为图像和音频做。当然应该更改正则表达式(/ ^ data:audio / mpeg; base64,/)以匹配您的格式,对于正确的MIME类型,请参考here。如果这对你不起作用,请告诉我!

答案 1 :(得分:0)

要显示图像,结果我必须使用imageData [i] .localURL作为src,即cdvfile:// xxxx