JavaScript与Django集成：实现前端录制视频文件到后端存储的教程

// ... (保留原有的JavaScript录制逻辑，例如mediaRecorder、recordedBlobs等)

const errorMsgElement = document.querySelector('span#errorMsg');
const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('button#record');
const playButton = document.querySelector('button#play');
const downloadButton = document.querySelector('button#download');

// 获取CSRF Token的辅助函数
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 上传函数：负责将FormData发送到Django后端
async function upload(formData) {
  try {
    // 这里的URL '/video-app' 需与Django的urls.py配置保持一致
    const response = await fetch("/video-app", {
      method: "POST",
      headers: {
        "X-CSRFToken": getCookie('csrftoken'), // 附带CSRF Token，确保Django安全认证
      },
      body: formData, // 发送FormData对象，Fetch API会自动设置Content-Type为multipart/form-data
    });
    const result = await response.json(); // 解析后端返回的JSON响应
    console.log("上传响应:", result);
    // 根据后端返回的result处理，例如显示成功或失败消息
    if (result.error_code === 0) {
        alert('视频上传成功！');
    } else {
        alert('视频上传失败: ' + result.message);
    }
  } catch (error) {
    console.error("上传错误:", error);
    alert('视频上传过程中发生错误！');
  }
}

// 修改下载按钮的点击事件，增加上传逻辑
downloadButton.addEventListener('click', () => {
  // 将录制的Blob数据合并为一个完整的MP4视频Blob
  const blob = new Blob(recordedBlobs, {type: 'video/mp4'});

  // 1. 上传到服务器
  const formData = new FormData();
  // 将Blob转换为File对象，命名为'my-interview.mp4'，并作为'video'字段添加到FormData
  formData.append("video", new File([blob], 'my-interview.mp4'));
  upload(formData); // 调用上传函数

  // 2. 客户端下载（如果不需要客户端下载，可以移除以下代码）
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'w3-coder-recorder-test.mp4'; // 客户端下载的文件名
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
});

// ... (保留原有的start/stop Recording, play, handleSuccess, init等函数)
// 确保MediaRecorder的ondataavailable和onstop事件处理逻辑正确
function handleDataAvailable(event) {
  console.log('handleDataAvailable', event);
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

function startRecording() {
  recordedBlobs = [];
  let options = {mimeType: 'video/webm;codecs=vp9,opus'};
  try {
    mediaRecorder = new MediaRecorder(window.stream, options);
  } catch (e) {
    console.error('Exception while creating MediaRecorder:', e);
    errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
    return;
  }
  recordButton.textContent = 'Stop Recording';
  playButton.disabled = true;
  downloadButton.disabled = true;
  mediaRecorder.onstop = (event) => {
    console.log('Recorder stopped: ', event);
    console.log('Recorded Blobs: ', recordedBlobs);
  };
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start();
}

function stopRecording() {
  mediaRecorder.stop();
  recordButton.textContent = 'Record'; // 停止后将按钮文本改回“Record”
  playButton.disabled = false;
  downloadButton.disabled = false;
}