将Ionic Video Capture上传到Firebase存储

时间:2016-09-20 17:44:25

标签: angularjs ionic-framework firebase cordova-plugins firebase-storage

我正在尝试将视频捕获上传到firebase存储,但是当我这样做时,上传文件已损坏或blob格式不正确。

using System.Net.Http.Formatting

VideosFactory.SaveVideo Method

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

Video upload screenshot

当我尝试从控制台下载或通过代码下载时,它无法正常工作。

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

MediaFile

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

我需要基本上将它转换为blob。

更新2 我已使用以下代码更改了captureVideo方法,以将文件转换为base64。

{
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"
}

2 个答案:

答案 0 :(得分:0)

我认为这适用于'@ ionic-native / file' 借助此库,您可以获取所选视频的数据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' });

我认为这会有所帮助。
感谢

答案 1 :(得分:-1)

我假设(因为我对Cordova或视频捕获一无所知),这个问题就在这个片段中:

prepare_data

在我看来,$cordovaCapture.captureVideo(options).then(function (imageData) { $scope.video = imageData[0]; var videoBlob = new Blob([$scope.video], { type: "video/mp4" }); ... }); 会拉出视频的第一个字节左右,而您可能想要所有这些。将此更改为

imageData[0]

似乎可能有用。