JavaScript与Django实现录制视频文件上传与保存教程-Python教程-PHP中文网

JavaScript与Django实现录制视频文件上传与保存教程

本教程详细介绍了如何结合JavaScript的MediaRecorder API进行浏览器端视频录制，并通过Fetch API将录制好的视频文件高效、安全地上传至Django后端。文章涵盖了前端视频流处理、CSRF令牌管理、FormData构建，以及后端Django视图中接收文件、创建模型实例并保存到文件系统的完整流程，旨在提供一个专业的视频上传解决方案。

浏览器端视频录制与数据准备

在现代web应用中，用户直接在浏览器中录制视频并上传已成为常见需求。本节将基于mediarecorder api，介绍如何在前端捕获用户的音视频流，并将其转换为可上传的数据格式。

HTML结构

首先，我们需要一个基本的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">启动摄像头</button>
        <button class="btn btn-success" id="record" disabled>录制</button>
        <button class="btn btn-warning" id="play" disabled>播放</button>
        <button class="btn btn-secondary" id="download" disabled>下载并上传</button>
    </div>

    <div class="m-3">
        <h4 class="text-info">视频流选项</h4>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="echoCancellation">
            <label class="form-check-label text-center" for="flexSwitchCheckDefault">回声消除</label>
       </div>
    </div>

    <div>
        <span id="errorMsg"></span>
    </div>
</div>

登录后复制

JavaScript视频录制逻辑

前端JavaScript负责与navigator.mediaDevices.getUserMedia交互以获取媒体流，并使用MediaRecorder对象进行录制。

let mediaRecorder;
let recordedBlobs; // 用于存储录制过程中产生的Blob数据块

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'); // 此按钮将触发下载和上传

// 获取媒体流并初始化录制
document.querySelector('button#start').addEventListener('click', async () => {
  const hasEchoCancellation = document.querySelector('#echoCancellation').checked;
  const constraints = {
    audio: {
      echoCancellation: {exact: hasEchoCancellation}
    },
    video: {
      width: 480, height: 320
    }
  };
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
  } catch (e) {
    console.error('navigator.getUserMedia error:', e);
    errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
  }
});

function handleSuccess(stream) {
  recordButton.disabled = false;
  window.stream = stream;
  const gumVideo = document.querySelector('video#gum');
  gumVideo.srcObject = stream;
}

// 录制按钮事件处理
recordButton.addEventListener('click', () => {
  if (recordButton.textContent === 'Record') {
    startRecording();
  } else {
    stopRecording();
    recordButton.textContent = 'Record';
    playButton.disabled = false;
    downloadButton.disabled = false;
  }
});

// 播放录制视频
playButton.addEventListener('click', () => {
  const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
  recordedVideo.src = null;
  recordedVideo.srcObject = null;
  recordedVideo.src = window.URL.createObjectURL(superBuffer);
  recordedVideo.controls = true;
  recordedVideo.play();
});

// 启动录制
function startRecording() {
  recordedBlobs = [];
  // 建议使用支持广泛的MIME类型，如'video/webm;codecs=vp8,opus'或'video/mp4'
  let options = {mimeType: 'video/webm;codecs=vp9,opus'};
  try {
    mediaRecorder = new MediaRecorder(window.stream, options);
  } catch (e) {
    console.error('Exception while creating MediaRecorder:', e);
    errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
    return;
  }

  recordButton.textContent = '停止录制';
  playButton.disabled = true;
  downloadButton.disabled = true;
  mediaRecorder.onstop = (event) => {
    console.log('录制停止: ', event);
    console.log('录制数据块: ', recordedBlobs);
  };
  mediaRecorder.ondataavailable = handleDataAvailable; // 数据可用时触发
  mediaRecorder.start(); // 开始录制
}

// 停止录制
function stopRecording() {
  mediaRecorder.stop();
}

// 处理录制数据
function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

登录后复制

注意事项:

getUserMedia需要用户授权摄像头和麦克风权限。
MediaRecorder的mimeType选项至关重要，它决定了视频的编码格式。兼容性问题可能导致录制失败或文件无法播放，通常video/webm;codecs=vp8,opus或video/mp9,opus具有较好的浏览器支持。
如果遇到navigator.getUserMedia error: DOMException: Starting videoinput failed错误，通常是由于浏览器权限问题、设备驱动问题或浏览器版本不支持。

使用Fetch API上传视频到Django后端

传统的文件上传方式（如通过form.as_p）通常需要页面刷新或使用隐藏的iframe，而使用Fetch API可以实现异步、无刷新的文件上传，提供更好的用户体验。

