本文档旨在指导开发者如何使用 JavaScript 录制视频，并通过 Django 后端将其保存到服务器的文件系统中。我们将利用 Fetch API 从前端上传视频文件，并在 django 视图中处理文件存储，同时解决常见的浏览器兼容性问题。
前端：使用 JavaScript 录制和上传视频
首先，我们需要修改 JavaScript 代码，以便将录制的视频数据通过 Fetch API 发送到 Django 后端。关键在于将 Blob 对象转换为 File 对象，并使用 FormData 对象进行上传。
Django 默认启用 CSRF 保护，因此需要在请求头中包含 CSRF Token。可以通过以下 JavaScript 函数获取 Cookie 中的 CSRF Token：
立即学习“Java免费学习笔记（深入）”；
function getCookie(name) { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) return parts.pop().split(';').shift(); }
2. 创建上传函数
创建一个名为 upload 的异步函数，该函数接收 FormData 对象作为参数，并使用 Fetch API 将其发送到 Django 后端：
async function upload(formData) { try { const response = await fetch("/video-app", { // 替换为你的 Django 视图 URL method: "POST", headers: { "X-CSRFToken": getCookie('csrftoken'), }, body: formData, }); const result = await response.JSon(); console.log("Response:", result); } catch (error) { console.error("Error:", error); } }
3. 修改 Download 按钮的事件监听器
修改 downloadButton 的事件监听器，使其在下载视频的同时，也将其上传到服务器：
downloadButton.addEventListener('click', () => { const blob = new Blob(recordedBlobs, {type: 'video/mp4'}); // 上传到服务器 const formData = new FormData(); formData.append("video", new File([blob], 'my-interview.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 视图中处理接收到的视频文件，并将其保存到文件系统中。
1. 修改 views.py
修改 video_interview 视图函数，使其能够接收上传的视频文件，并将其保存到数据库中：
from django.http import jsonResponse from django.contrib.auth.decorators import login_required @login_required def video_interview(request): if request.method == 'POST': interview = request.FILES.get('video') if interview is not None: VideoInterview.objects.create( candidate = request.user, document = interview ) return JsonResponse({'error_code': 0}) # 成功 else: return JsonResponse({'error_code': 1}) # 失败 return render(request, 'test_app/video_app.html') # 渲染页面，确保模板存在
2. 配置 URL
确保在 urls.py 中配置了对应的 URL 路由：
from django.urls import path from . import views urlpatterns = [ path('video-app/', views.video_interview, name='video_interview'), ]
3. 确保 VideoInterview 模型正确配置
检查 models.py 中的 VideoInterview 模型，确保 document 字段的 upload_to 参数正确设置，以便文件能够保存到指定目录。
class VideoInterview(models.Model): def __str__(self): return str(self.candidate) candidate = models.ForeignKey(User, on_delete=models.CAScadE, null=True, blank=True) description = models.CharField(max_length=100, blank=True, verbose_name="Leírás") document = models.FileField(upload_to='documents/videointerviews', verbose_name="CV") datetime = models.DateTimeField(auto_now_add=True)
4. 移除 VideoInterviewUploadForm
由于我们不再使用 Django Form 进行文件上传，因此可以移除 forms.py 中的 VideoInterviewUploadForm。
解决浏览器兼容性问题
原问题中提到在 firefox 浏览器中出现 DOMException: Starting videoinput failed 错误，这通常是由于权限问题或设备不可用导致的。
1. 检查权限
确保用户已授予浏览器访问摄像头和麦克风的权限。
2. 处理异常
在 init 函数中，更详细地处理 navigator.mediaDevices.getUserMedia 抛出的异常，以便更好地诊断问题：
async function init(constraints) { try { const stream = await navigator.mediaDevices.getUserMedia(constraints); handleSuccess(stream); } catch (e) { console.error('navigator.getUserMedia error:', e); errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.name} - ${e.message}`; // 更详细的错误信息 } }
3. 检查设备可用性
在调用 getUserMedia 之前，可以先检查设备是否可用。
注意事项和总结
- 错误处理: 在前端和后端都添加适当的错误处理机制，以便在出现问题时能够及时发现并解决。
- 文件大小限制: 考虑设置文件大小限制，以防止上传过大的视频文件。可以在 Django settings.py 中配置 DATA_UPLOAD_MAX_MEMORY_SIZE。
- 安全: 确保对上传的文件进行安全检查，以防止恶意代码注入。
- 文件名: 为上传的文件生成唯一的文件名，以避免文件名冲突。可以使用 UUID 或时间戳。
通过以上步骤，我们可以使用 JavaScript 录制视频，并通过 Django 后端将其保存到服务器的文件系统中。使用 Fetch API 进行文件上传可以避免使用 Django Form，从而简化代码并提高灵活性。同时，需要注意处理浏览器兼容性问题，并添加适当的错误处理机制。
评论（已关闭）
评论已关闭