将Ionic视频捕获上传到Firebase存储

我试图将视频捕获上传到firebase存储，但上传文件变得损坏，或者当我这样做时，blob格式不正确。将Ionic视频捕获上传到Firebase存储

$scope.takeVideo = function() { 
    var options = { 
     quality: 100, 
     destinationType: Camera.DestinationType.DATA_URL, 
     sourceType: Camera.PictureSourceType.CAMERA, 
     allowEdit: false, 
     encodingType: Camera.EncodingType.JPEG, 
     targetWidth: 100, 
     targetHeight: 100, 
     saveToPhotoAlbum: false, 
     correctOrientation: false, 
     duration: 10 
    }; 

    $cordovaCapture.captureVideo(options).then(function (imageData) { 
     $scope.video = imageData[0]; 
     var videoBlob = new Blob([$scope.video], { type: "video/mp4" }); 
     VideosFactory.SaveVideo(function (data) { 
      $scope.video = data; 
      $scope.SendPuzzleToFactory(); 
     }, $scope.video.name, videoBlob); 
    }, function (err) { 
     // An error occurred. Show a message to the user 
    }); 
}

VideosFactory.SaveVideo方法

SaveVideo: function (callback, referenceName, videoFile) { 
     var storageRef = firebase.storage().ref(); 
     var videosRef = storageRef.child('videos/' + $rootScope.User.uid + "/" + referenceName); 
     var uploadTask = videosRef.put(videoFile); 
     uploadTask.on('state_changed', function (snapshot) { 
      // Observe state change events such as progress, pause, and resume 
      // See below for more detail 
     }, function (error) { 
      // Handle unsuccessful uploads, alert with error message 
      reject(error) 
     }, function() { 
      // Handle successful uploads on complete 
      var downloadURL = uploadTask.snapshot.downloadURL; 

      // when done, pass back information on the saved image 
      callback(downloadURL) 
     }); 
    }

当我尝试下载，从控制台或下载过的代码，它不会工作。

更新下面是我从视频捕获中获得的文件。

媒体文件

{ 
end: 0 
fullPath: "file:/storage/emulated/0/DCIM/Camera/VID_20160924_162045.mp4" 
lastModified: null 
lastModifiedDate: 1474748448000 
localURL: "cdvfile://localhost/sdcard/DCIM/Camera/VID_20160924_162045.mp4" 
name: "VID_20160924_162045.mp4" 
size: 8083778 
start: 0 
type: "video/mp4" 
}

我需要将其转换成一个blob基本。

更新2 我已更改captureVideo方法与下面的代码将文件转换为base64。

$cordovaCapture.captureVideo(options).then(function (videoData) { 
     var video = videoData[0]; 
     var fileReader = new FileReader(), file; 
     fileReader.onload = function (readerEvt) { 
      var base64 = readerEvt.target.result; 
      var blob = new Blob([new Uint8Array(this.result)], { type: "video/mp4" }); 
      $scope.video = blob; 
      VideosFactory.SaveVideo(function (data) { 
       $scope.video = data; 
       $scope.SendPuzzleToFactory(); 
      }, $scope.video.name, blob); 
     }; 
     file = new window.File(video.name, video.localURL, 
           video.type, video.lastModifiedDate, video.size); 
     fileReader.readAsDataURL(file); 
    }, function (err) { 
     // An error occurred. Show a message to the user 
    });

来源

2016-09-20 asipahi

任何解决方案呢？ –

不幸的是我还没能解决它。但是我觉得我正处在正确的轨道上。我用迄今为止发现的更新了我的问题。 – asipahi

然而，图片上传相对比较容易，我正在用我自己的服务器进行视频上传 –

-1

我认为（因为我什么都不知道科尔多瓦或视频捕获），即这里的问题是在这个片段：

$cordovaCapture.captureVideo(options).then(function (imageData) { 
    $scope.video = imageData[0]; 
    var videoBlob = new Blob([$scope.video], { type: "video/mp4" }); 
    ... 
});

在我看来就像imageData[0]会拉断的第一个字节左右的视频，而你可能想要的全部。改变这是

$cordovaCapture.captureVideo(options).then(function (imageData) { 
    var videoBlob = new Blob([imageData], { type: "video/mp4" }); 
    ... 
});

似乎它可能工作。

来源

2016-09-20 22:20:40

不幸的是，情况并非如此。 imageData是一个对象数组。第一个是第一个视频。 – asipahi

我认为这将与“@离子本地/文件”
有了这个libary的帮助下，你可以得到选择视频的传输数据的URL
所以，你需要做以下变化

$cordovaCapture.captureVideo(options).then(function (imageData) { 
    var fullPath = imageData[0].fullPath; 
    var directoryPath = fullPath.substr(0, fullPath.lastIndexOf('/')); // URL to directory without filename 
    var fileName = fullPath.substr(fullPath.lastIndexOf('/') + 1); // filename with extension 
    $file.readAsDataURL(directoryPath, fileName).then((dataURL) => { 
     $scope.video = dataURL; 
    }, (err) => { 
     // Handle errors here 
    }); 
}, function (err) { 
    // An error occurred. Show a message to the user 
});

在SaveVideo方法做到以下几点变化

var uploadTask = videosRef.putString(videoFile, 'data_url', { contentType: 'video/mp4' });

我认为这将有助于。
谢谢

来源

2018-01-30 15:36:09

将Ionic视频捕获上传到Firebase存储

回答

相关问题