立即学习“Java免费学习笔记（深入）”；

获取CSRF令牌

Django为了防止跨站请求伪造（CSRF）攻击，对所有POST请求都要求包含一个CSRF令牌。在JavaScript中，我们可以从document.cookie中提取该令牌。

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

登录后复制

构建FormData并上传

录制完成后，recordedBlobs数组包含了视频的各个数据块。我们需要将这些数据块合并成一个Blob，然后封装到FormData对象中，通过Fetch API发送到服务器。

// ... (前面JavaScript代码保持不变) ...

async function upload(formData) {
  try {
    // 假设上传接口为 /video-app
    const response = await fetch("/video-app", {
      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.message);
    }
  } catch (error) {
    console.error("上传错误:", error);
    alert("上传视频时发生错误。");
  }
}

// 修改下载按钮的事件监听器，使其同时触发上传
downloadButton.addEventListener('click', () => {
  // 将所有录制的数据块合并成一个Blob，指定MIME类型为mp4
  const blob = new Blob(recordedBlobs, {type: 'video/mp4'});

  // 构建FormData对象用于上传
  const formData = new 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);
});

登录后复制

关键点:

FormData对象用于模拟HTML表单提交，可以包含文件和其他字段。
File([blob], 'filename.mp4', { type: 'video/mp4' })构造函数将Blob转换为File对象，并指定文件名和MIME类型，这对于后端正确处理文件至关重要。
X-CSRFToken头部必须包含有效的CSRF令牌，否则Django会拒绝POST请求。
fetch请求的body直接设置为formData时，Content-Type头部会自动设置为multipart/form-data，无需手动设置。

Django后端处理视频文件上传

在Django后端，我们需要一个视图函数来接收前端通过Fetch API发送的视频文件，并将其保存到文件系统和数据库中。

models.py 定义

确保你的VideoInterview模型包含一个FileField来存储文件。

from django.db import models
from django.contrib.auth.models import User # 假设用户模型是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'指定了文件在MEDIA_ROOT目录下的存储路径。

views.py 视图函数

修改Django视图，直接从request.FILES中获取上传的文件，而不是依赖ModelForm。

from django.shortcuts import render
from django.contrib.auth.decorators import login_required
from django.http import JsonResponse
from .models import VideoInterview # 导入你的模型

@login_required
def video_interview_upload_view(request): # 更改函数名以反映其API功能
    if request.method == 'POST':
        # 从request.FILES中获取名为'video'的文件，这与前端formData.append("video", ...)中的'video'对应
        interview_file = request.FILES.get('video')
        if interview_file:
            # 创建VideoInterview模型实例并保存文件
            VideoInterview.objects.create(
                candidate=request.user, # 假设用户已登录
                document=interview_file,
                description="用户录制的视频面试" # 可以根据需要添加描述
            )
            return JsonResponse({'error_code': 0, 'message': '视频上传成功'})
        else:
            return JsonResponse({'error_code': 1, 'message': '未接收到视频文件'}, status=400)
    # 对于GET请求，可以渲染一个页面或返回错误
    return render(request, 'myway/video_interview.html') # 或返回JsonResponse({'error_code': 2, 'message': '只接受POST请求'}, status=405)

登录后复制

关键点:

request.FILES是一个字典，包含了所有上传的文件。其键名与前端FormData.append()方法中第一个参数（即文件字段名）相对应。
直接将request.FILES.get('video')获取到的文件对象赋值给FileField，Django会自动处理文件的保存。
返回JsonResponse是API风格的最佳实践，前端可以根据JSON响应判断操作是否成功。

urls.py 配置

确保你的urls.py中有一个对应的URL模式，指向新的视图函数。

from django.urls import path
from . import views

urlpatterns = [
    # ... 其他URL模式 ...
    path('video-app/', views.video_interview_upload_view, name='video_upload'),
]

登录后复制

总结

通过本教程，我们实现了一个完整的视频录制和上传系统。前端利用JavaScript的MediaRecorder API捕获用户视频，并通过Fetch API结合FormData和CSRF令牌将视频文件异步上传至Django后端。后端Django视图则直接处理request.FILES中的文件，将其保存到文件系统并更新数据库记录。这种前后端分离的异步上传方式，不仅提升了用户体验，也使得系统更加灵活和可维护。在实际应用中，你可能还需要考虑文件大小限制、文件类型验证、上传进度显示、错误重试机制以及视频转码等高级功能。

以上就是JavaScript与Django实现录制视频文件上传与保存教程的详细内容，更多请关注php中文网其它相关文章！