RecordRTC：无法播放间隔上传到 Web 服务器的视频文件

Question

我想在每个指定时间将录制的视频上传到网络服务器。下面的代码将视频上传到我的 Django 网络服务器。可以播放第一个上传的视频，但是不能播放下一个视频。知道为什么会这样吗？

几个月前我也在 Github 上打开了一个问题，但我还没有得到任何解决方案。 https://github.com/muaz-khan/RecordRTC/issues/438

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);
}

为什么第一个之后的所有上传都无法播放？

Answer 1

我从其他人那里得到了一些建议，并提出了解决方案。下面是我的代码的 sn-p。

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); });
}

希望以后能对其他人有所帮助。