在现代web应用中，用户直接在浏览器中录制视频并上传至服务器的需求日益增长。传统的表单提交方式在处理这类二进制大文件时，往往会导致页面刷新或用户体验不佳。本文将介绍一种结合javascript的mediarecorder api进行视频录制，并通过fetch api将录制好的视频数据异步上传至django后端存储的专业方法。此方案避免了手动下载再上传的繁琐步骤，实现了流畅的用户体验。
2. 前端视频录制与上传机制 2.1 视频录制基础前端通过navigator.mediaDevices.getUserMedia获取用户媒体流，并使用MediaRecorder API进行视频录制。录制过程中，视频数据会以Blob的形式分块收集。当录制停止时，这些Blob可以合并成一个完整的视频Blob。
核心JavaScript录制逻辑（简化）:
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 包含了完整的视频数据
} 2.2 使用Fetch API上传视频
录制完成后，我们需要将recordedBlobs合并成一个完整的视频Blob，并将其作为文件通过Fetch API发送到Django后端。
2.2.1 获取CSRF令牌Django为了防止跨站请求伪造（CSRF），要求所有POST请求都必须包含一个CSRF令牌。在AJAX请求中，我们需要从Cookie中获取该令牌并将其作为请求头发送。
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
} 2.2.2 构建FormData并发送请求
FormData接口提供了一种表示表单数据的方法，特别适用于通过Fetch API发送文件。我们将视频Blob封装成一个File对象，然后添加到FormData中。
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("上传过程中发生错误。");
}
} 2.2.3 整合到下载按钮事件
为了保持与原代码的逻辑一致性，我们可以在用户点击“下载”按钮时，不仅触发本地下载，也同时触发上传到服务器的操作。
// 假设 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);
}); 注意事项：
- Blob的type应与后端期望的文件类型一致，通常为video/mp4或video/webm。
- File构造函数的第三个参数可以指定MIME类型，确保服务器正确识别文件类型。
- fetch请求的URL /video-app/ 必须与Django的urls.py中定义的路径匹配。
首先，我们需要一个Django模型来存储视频文件及其相关信息。FileField将负责文件在文件系统中的存储和数据库中文件路径的记录。
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')}" 说明：
- upload_to='documents/videointerviews' 指定了文件在Django MEDIA_ROOT下的存储路径。
- document字段将存储实际的视频文件。
Django视图负责接收前端上传的文件，将其保存到模型中，并返回一个JSON响应给前端。
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') # 替换为实际的模板路径 说明：
- @login_required 装饰器确保只有登录用户才能访问此视图。
- request.FILES.get('video') 用于获取前端FormData中name为"video"的文件。
- VideoInterview.objects.create(...) 将文件保存到数据库和文件系统。
- JsonResponse 用于向前端返回状态信息，error_code: 0 通常表示成功。
为了让前端能够访问到上传视图，需要在Django项目的urls.py中配置相应的URL。
# 例如，在你的应用级urls.py中
from django.urls import path
from . import views
urlpatterns = [
# ... 其他URL配置 ...
path('video-app/', views.video_interview_upload, name='video_upload'),
] 4. 注意事项与最佳实践
- CSRF令牌： 务必在所有POST请求中包含CSRF令牌，以保障应用安全。
- 文件大小限制： 在Django的settings.py中配置FILE_UPLOAD_MAX_MEMORY_SIZE和DATA_UPLOAD_MAX_MEMORY_SIZE来限制上传文件的大小，防止恶意上传或资源耗尽。
- 错误处理： 前后端都应有健壮的错误处理机制。前端通过try...catch捕获网络错误和服务器返回的错误码；后端则应捕获文件保存、数据库操作等可能发生的异常。
- 媒体访问权限： 浏览器访问用户摄像头和麦克风需要用户授权。navigator.mediaDevices.getUserMedia可能会因权限拒绝或设备问题而失败，前端应妥善处理这些错误（如DOMException: Starting videoinput failed）。
- MIME类型： 确保前端上传的Blob类型与后端期望的文件类型一致，这有助于后端正确处理文件。
- 异步操作： 由于文件上传是异步操作，用户界面应提供相应的反馈（如加载指示器），以提升用户体验。
- 文件命名： 在服务器端保存文件时，可以考虑生成唯一的文件名，避免命名冲突。Django的FileField在处理同名文件时会自动添加随机字符串。
通过结合JavaScript的MediaRecorder API和Fetch API，我们可以实现一个高效且用户友好的视频录制与上传功能。Django后端通过简单的视图逻辑即可接收并存储这些文件。这种前后端分离的异步上传方式，不仅提升了用户体验，也使得应用更加灵活和可扩展。在实际开发中，还需注意安全性、错误处理和性能优化等方面，以构建一个健壮的视频上传系统。
以上就是JavaScript前端录制视频并上传至Django后端存储的教程的详细内容，更多请关注知识资源分享宝库其它相关文章！
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。