js实现录像
使用MediaRecorder API实现录像
在JavaScript中，可以通过MediaRecorder API实现浏览器端的录像功能。该API允许捕获通过<canvas>或摄像头获取的媒体流。
// 获取摄像头权限并开始录像
async function startRecording() {
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true
});
const recorder = new MediaRecorder(stream);
const chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const videoUrl = URL.createObjectURL(blob);
// 创建下载链接或播放录像
const a = document.createElement('a');
a.href = videoUrl;
a.download = 'recording.webm';
a.click();
};
recorder.start();
// 10秒后停止录像（示例）
setTimeout(() => recorder.stop(), 10000);
}结合Canvas录制屏幕内容
如果需要录制屏幕内容而非摄像头，可以结合Canvas和requestAnimationFrame：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const stream = canvas.captureStream(30);
const recorder = new MediaRecorder(stream);
// 绘制内容到Canvas（示例）
function drawToCanvas() {
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(drawToCanvas);
}设置录像参数
MediaRecorder支持配置多种参数：
const options = {
mimeType: 'video/webm;codecs=vp9', // 编码格式
videoBitsPerSecond: 2500000, // 比特率
audioBitsPerSecond: 128000
};
const recorder = new MediaRecorder(stream, options);处理不同浏览器的兼容性
不同浏览器支持的编码格式可能不同，需要检测可用格式：
function getSupportedMimeType() {
const types = [
'video/webm;codecs=vp9',
'video/webm;codecs=vp8',
'video/webm'
];
return types.find(type => MediaRecorder.isTypeSupported(type));
}分段录制大文件
对于长时间录像，建议分段处理数据以避免内存问题：
recorder.start(1000); // 每1秒触发一次dataavailable
recorder.ondataavailable = e => {
// 立即上传或存储分段数据
uploadChunk(e.data);
};注意事项
- 需要HTTPS环境或localhost才能使用媒体设备API
- 用户必须明确授权摄像头/麦克风权限
- 不同浏览器对视频格式的支持存在差异
- 移动设备可能有额外的限制
以上方法提供了在浏览器中实现录像功能的核心代码，实际应用中需要根据具体需求调整参数和错误处理逻辑。
