前端视频录制概述与HTML结构
在构建用户可录制视频的应用时，前端通常会使用html5的mediadevices.getusermedia() api获取用户的摄像头和麦克风权限，并通过mediarecorder api进行视频录制。录制完成后，视频数据通常以blob对象的形式存在。
以下是一个简化的HTML结构，展示了视频播放器和控制按钮：
前端JavaScript代码负责启动摄像头、开始/停止录制、播放录制内容，并将录制的数据（通常是recordedBlobs数组）收集起来。我们关注的核心是如何将这些recordedBlobs上传到Django后端。
JavaScript视频上传逻辑实现
传统的HTML表单提交方式对于通过JavaScript动态生成的Blob数据并不直接适用。为了实现视频文件的无缝上传，我们将采用Fetch API，它允许我们以编程方式发送HTTP请求，并利用FormData对象来模拟表单提交。
1. 获取CSRF令牌
Django为了防止跨站请求伪造（CSRF）攻击，要求所有POST请求都包含一个CSRF令牌。对于通过Fetch API发送的请求，我们需要手动从Cookie中提取CSRF令牌并将其作为请求头发送。
立即学习“前端免费学习笔记（深入）”；
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}2. 使用Fetch API上传视频
核心的上传逻辑封装在一个异步函数中。这个函数接收一个FormData对象，然后使用Fetch API将其发送到指定的后端URL。
async function upload(formData) {
try {
// 假设后端上传视频的URL是 "/video-app"
const response = await fetch("/video-app", {
method: "POST",
headers: {
// 将CSRF令牌添加到请求头中
"X-CSRFToken": getCookie('csrftoken'),
},
// FormData对象将自动设置正确的Content-Type
body: formData,
});
const result = await response.json();
console.log("上传响应:", result);
if (result.error_code === 0) {
alert("视频上传成功！");
} else {
alert("视频上传失败：" + result.message);
}
} catch (error) {
console.error("上传错误:", error);
alert("视频上传过程中发生错误。");
}
}3. 将上传逻辑集成到下载按钮事件中
我们将修改原有的downloadButton的点击事件监听器。当用户点击“下载”按钮时，除了触发本地下载外，还会调用upload函数将视频发送到服务器。
let mediaRecorder;
let 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');
// ... (其他录制、播放相关的JavaScript代码，如startRecording, stopRecording, handleDataAvailable, init等) ...
downloadButton.addEventListener('click', () => {
// 将所有录制的数据块合并成一个Blob对象，指定MIME类型为'video/mp4'
const blob = new Blob(recordedBlobs, {type: 'video/mp4'});
// **上传到服务器的逻辑**
const formData = new FormData();
// 将Blob包装成一个File对象，FormData才能正确处理
// 'video'是后端期望接收的文件字段名
// 'my-interview.mp4'是上传到服务器的文件名
formData.append("video", new File([blob], 'my-interview.mp4', { type: 'video/mp4' }));
upload(formData); // 调用上传函数
// **原有的客户端下载逻辑**
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);
});Django后端文件接收与处理
在Django后端，我们将修改相应的视图函数来处理前端通过Fetch API发送的POST请求。由于前端直接发送FormData，我们不再需要使用VideoInterviewUploadForm来处理文件上传，而是直接从request.FILES中获取文件。
1. 修改视图函数 (views.py)
from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.http import JsonResponse
from .models import VideoInterview, Position # 确保导入VideoInterview模型
@login_required
def video_interview(request): # 简化URL参数，使其更像一个API端点
if request.method == 'POST':
# 从request.FILES中获取名为'video'的文件
interview_file = request.FILES.get('video')
if interview_file:
# 创建VideoInterview模型实例并保存
VideoInterview.objects.create(
candidate=request.user,
document=interview_file,
# description字段可以根据需要从请求中获取或设置默认值
description=f"Recorded video by {request.user.username}"
)
return JsonResponse({'error_code': 0, 'message': '视频上传成功！'})
else:
return JsonResponse({'error_code': 1, 'message': '未接收到视频文件。'})
# 对于GET请求，渲染页面
# 根据实际情况，可能需要传递position等上下文
# 例如：
# position_id = request.GET.get('position_id')
# position_slug = request.GET.get('position_slug')
# position = Position.objects.filter(id=position_id, position_slug=position_slug).first()
# context = {'position': position}
return render(request, 'myway/video_interview.html') # 假设你的模板路径是这个注意： 上述video_interview视图的URL路径需要与前端fetch请求中的URL (/video-app) 相匹配。你需要在urls.py中配置相应的URL路由。
2. Django模型配置 (models.py)
VideoInterview模型需要一个FileField来存储上传的视频文件。原有的模型定义已经非常适合这个目的。
from django.db import models
from django.contrib.auth import get_user_model
User = get_user_model() # 推荐使用get_user_model()获取用户模型
class VideoInterview(models.Model):
def __str__(self):
return f"Video by {self.candidate.username} on {self.datetime.strftime('%Y-%m-%d %H:%M')}"
candidate = models.ForeignKey(User, on_delete=models.CASCADE, null=True, blank=True)
description = models.CharField(max_length=100, blank=True, verbose_name="描述")
# upload_to='documents/videointerviews' 指定了文件存储的子目录
document = models.FileField(upload_to='documents/videointerviews', verbose_name="视频文件")
datetime = models.DateTimeField(auto_now_add=True)确保在settings.py中配置了MEDIA_ROOT和MEDIA_URL，以便Django能够正确地存储和访问上传的文件。
# settings.py import os BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_URL = '/media/'
关键考量与最佳实践
- CSRF防护机制：CSRF令牌是保障Web应用安全的重要组成部分。通过在Fetch API请求头中手动添加X-CSRFToken，我们确保了Django的CSRF中间件能够验证请求的合法性。
- 文件命名与MIME类型：在前端通过new File([blob], 'my-interview.mp4', { type: 'video/mp4' })创建文件时，明确指定文件名和MIME类型至关重要。这有助于后端正确识别和处理文件，并确保文件以正确的扩展名保存。
- 错误处理与用户反馈：在JavaScript的upload函数中，应包含try...catch块来捕获网络或服务器响应错误。同时，Django视图应返回JsonResponse，包含error_code和message等信息，以便前端能根据响应向用户提供清晰的成功或失败提示。
- 浏览器兼容性：虽然MediaRecorder和Fetch API在现代浏览器中得到了广泛支持，但在实际开发中仍需注意兼容性问题。例如，某些浏览器在getUserMedia时可能会遇到权限或设备启动失败的DOMException。建议在init函数中增加更详细的错误日志和用户提示，以提高用户体验。
- 文件大小限制与进度显示：对于大型视频文件，应考虑设置文件大小限制（前端和后端），并实现上传进度条，以提供更好的用户体验。对于超大文件，可能需要采用分块上传的策略。
- URL设计：将视频上传设计为一个独立的API端点（如/video-app），可以使前端与后端的交互更加清晰和RESTful。
总结
通过结合JavaScript的MediaRecorder和Fetch API，以及Django的request.FILES处理机制，我们可以构建一个高效且安全的视频文件上传系统。这种方法绕过了传统表单提交的限制，使得前端能够直接将录制好的Blob数据发送到后端，极大地简化了开发流程并提升了用户体验。遵循本教程的指导，开发者可以为自己的Web应用轻松集成视频录制和上传功能。
