WebRTC实战：屏幕与摄像头同步录制技术详解

1. WebRTC初体验：从零实现屏幕与摄像头录制系统

WebRTC技术正在重塑实时通信领域，它让浏览器无需插件即可实现音视频交互。最近我在一个在线教育项目中实现了屏幕共享与摄像头同步录制功能，过程中踩了不少坑也积累了些实战经验。本文将完整还原实现过程，包含录制、回放、下载三大核心功能的代码级实现方案。

提示：本文示例基于JavaScript实现，但核心原理适用于任何WebRTC开发场景。完整项目代码已托管在GitHub（文末附链接），建议边阅读边实践。

1.1 为什么选择WebRTC？

与传统方案相比，WebRTC具有三大优势：

1. 零插件依赖：浏览器原生支持，用户无需安装任何额外软件
2. 低延迟传输：P2P直连架构下延迟可控制在200ms以内
3. 跨平台兼容：一套代码兼容PC、移动端各主流浏览器

实际测试数据对比：

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;codecs=vp9,opus', audioBitsPerSecond: 128000, videoBitsPerSecond: 2500000 }); mediaRecorder.ondataavailable = (event) => { if (event.data.size > 0) { recordedChunks.push(event.data); } }; mediaRecorder.start(1000); // 每1秒触发一次dataavailable }

比特率设置参考值：

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.mp4

4. 实战问题排查手册

4.1 常见错误与解决方案

4.2 性能优化技巧

1. 动态码率调整：

// 根据网络条件动态调整 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 }] }); } }

2. 内存管理三原则：

• 及时调用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. 扩展应用场景

基于此技术栈可实现的衍生功能：

1. 在线教育场景：

• 白板同步录制
• 课件与讲师画中画
• 实时批注保存

2. 远程协作场景：

• 会议纪要自动生成
• 重点片段标记
• 多轨道分离导出

3. 客服系统增强：

• 操作过程录屏取证
• 双向语音录制
• 问题时间点标记

实现画中画效果的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仓库链接]（为避免平台规则此处省略，需要可私信获取）