SRS实战：从摄像头推流到Web端播放，手把手教你搭建一个低延迟的在线监控系统

SRS实战构建毫秒级延迟的Web监控系统监控摄像头画面从采集到播放的延迟控制在500毫秒以内是许多实时监控场景的硬性需求。去年为宠物医院部署远程看护系统时我们测试发现传统方案普遍存在2-3秒的延迟——当客户在手机上看到爱犬撞翻食盆时现实中的清理工作早已开始。本文将分享如何用SRSWebRTC技术栈实现真正的实时监控这套方案目前已在20多家小微商铺中稳定运行。1. 环境搭建与协议选型1.1 硬件准备清单摄像头端树莓派4B官方摄像头模块约600元或罗技C920 USB摄像头支持H.264硬编服务器2核4G云服务器带宽≥5Mbps或本地NUC迷你主机播放端任何支持现代浏览器的设备实测数据树莓派4B推流时CPU占用约35%720p30fps流量消耗1.2Mbps1.2 协议对比矩阵协议类型平均延迟兼容性适用场景RTMP1-2s需Flash传统直播HTTP-FLV0.8-1.5s需JS解码移动端兼容WebRTC0.3-0.5s原生浏览器支持实时交互场景HLS3-10s全平台点播与高兼容需求# 一键安装SRSWebRTC支持 docker run -d --name srs-webrtc \ -p 1935:1935 -p 8080:8080 -p 1985:1985 \ -p 8000:8000/udp -p 10080:10080/udp \ registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5 \ ./objs/srs -c conf/rtc.conf2. 超低延迟推流配置2.1 树莓派摄像头优化方案# raspivid参数优化保存为start_stream.sh raspivid -n -t 0 -w 1280 -h 720 -fps 30 -b 1200000 \ -o - | ffmpeg -i - \ -c:v copy -f flv rtmp://your_server_ip/live/stream \ -c:v libx264 -preset ultrafast -tune zerolatency \ -f rtp rtp://your_server_ip:8000关键参数解析-tune zerolatency禁用帧缓冲降低编码延迟-preset ultrafast牺牲压缩率换取速度双路输出同时支持FLV和RTP2.2 Windows摄像头低延迟方案ffmpeg -f dshow -video_size 1280x720 -framerate 30 ^ -i videoUSB Camera -c:v libx264 -profile:v high ^ -level 4.2 -x264-params keyint30:min-keyint30 ^ -pix_fmt yuv420p -movflags faststart ^ -f rtp rtp://your_server_ip:80003. WebRTC服务端调优3.1 SRS关键配置修改# conf/rtc.conf 核心参数 rtc_server { enabled on; listen 8000; # UDP端口 candidate $CANDIDATE_IP; } rtc { stun_timeout 30s; dtls_role passive; mux_merge on; # 合并小包提升传输效率 } vp9 { enabled off; # 关闭VP9避免兼容问题 }3.2 打洞服务器部署技巧// 自动获取公网IP的候选地址 fetch(/api/v1/webrtc/).then(res res.json()).then(data { const pc new RTCPeerConnection({ iceServers: [{ urls: [ stun:${data.public_ip}:3478, turn:${data.public_ip}:3478?transportudp ], credential: your_password, username: your_username }] }); });4. 自适应播放器实现4.1 零依赖Web播放器!DOCTYPE html html head style #player { width: 100%; background: #000; } .error { color: red; padding: 20px; } /style /head body video idplayer controls autoplay playsinline/video div iderror classerror/div script const initPlayer async () { const streamName livestream; const video document.getElementById(player); try { if (typeof RTCPeerConnection ! undefined) { // WebRTC优先 const pc new RTCPeerConnection(); pc.addTransceiver(video, { direction: recvonly }); video.srcObject await new Promise((resolve, reject) { pc.ontrack e resolve(e.streams[0]); pc.oniceconnectionstatechange () { if (pc.iceConnectionState failed) reject(); }; fetch(/webrtc/api/v1/offer/${streamName}, { method: POST, body: JSON.stringify({ sdp: , type: offer }) }).then(res res.json()).then(data { pc.setRemoteDescription(data); }); }); } else { // 降级到HTTP-FLV if (flvjs.isSupported()) { const flvPlayer flvjs.createPlayer({ type: flv, url: http://your_server_ip:8080/live/${streamname}.flv }); flvPlayer.attachMediaElement(video); flvPlayer.load(); } else { throw new Error(Browser not supported); } } } catch (e) { document.getElementById(error).innerText 播放错误: ${e.message} 请使用Chrome/Firefox最新版; } }; window.onload initPlayer; /script /body /html4.2 移动端适配技巧添加meta nameviewport标签控制缩放使用CSS Media Query针对竖屏优化布局实现双击全屏和手势控制启用playsinline属性避免iOS自动全屏5. 实战性能调优5.1 延迟测量方法// 在播放端计算端到端延迟 setInterval(() { fetch(/api/timestamp).then(res res.text()).then(serverTime { const latency Date.now() - parseInt(serverTime); console.log(当前延迟: ${latency}ms); }); }, 3000);5.2 常见问题排查表现象可能原因解决方案画面卡顿网络抖动启用FEC前向纠错连接频繁断开NAT超时配置ICE保活每25秒移动端黑屏iOS省电模式添加playsinline属性初始加载慢STUN响应延迟部署本地TURN服务器在幼儿园监控项目中我们通过调整GOOG_REMB算法将WiFi环境下的延迟从800ms降至400ms。关键是要在SRS配置中启用TWCC反馈rtc { twcc_enabled on; nack_enabled on; transport_cc on; }