Запись RT C загрузка на сервер проблема .WEBM - PullRequest
Новая
       118

Запись RT C загрузка на сервер проблема .WEBM

0 голосов
/ 11 апреля 2020

Во второй день этого, надеясь, что кто-то может помочь, JS новичок здесь пытается получить этот скрипт, который записывает 10 секунд видео и загружает на сервер, мне удалось избавиться от всех ошибок, но когда blob / file is загружен, он не действителен и имеет одинаковый размер 5k каждый раз, поэтому загружаемая информация каким-то образом неправильна

В разных ситуациях код присутствует в целых числах rnet, в большинстве использовались фрагменты из сообщений Stackoverflow Живой сценарий заполнен, только что удален для этого поста, снова часть загрузки работает, но неверный или неверный файл загружен на сервер 

<script>
var player = videojs('myVideo', {
    controls: true,
    // loop: false,
    width: 320,
    height: 240,
    // fluid: true,
    plugins: {
        record: {
            maxLength: 10,
            debug: true,
            audio: true,
            video: true,
        }
    }
}, function(){

    videojs.log('Using video.js', videojs.VERSION,
        'with videojs-record', videojs.getPluginVersion('record'),
        'and recordrtc', RecordRTC.version);
});



player.on(' r', function() {
    console.log('device error:', player.deviceErrorCode);
});
player.on('error', function(error) {
    console.log('error:', error);
});

player.on('startRecord', function() {

});

//player.record();
window.player = player;

player.on('finishRecord', function() {
  console.log('blob size', player.recordedData);
  window.recordedData = player.recordedData;
  var fileName = getFileName('webm');
  player.record().saveAs({'video': fileName});

     // upload recorded data
    upload(player.recordedData);

 });



function upload(blob) {
      var serverUrl = '/videos/';    
      var fileName = getFileName('webm');
      var fileObject = new File([blob], fileName, {type: 'video/webm' });                       

     var formData = new FormData();        
                        formData.append('video-blob', fileObject);  
                        formData.append('video-filename', fileObject.name);   
     var upload_url = 'save.php'; 

     console.log('upload recording ' + fileObject + ' to ' + serverUrl);

     var upload_directory = upload_url;
                        $.ajax({
                            url: upload_url,
                            data: formData,
                            cache: false,
                            contentType: false,
                            processData: false,
                            type: 'POST',
                            success: function(response) {
                                if (response === 'success') {

                                    document.getElementById('myVideo').srcObject = null;
                                //    document.getElementById('myVideo').src = fileDownloadURL;

                                } else {
                                    alert(response); // error/failure
                                }
                            }
                        });





}



// this function is used to generate random file name
            function getFileName(fileExtension) {
                var d = new Date();
                var year = d.getUTCFullYear();
                var month = d.getUTCMonth();
                var date = d.getUTCDate();
                return 'Fight-' + year + month + date + '-' + getRandomString() + '.' + fileExtension;
            }

            function getRandomString() {
                if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
                    var a = window.crypto.getRandomValues(new Uint32Array(3)),
                        token = '';
                    for (var i = 0, l = a.length; i < l; i++) {
                        token += a[i].toString(36);
                    }
                    return token;
                } else {
                    return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
                }
            }
</script>
...