How to pass recorded video data from javascript to python

问题

I'm trying to pass recorded blobs of video data from some javascript code to my routes so that i can save it
im a newbie

The javascript records video using users webcam and saves it as recordedBlob. I'm trying to pass that recordedBlob data to my python routes for saving.

This is the javascript code..it is in my html file

<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>

This is the routes.py where im trying to pass the recordedBlob data

from flask import render_template, redirect, url_for


@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'))

来源：https://stackoverflow.com/questions/58215648/how-to-pass-recorded-video-data-from-javascript-to-python

标签

javascript

html

python-3.x

Flask