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'), ]