Как загрузить видеофайл с URL-адреса BLOB-объекта без загрузки с помощью jquery ajax - PullRequest
0 голосов
/ 09 ноября 2019

Я пытаюсь загрузить видеофайл с типом данных BLOB-объектов, но я не хочу скачивать этот файл. просто извлеките этот файл из URL-адреса BLOB-объекта и поместите этот файл в переменную, а затем загрузите его оттуда на любой сервер.

Я использую ffmpeg, html5 и jquery для записи видео с камеры и пытался получить этот файл, но получаю видеофайл в формате BLOB-объектов

<div id="container">
    <div class="col-md-12">
         <div class="col-md-6">
             <video id="gum" playsinline autoplay muted controls width="500px"></video>
          </div>
          <div class="col-md-6">
               <video id="recorded" playsinline loop width="500px"></video>
           </div>
      </div>

      <div>
           <button id="start">Start camera</button>
           <button id="record" disabled>Start Recording</button>
           <button id="play">Play</button>
           <button id="download" disabled >Upload</button>
      </div>

      <div style="visibility: hidden">
       <p>Echo cancellation: <input type="checkbox" id="echoCancellation"></p>
       </div>

    <div>
          <span id="errorMsg"></span>
     </div>
</div>

<script>
function startRecording() 
    {
        recordedBlobs = [];
        let options = {mimeType: 'video/webm;codecs=vp9'};

        if (!MediaRecorder.isTypeSupported(options.mimeType)) 
        {
            console.error(`${options.mimeType} is not Supported`);
            errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
            options = {mimeType: 'video/webm;codecs=vp8'};

            if (!MediaRecorder.isTypeSupported(options.mimeType)) 
            {
                console.error(`${options.mimeType} is not Supported`);
                errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
                options = {mimeType: 'video/webm'};

                if (!MediaRecorder.isTypeSupported(options.mimeType)) 
                {
                    console.error(`${options.mimeType} is not Supported`);
                    errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
                    options = {mimeType: ''};
                }
            }
        }

        try 
        {
            mediaRecorder = new MediaRecorder(window.stream, options);
            const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
            recordedVideo.src = null;
            recordedVideo.srcObject = null;

            recordedVideo.src = window.URL.createObjectURL(superBuffer);
            recordedVideo.controls = true;
            recordedVideo.load();
            recordedVideo.muted = false;

            console.log(recordedVideo.src);
            console.log(mediaRecorder);
        } 
        catch (e) 
        {
            console.error('Exception while creating MediaRecorder:', e);
            errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
            return;
        }

        console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
        recordButton.textContent = 'Stop Recording';
        // playButton.disabled = true;
        // downloadButton.disabled = true;
        mediaRecorder.onstop = (event) => {
            console.log('Recorder stopped: ', event);
        };
        mediaRecorder.ondataavailable = handleDataAvailable;
        mediaRecorder.start(10); // collect 10ms of data
        console.log('MediaRecorder started', mediaRecorder);
    }

    function stopRecording() {

        mediaRecorder.stop();
        console.log('Recorded Blobs: ', recordedBlobs);
        const blob = new Blob(recordedBlobs, {type: 'video/webm'});
        const url = window.URL.createObjectURL(blob);
        // recordedVideo.src = window.URL.createObjectURL(blob);
        // const a = document.createElement('a');
        // a.style.display = 'none';
        // a.href = url;
        // a.download = 'test.webm';
        // document.body.appendChild(a);
        // a.click();
        // setTimeout(() => {
        //     document.body.removeChild(a);
        //     window.URL.revokeObjectURL(url);
        // }, 100);
        console.log(url);
        if(url)
        {

            recordedVideo.src = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = 'test.webm';
            document.body.appendChild(a);
            // a.click();
            // setTimeout(() => {
            //     document.body.removeChild(a);
            //     window.URL.revokeObjectURL(url);
            // }, 100);
            var files  = url;
            var token  = "{{ csrf_token() }}";
            var titles = "testing.mp4";


            $.ajax({
                url:"{{ url('lms/live-content/add') }}",
                type:"POST",
                __proto__: Blob,
                data:{file:files, _token:token, title: titles},
                // async:true,
                // xhr: function()
                // {
                //     if(window.XMLHttpRequest)
                //     {   var xhr = new window.XMLHttpRequest();
                //         //Upload progress
                //         xhr.upload.addEventListener("progress", function(evt){
                //             if (evt.lengthComputable) {
                //                 var percentComplete = evt.loaded / evt.total;
                //                 //Do something with upload progress
                //             }
                //         }, false);
                //     }
                // },
                success:function(data){
                    alert("file uploaded..");
                },
                error: function(data){
                    console.log(data);
                }   
            });
        }else{
            console.log(url);
        }

    }

Я ожидаю этогочтобы сохранить этот видеофайл с помощью ajax при остановке записи, нажмите кнопку события, но видеофайл blob - это не тот видеофайл, который я получаю, а просто URL: blob: http://localhost:8000/8cee30d0-6b0b-4f8a-bb7e-6a57064b03e1 как этот

...