將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存儲

回答

相關問題