JavaScript与Django实现录制视频文件上传与保存教程-小浪学习网

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与Djan

文章版权归作者所有，未经允许请勿转载。

THE END