JavaScript与Django视频保存方法详解

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JavaScript与Django视频保存教程》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

本文档旨在指导开发者如何使用 JavaScript 录制视频，并通过 Django 后端将其保存到服务器的文件系统中。我们将利用 Fetch API 从前端上传视频文件，并在 Django 视图中处理文件存储，同时解决常见的浏览器兼容性问题。

前端：使用 JavaScript 录制和上传视频

首先，我们需要修改 JavaScript 代码，以便将录制的视频数据通过 Fetch API 发送到 Django 后端。关键在于将 Blob 对象转换为 File 对象，并使用 FormData 对象进行上传。

1. 获取 CSRF Token

Django 默认启用 CSRF 保护，因此需要在请求头中包含 CSRF Token。可以通过以下 JavaScript 函数获取 Cookie 中的 CSRF Token：

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，从而简化代码并提高灵活性。同时，需要注意处理浏览器兼容性问题，并添加适当的错误处理机制。

以上就是《JavaScript与Django视频保存方法详解》的详细内容，更多关于的资料请关注golang学习网公众号！