samedi 9 novembre 2019

How to upload video file from blob url without download it using jquery ajax

I am trying to upload a video file that is in blob data type but thing is i don't want to download that file. just extract that file from blob url and put that file in a variable then upload it from there to any server.

I am using ffmpeg and html5 and jquery to record video from camera and tried to get that file but getting video file in blob format

<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  = "";
            var titles = "testing.mp4";


            $.ajax({
                url:"",
                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);
        }

    }

I expect it to save that video file using ajax on stop recording button click event but blob video file is not the proper video file i am getting that is just a url : blob:http://localhost:8000/8cee30d0-6b0b-4f8a-bb7e-6a57064b03e1 like this



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire