如何显示来自 Cordova 媒体捕获的图像和播放音频

Posted 2023-03-15

【中文标题】如何显示来自 Cordova 媒体捕获的图像和播放音频

【英文标题】：How to display image and playback audio from Cordova media capture

【发布时间】：2014-12-20 05:20:14

【问题描述】：

我正在尝试使用 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;
    ;
  
])

【参考方案1】：

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

【讨论】：

更新了原帖中的代码。还是不行。

似乎任何与文件相关的函数都以错误代码 5 结尾，包括通过 $ngCordovaFile 的 createFile / checkFile

【参考方案2】：

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