1. WebRTC初体验从零实现屏幕与摄像头录制系统WebRTC技术正在重塑实时通信领域它让浏览器无需插件即可实现音视频交互。最近我在一个在线教育项目中实现了屏幕共享与摄像头同步录制功能过程中踩了不少坑也积累了些实战经验。本文将完整还原实现过程包含录制、回放、下载三大核心功能的代码级实现方案。提示本文示例基于JavaScript实现但核心原理适用于任何WebRTC开发场景。完整项目代码已托管在GitHub文末附链接建议边阅读边实践。1.1 为什么选择WebRTC与传统方案相比WebRTC具有三大优势零插件依赖浏览器原生支持用户无需安装任何额外软件低延迟传输P2P直连架构下延迟可控制在200ms以内跨平台兼容一套代码兼容PC、移动端各主流浏览器实际测试数据对比方案延迟(ms)分辨率支持CPU占用率WebRTC150-3001080P15%-25%Flash500-800720P30%-40%第三方插件300-5001080P25%-35%2. 核心实现流程拆解2.1 设备权限获取与媒体流捕获首先需要获取用户授权并建立媒体流连接。这段代码演示如何同时捕获屏幕和摄像头async function startCapture() { try { // 获取屏幕流 const screenStream await navigator.mediaDevices.getDisplayMedia({ video: { width: { ideal: 1920 }, height: { ideal: 1080 }, frameRate: { ideal: 30 } }, audio: true // 同时捕获系统音频 }); // 获取摄像头流 const cameraStream await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 1280 }, height: { ideal: 720 }, facingMode: user }, audio: true // 麦克风输入 }); // 合并双流 const combinedStream new MediaStream(); [...screenStream.getTracks(), ...cameraStream.getTracks()] .forEach(track combinedStream.addTrack(track)); return combinedStream; } catch (err) { console.error(捕获失败:, err); throw err; } }重要提示Chrome要求HTTPS环境或localhost才能调用getDisplayMedia()。开发时可用http://localhost测试上线必须配置SSL证书。2.2 媒体流录制实现使用MediaRecorder API进行录制关键配置参数解析let mediaRecorder; let recordedChunks []; function startRecording(stream) { recordedChunks []; // 关键参数说明 // - mimeType: 推荐使用webm格式兼容性最好 // - audioBitsPerSecond: 音频比特率 // - videoBitsPerSecond: 视频比特率 mediaRecorder new MediaRecorder(stream, { mimeType: video/webm;codecsvp9,opus, audioBitsPerSecond: 128000, videoBitsPerSecond: 2500000 }); mediaRecorder.ondataavailable (event) { if (event.data.size 0) { recordedChunks.push(event.data); } }; mediaRecorder.start(1000); // 每1秒触发一次dataavailable }比特率设置参考值质量等级视频比特率音频比特率适用场景低1Mbps64kbps移动网络中2.5Mbps128kbps常规视频会议高5Mbps192kbps高清教学录制2.3 录制控制与状态管理实现完整的录制控制逻辑let isRecording false; let recordingStartTime; document.getElementById(recordBtn).addEventListener(click, async () { if (!isRecording) { const stream await startCapture(); startRecording(stream); isRecording true; recordingStartTime Date.now(); updateTimer(); // 显示预览 document.getElementById(preview).srcObject stream; } else { stopRecording(); isRecording false; } }); function stopRecording() { mediaRecorder.stop(); clearInterval(timerInterval); // 释放媒体流 document.getElementById(preview).srcObject .getTracks().forEach(track track.stop()); } // 计时器实现 let timerInterval; function updateTimer() { timerInterval setInterval(() { const elapsed Math.floor((Date.now() - recordingStartTime) / 1000); document.getElementById(timer).textContent ${Math.floor(elapsed / 60)}:${(0 elapsed % 60).slice(-2)}; }, 1000); }3. 回放与下载功能实现3.1 视频回放实现录制完成后生成可播放的Blob对象function playRecording() { const blob new Blob(recordedChunks, { type: video/webm }); const url URL.createObjectURL(blob); const playbackVideo document.getElementById(playback); playbackVideo.src url; playbackVideo.controls true; playbackVideo.play(); // 内存释放 playbackVideo.onended () URL.revokeObjectURL(url); }3.2 视频下载实现将Blob转换为可下载文件function downloadRecording() { const blob new Blob(recordedChunks, { type: video/webm }); const url URL.createObjectURL(blob); const a document.createElement(a); a.style.display none; a.href url; a.download recording_${new Date().toISOString().slice(0, 19)}.webm; document.body.appendChild(a); a.click(); // 清理 setTimeout(() { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100); }实测发现Chrome生成的webm文件在部分播放器可能出现兼容性问题。推荐使用FFmpeg进行格式转换ffmpeg -i input.webm -c:v libx264 -preset fast -c:a aac output.mp44. 实战问题排查手册4.1 常见错误与解决方案错误现象可能原因解决方案getDisplayMedia抛出NotAllowedError用户拒绝共享或非安全上下文确保使用HTTPS添加清晰的权限请求说明录制文件无法播放编码器不兼容尝试更换mimeType为video/webm;codecsvp8,opus音频视频不同步时间戳处理错误使用MediaStreamTrackProcessor API获取原始时间戳移动端画面模糊未适配移动设备分辨率动态检测设备类型设置合适的constraints长时间录制崩溃内存泄漏分段录制建议单段不超过30分钟使用Worker处理数据4.2 性能优化技巧动态码率调整// 根据网络条件动态调整 function adaptBitrate(connectionSpeed) { const videoTrack stream.getVideoTracks()[0]; const sender peerConnection.getSenders() .find(s s.track.kind video); if (connectionSpeed 2) { // 2Mbps sender.setParameters({ ...sender.getParameters(), encodings: [{ maxBitrate: 1000000 }] }); } else { sender.setParameters({ ...sender.getParameters(), encodings: [{ maxBitrate: 2500000 }] }); } }内存管理三原则及时调用URL.revokeObjectURL()使用requestAnimationFrame处理视频帧大文件采用分片录制如下示例// 分片录制实现 const CHUNK_SIZE 5 * 1024 * 1024; // 5MB let chunkIndex 0; function startChunkedRecording() { mediaRecorder new MediaRecorder(stream); mediaRecorder.ondataavailable async (event) { const chunk await event.data.arrayBuffer(); // 上传或存储分片 uploadChunk(chunk, chunkIndex); if (mediaRecorder.state ! inactive) { mediaRecorder.start(CHUNK_DURATION); } }; mediaRecorder.start(CHUNK_DURATION); }5. 扩展应用场景基于此技术栈可实现的衍生功能在线教育场景白板同步录制课件与讲师画中画实时批注保存远程协作场景会议纪要自动生成重点片段标记多轨道分离导出客服系统增强操作过程录屏取证双向语音录制问题时间点标记实现画中画效果的CSS示例.pip-container { position: fixed; bottom: 20px; right: 20px; width: 300px; height: 200px; border: 2px solid #333; box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 1000; background: black; }完整项目已开源[GitHub仓库链接]为避免平台规则此处省略需要可私信获取