本文档旨在指导开发者如何使用 JavaScript 录制视频，并通过 Django 后端将其保存到服务器的文件系统中。我们将利用 Fetch API 从前端上传视频文件，并在 Django 视图中处理文件存储，同时解决常见的浏览器兼容性问题。
前端：使用 JavaScript 录制和上传视频
首先，我们需要修改 JavaScript 代码，以便将录制的视频数据通过 Fetch API 发送到 Django 后端。关键在于将 Blob 对象转换为 File 对象，并使用 FormData 对象进行上传。
1. 获取 CSRF Token
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 JsonResponsefrom django.contrib.auth.decorators import login_required@login_requireddef 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 pathfrom . import viewsurlpatterns = [ 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，从而简化代码并提高灵活性。同时，需要注意处理浏览器兼容性问题，并添加适当的错误处理机制。
以上就是使用 JavaScript 和 Django 将录制的视频文件保存到文件系统的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1369329.html
微信扫一扫 
支付宝扫一扫 
