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

Question

我正在尝试将捕获的视频上传到 firebase 存储，但上传文件已损坏或 blob 的格式不正确。

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

Answer 1

我认为这将适用于“@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' });

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