本教程将详细探讨如何利用JavaScript的MediaRecorder API在前端录制视频，并通过Fetch API将录制好的视频文件安全、高效地上传至Django后端的文件系统和数据库。文章将深入讲解csrf令牌处理、FormData的构建与使用，以及django视图层如何接收和保存这些上传的文件，为开发者提供一套完整的视频上传解决方案。
前端视频录制概述与html结构
在构建用户可录制视频的应用时，前端通常会使用html5的mediadevices.getusermedia() api获取用户的摄像头和麦克风权限，并通过mediarecorder api进行视频录制。录制完成后，视频数据通常以blob对象的形式存在。
以下是一个简化的HTML结构，展示了视频播放器和控制按钮：
<div id="container mx-auto"> <video id="gum" class="mx-auto w-50 d-flex justify-content-center" autoplay muted></video> <video id="recorded" class="mx-auto w-50 d-flex justify-content-center" playsinline loop></video> <div class="my-5"> <button class="btn btn-primary" id="start">Start camera</button> <button class="btn btn-success" id="record" disabled>Record</button> <button class="btn btn-warning" id="play" disabled>Play</button> <button class="btn btn-secondary" id="download" disabled>Download</button> </div> <!-- 其他UI元素和表单，但上传视频不再依赖传统表单提交 --> <form method="post" enctype="multipart/form-data" style="display: none;"> {% csrf_token %} {{ form.as_p }} <button type="submit" class="btn btn-primary">Save</button> </form> </div>
前端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应用轻松集成视频录制和上传功能。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
喜欢就支持一下吧
相关推荐
