浏览器端视频录制与数据准备
在现代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中的文件，将其保存到文件系统并更新数据库记录。这种前后端分离的异步上传方式，不仅提升了用户体验，也使得系统更加灵活和可维护。在实际应用中，你可能还需要考虑文件大小限制、文件类型验证、上传进度显示、错误重试机制以及视频转码等高级功能。
