如何将前端录制的视频发送至Flask后端并存储到指定文件夹？

步骤1：修改前端JavaScript代码，添加上传逻辑 #

完善你的saveRecording函数，把录制好的视频Blob通过FormData发送到Flask后端接口：

// 全局变量存储录制片段
let recordedChunks = [];
let mediaRecorder;

function startRecording() {
  navigator.mediaDevices.getDisplayMedia({ video: true }).then(stream => {
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = event => recordedChunks.push(event.data);
    mediaRecorder.start();
    startRecordingButton.disabled = true;
    stopRecordingButton.disabled = false;
  }).catch(error => {
    console.error('Error starting recording:', error);
  });
}

function stopRecording() {
  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop();
    startRecordingButton.disabled = false;
    stopRecordingButton.disabled = true;
    if (confirm('Do you want to save the recording?')) {
      saveRecording();
    }
  }
}

// 新增/修改saveRecording函数，替换原下载逻辑为上传逻辑
function saveRecording() {
  // 合并录制片段为Blob对象
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  // 创建FormData用于文件传输
  const formData = new FormData();
  // 生成带时间戳的文件名，避免重复覆盖
  const fileName = `recording_${Date.now()}.webm`;
  formData.append('recording', blob, fileName);

  // 发送POST请求到后端接口
  fetch('/save-recording', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (response.ok) {
      alert('录制文件已成功保存到服务器');
      // 清空录制片段，准备下一次录制
      recordedChunks = [];
    } else {
      alert('保存失败，请重试');
    }
  })
  .catch(error => {
    console.error('上传失败:', error);
    alert('上传过程出错，请查看控制台日志');
  });
}

步骤2：编写Flask后端接口 #

在你的Flask主文件（如app.py）中添加以下代码：

from flask import Flask, request, jsonify, render_template
import os

app = Flask(__name__)

# 确保recordings文件夹存在，不存在则自动创建
RECORDINGS_FOLDER = 'recordings'
if not os.path.exists(RECORDINGS_FOLDER):
    os.makedirs(RECORDINGS_FOLDER)

# 处理录制文件上传的接口
@app.route('/save-recording', methods=['POST'])
def save_recording():
    # 检查是否有文件上传
    if 'recording' not in request.files:
        return jsonify({'error': '未检测到上传文件'}), 400
    
    recording_file = request.files['recording']
    # 检查文件名是否为空
    if recording_file.filename == '':
        return jsonify({'error': '文件名不能为空'}), 400
    
    # 拼接保存路径并保存文件
    file_path = os.path.join(RECORDINGS_FOLDER, recording_file.filename)
    recording_file.save(file_path)
    
    return jsonify({'message': '文件保存成功', '存储路径': file_path}), 200

# 你的主页路由，返回录制页面
@app.route('/')
def index():
    return render_template('你的录制页面文件名.html')

if __name__ == '__main__':
    app.run(debug=True)

关键注意事项 #

• 文件格式：示例使用video/webm格式，这是浏览器MediaRecorder原生支持的格式；若需MP4等其他格式，需额外处理编码（浏览器原生通常不支持MP4录制，可能需要引入第三方库）。
• 权限问题：确保Flask运行用户对recordings文件夹有写入权限，否则会出现保存失败的情况。
• 文件名冲突：示例用时间戳作为文件名前缀，避免重复录制导致文件覆盖，你可根据需求自定义命名规则。
• 跨域问题：如果前端页面和后端不在同一域名下，需使用flask-cors库配置跨域；同一项目内的模板页面无需额外配置。

内容的提问来源于stack exchange，提问作者Abhishek Kellur