Проблема с загрузкой большого двоичного объекта JavaScript

Я пытаюсь записать видео (уже работающее), используя видеотег HTML5, «getUserMedia» для доступа к камере устройства и API MediaRecorder для захвата кадров и Angular1 для обработки загрузки файла. Теперь у меня возникли проблемы с загрузкой BLOB-объекта на мой PHP-сервер, работающий на Laravel. В настоящее время у меня есть 2 способа загрузки видео, во-первых, с помощью «ng-click», это работает нормально, но когда я программно загружаю BLOB-объект, используя тот же Функция, которую запускает «ng-click», похоже, нарушает mimeType моего Blob, вот как выглядит мой код.

$scope.uploader = function() {
    let fData = new FormData();
    let blob = new Blob($scope.chunk, { type: 'video/webm' }); 
    fData.append('vid', blob)
    $http.post(url, fData, {
      transformRequest: angular.identity,
      headers: {'Content-Type': undefined},
    }, success, error)
})

$timeout(function() {
   $scope.uploader();
}, 10000)

Эта проблема заключается в том, что когда "$scope.uploader()" вызывается с помощью "ng-click", он работает нормально, но при вызове метода "uploader" с использованием "$timeout" он, кажется, меняет mimeType на "application/octet -stream», что вызывает проблему.


javascript html angularjs laravel mediarecorder-api
person DNM    schedule 06.02.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Здравствуйте, попробуйте этот код,

function base64ToBlob(base64Data, contentType) {
   contentType = contentType || '';
   var sliceSize = 1024;
   var byteCharacters = atob(base64Data);
   var bytesLength = byteCharacters.length;
   var slicesCount = Math.ceil(bytesLength / sliceSize);
   var byteArrays = new Array(slicesCount);
   for (var sliceIndex = 0;sliceIndex <slicesCount;++sliceIndex) {
      var begin = sliceIndex * sliceSize;
      var end = Math.min(begin + sliceSize, bytesLength);
      var bytes = new Array(end - begin);
      for (var offset = begin, i = 0;offset <end;++i, ++offset) {
        bytes[i] = byteCharacters[offset].charCodeAt(0);
      }
      byteArrays[sliceIndex] = new Uint8Array(bytes);
   }
   return new Blob(byteArrays, {
    type: contentType});
}

Определить область

$scope.onFile = function(blob) {
    Cropper.encode((file = blob)).then(function(dataUrl) {
    $scope.dataUrl = dataUrl;
    $scope.odataUrl = dataUrl;
    $timeout(showCropper);  // wait for $digest to set image's src
   });
};

Отправить метод

 $scope.uploadImage = function () {

                if ($scope.myCroppedImage === '')
                {

                }
                $scope.msgtype = "";
                $scope.msgtxt = "";
                var fd = new FormData();
                var imgBlob = dataURItoBlob($scope.myCroppedImage);
                fd.append('clogo', imgBlob);
                fd.append('actionfile', 'editimage');
                $http.post(
                        '../user/user_EditCompany.php',
                        fd, {
                            transformRequest: angular.identity,
                            headers: {
                                'Content-Type': undefined
                            }
                        }
                )
                        .success(function (response) {
                            // console.log(response);
                            if (response.status == 'success')
                            {
                          //your code
                     }else{ 
                         //your code
                     }
                     })
                        .error(function (response) {
                            console.log('error', response);
                        });
            };

          function dataURItoBlob(dataURI) {
                var binary = atob(dataURI.split(',')[1]);
                var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
                var array = [];
                for (var i = 0; i < binary.length; i++) {
                    array.push(binary.charCodeAt(i));
                }
                return new Blob([new Uint8Array(array)], {
                    type: mimeString
                });
            }
person Community    schedule 06.02.2018
comment
Я предполагаю, что это для изображения? Будет ли это работать на видео? - person DNM; 07.02.2018

arrow_upward
0
arrow_downward

Спасибо, проблема была вызвана ограничением загрузки и публикации в моем php.ini.

person DNM    schedule 08.02.2018