Interval upload to Web Server

[Sokunthaneth]

Hi, I want to upload the recorded video at each specified time to web server. The below code upload the video to my Django web server fine. The first upload video can be played, however, the next videos can't be played. It just blank. Any idea why this occur? Thank you so much!

` // Upload video to Web Server occassionally, change "setInterval" parameter in millisecond

setInterval(progressive_upload, 5000);
function progressive_upload(){
  var email = document.getElementById('user_id').value;
  var tempChunk;
  console.log(recordedChunks);
  if(count != 0){
    tempChunk = recordedChunks.slice(last_blob, recordedChunks.length);
    tempChunk.unshift(recordedChunks[0]);
    console.log(tempChunk);
  }
  else {
    tempChunk = recordedChunks.slice(0, recordedChunks.length);
    console.log(tempChunk);
  }
  last_blob = recordedChunks.length;
  count += 1;
  var blob = new Blob(tempChunk, {type: "video/webm"});
  var data = new FormData();
  data.append('data_blob', blob, email + '_' + count + '.' + blob.type.split('/')[1]);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://127.0.0.1:8000/video_upload/', true);
  xhr.send(data);
}`

Why all uploads after the first one couldn't be played?

[oixan]

i have noticed that after the first one other files have .bin extension try to change it and see if work.

[Sokunthaneth]

@oixan I couldn't find the .bin file you mention. The video uploaded format is (.webm). Could you elaborate it a bit? Thank for helping.

[muaz-khan]

@Sokunthaneth either concatenate all blobs into single WebM/Mp4/FLV file using Ffmpeg. Or otherwise stop and restart the recorder after each specific interval.

It seems that you're using MediaRecorder API; here is how to use it:

var recorder;
var counter = 1;

(function looper() {
    var name = 'file_' + counter + '.webm';

    var blobs = [];
    recorder = new MediaRecorder(stream, {
        mimeType: 'video/vp9'
    });

    recorder.ondataavailable = function(blob) {
        blobs.push(blob);
    };

    recorder.onstop = function() {
        var file = new File(blobs, name, {
            type: 'video/webm'
        });

        var data = new FormData();
        data.append('data_blob', file, name);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://127.0.0.1:8000/video_upload/', true);
        xhr.send(data);

        counter++;
        looper();
    };
    recorder.start(999999999999);
    setTimeout(function() {
        recorder.stop();
    }, 5 * 1000);
})();

[Sokunthaneth]

@muaz-khan thank for the guidance. I decide to use stop and restart the recorder after each specific interval approach. Below is the snippet of my code.

    setInterval(progressive_upload, 900000);
    function progressive_upload(){
      var email = document.getElementById('user_id').value;
      theRecorder.stop();
      theStream.getTracks().forEach(track => { track.stop(); });
      count += 1;
      var blob = new Blob(recordedChunks, {type: "video/webm"});
      var data = new FormData();
      data.append('data_blob', blob, email + '_' + count + '.' + blob.type.split('/')[1]);
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://localhost:8000/video_upload/', true);
      xhr.send(data);
      navigator.mediaDevices.getUserMedia(constraints)
          .then(function(stream){
            theStream = stream;
            var video = document.querySelector('video');
            video.src = URL.createObjectURL(stream);
            try {
              recorder = new MediaRecorder(stream, {mimeType : "video/webm"});
            } catch (e) {
              console.error('Exception while creating MediaRecorder: ' + e);
              return;
            }
            recordedChunks = []
            theRecorder = recorder;
            recorder.ondataavailable = 
                (event) => {
                  recordedChunks.push(event.data); 
              };
            recorder.start(100);
          })
          .catch(e => { console.error('getUserMedia() failed: ' + e); });
    }