本教程详细介绍了如何结合JavaScript的MediaRecorder API进行浏览器端视频录制，并通过Fetch API将录制好的视频文件高效、安全地上传至Django后端。文章涵盖了前端视频流处理、CSRF令牌管理、FormData构建，以及后端Django视图中接收文件、创建模型实例并保存到文件系统的完整流程，旨在提供一个专业的视频上传解决方案。
浏览器端视频录制与数据准备
在现代web应用中，用户直接在浏览器中录制视频并上传已成为常见需求。本节将基于mediarecorder api，介绍如何在前端捕获用户的音视频流，并将其转换为可上传的数据格式。
HTML结构
首先，我们需要一个基本的HTML结构来显示视频预览、录制状态和操作按钮：
视频流选项
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 modelsfrom django.contrib.auth.models import User # 假设用户模型是Userclass 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 renderfrom django.contrib.auth.decorators import login_requiredfrom django.http import JsonResponsefrom .models import VideoInterview # 导入你的模型@login_requireddef 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 pathfrom . import viewsurlpatterns = [ # ... 其他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实现录制视频文件上传与保存教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1369327.html
微信扫一扫 
支付宝扫一扫 
