如何将录制的视频数据从javascript传递到python

时间:2019-10-03 08:58:39

标签: javascript html python-3.x flask

我正在尝试将录制的视频数据从某些javascript代码传递到我的路线,以便我可以保存它
成为新手

javascript使用用户网络摄像头录制视频,并将其保存为recordedBlob。我正在尝试将记录的Blob数据传递到我的python路由进行保存。

这是javascript代码。它在我的html文件中

<script type="text/javascript">

  let video = document.getElementById("video");
  let recording = document.getElementById("recording");
  let startButton = document.getElementById("startButton");
  let stopButton = document.getElementById("stopButton");
  let downloadButton = document.getElementById("downloadButton");
  let logElement = document.getElementById("log");

  let recordingTimeMS = 5000;


  function log(msg) {
    logElement.innerHTML += msg + "\n";
  }
  function wait(delayInMS) {
    return new Promise(resolve => setTimeout(resolve, delayInMS));
  }
  function startRecording(stream, lengthInMS) {
    let recorder = new MediaRecorder(stream);
    let data = [];

    recorder.ondataavailable = event => data.push(event.data);
    recorder.start();
    log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");

    let stopped = new Promise((resolve, reject) => {
      recorder.onstop = resolve;
      recorder.onerror = event => reject(event.name);
    });

    let recorded = wait(lengthInMS).then(
      () => recorder.state == "recording" && recorder.stop()
    );

    return Promise.all([
      stopped,
      recorded
    ])
    .then(() => data);
  }
  function stop(stream) {
    stream.getTracks().forEach(track => track.stop());
  } 
  startButton.addEventListener("click", function() {

    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(stream => {
      video.srcObject = stream;
      downloadButton.href = stream;
      video.captureStream = video.captureStream || video.mozCaptureStream;
      return new Promise(resolve => video.onplaying = resolve);
    }).then(() => startRecording(video.captureStream(), recordingTimeMS))
    .then (recordedChunks => {
      let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
      recording.src = URL.createObjectURL(recordedBlob);
      downloadButton.href = recording.src;
      downloadButton.download = "RecordedVideo.webm";

      log("Successfully recorded " + recordedBlob.size + " bytes of " +
          recordedBlob.type + " media.");
    })
    .catch(log);
  }, false);

  stopButton.addEventListener("click", function() {
    stop(video.srcObject);
  }, false);
   </script>

这是routes.py,我尝试传递记录的Blob数据

@posts.route('/post/new/vlog',methods=['GET','POST'])
def new_vlog():
    if current_user.is_authenticated:
        return render_template('vlog.html',title='New Vlog',video={recordedBlob})
        if video.data:
            video_file = save_video(video.data)
            return redirect(url_for('main.home'))
    else:
            return redirect(url_for('users.login'))

0 个答案:

没有答案