JavaScript前端录制视频并上传至Django后端存储的教程

let mediaRecorder;
let recordedBlobs; // 存储录制的数据块

// ... 省略初始化和启动MediaRecorder的代码 ...

function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data); // 收集数据块
  }
}

function startRecording() {
  recordedBlobs = [];
  // ... 配置MediaRecorder并启动 ...
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start();
}

function stopRecording() {
  mediaRecorder.stop();
  // 此时 recordedBlobs 包含了完整的视频数据
}

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

async function uploadVideo(videoBlob) {
  const formData = new FormData();
  // 将Blob转换为File对象，并指定文件名和MIME类型
  formData.append("video", new File([videoBlob], 'my-interview.mp4', { type: 'video/mp4' }));

  try {
    const response = await fetch("/video-app/", { // 确保URL正确指向Django视图
      method: "POST",
      headers: {
        "X-CSRFToken": getCookie('csrftoken'), // 添加CSRF令牌
      },
      body: formData, // 直接发送FormData
    });
    const result = await response.json();
    console.log("服务器响应:", result);
    if (result.error_code === 0) {
      alert("视频上传成功！");
    } else {
      alert("视频上传失败：" + result.error_code);
    }
  } catch (error) {
    console.error("上传错误:", error);
    alert("上传过程中发生错误。");
  }
}

// 假设 downloadButton 和 recordedBlobs 已在全局或可访问范围内定义
const downloadButton = document.querySelector('button#download');

downloadButton.addEventListener('click', () => {
  const blob = new Blob(recordedBlobs, {type: 'video/mp4'});

  // 调用上传函数
  uploadVideo(blob);

  // 原始的本地下载逻辑（可选，可根据需求保留或移除）
  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);
});

from django.db import models
from django.contrib.auth.models import User # 假设用户模型为Django自带的User

class VideoInterview(models.Model):
    candidate = models.ForeignKey(User, on_delete=models.CASCADE, null=True, blank=True)
    description = models.CharField(max_length=100, blank=True, verbose_name="描述")
    document = models.FileField(upload_to='documents/videointerviews', verbose_name="视频文件")
    datetime = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return f"视频面试 - {self.candidate} - {self.datetime.strftime('%Y-%m-%d %H:%M')}"

from django.http import JsonResponse
from django.shortcuts import render
from django.contrib.auth.decorators import login_required
from .models import VideoInterview # 假设VideoInterview模型在当前应用的models.py中

@login_required
def video_interview_upload(request): # 将函数名改为更具描述性的名称
    if request.method == 'POST':
        # 从request.FILES中获取名为'video'的文件
        interview_file = request.FILES.get('video')

        if interview_file:
            try:
                # 创建VideoInterview实例并保存文件
                VideoInterview.objects.create(
                    candidate=request.user, # 假设用户已登录
                    document=interview_file,
                    description="用户录制的面试视频" # 可以根据需求添加描述
                )
                return JsonResponse({'error_code': 0, 'message': '视频上传成功'})
            except Exception as e:
                return JsonResponse({'error_code': 2, 'message': f'保存文件失败: {str(e)}'})
        else:
            return JsonResponse({'error_code': 1, 'message': '未接收到视频文件'})

    # 对于GET请求，渲染页面（如果需要）
    return render(request, 'myway/video_interview.html') # 替换为实际的模板路径

# 例如，在你的应用级urls.py中
from django.urls import path
from . import views

urlpatterns = [
    # ... 其他URL配置 ...
    path('video-app/', views.video_interview_upload, name='video_upload'),
]