VUE+webrtc-streamer实战：从零搭建跨平台监控视频实时播放系统

1. 为什么选择VUEwebrtc-streamer这套方案第一次接触监控视频实时播放需求时我花了整整两周时间对比各种技术方案。市面上常见的方案比如FFmpeg转码WebSocket、RTMP协议推流、HLS切片播放都试了个遍最后发现webrtc-streamer这个神器简直是监控领域的瑞士军刀。先说个真实案例去年给某连锁超市做仓库监控系统时他们的需求是要在网页上同时查看20路摄像头延迟必须控制在500ms以内。用传统方案要么延迟高HLS普遍有3-5秒延迟要么兼容性差RTMP需要Flash直到发现webrtc-streamer配合VUE前端才真正解决了问题。实测下来这套组合有三大优势超低延迟WebRTC天生的P2P特性从摄像头到浏览器平均延迟仅300ms左右跨平台支持一套代码搞定Windows/Linux/Mac甚至树莓派都能跑硬件解码直接调用浏览器内置的H264解码能力CPU占用率比FFmpeg转码低80%不过要注意webrtc-streamer最适合的是H264编码的RTSP流。如果摄像头输出的是H265需要先在摄像头管理后台改成H264编码格式否则会出现黑屏问题。这个坑我当年可是踩得结结实实。2. 开发环境搭建全攻略2.1 准备工具清单在开始敲代码前建议先准备好这些工具以Windows为例其他系统类似VSCode前端开发神器插件推荐Volar和ESLintNode.js 16建议用nvm管理多版本webrtc-streamer从GitHub release页面下载对应版本Vue CLI官方脚手架工具测试摄像头海康/大华都行记得提前拿到RTSP地址这里有个小技巧下载webrtc-streamer时如果网络环境不好可以用这个国内镜像地址替换github.comhttps://ghproxy.com/https://github.com/mpromonet/webrtc-streamer/releases2.2 项目初始化打开终端按顺序执行这些命令# 创建Vue3项目 npm init vuelatest webrtc-monitor # 进入项目目录 cd webrtc-monitor # 安装必要依赖 npm install element-plus axios --save初始化完成后建议先修改vite.config.js配置代理避免后续跨域问题export default defineConfig({ server: { proxy: { /api: { target: http://127.0.0.1:8000, changeOrigin: true } } } })3. 本地调试实战技巧3.1 启动webrtc-streamer服务解压下载的webrtc-streamer压缩包后我习惯用命令行启动方便查看日志# Windows ./webrtc-streamer.exe -H 8000 # Linux/Mac ./webrtc-streamer -H 8000启动成功后浏览器访问http://localhost:8000应该能看到测试页面。如果遇到端口占用可以用-H参数指定其他端口。3.2 前端集成关键步骤把webrtc-streamer的JS文件复制到Vue项目时我推荐放在public/libs目录下然后在index.html这样引入script src/libs/adapter.min.js/script script src/libs/webrtcstreamer.js/script视频组件我一般会做以下优化template div classvideo-container video idvideo autoplay muted playsinline :style{ width: videoWidth px } loadedmetadatahandleLoaded /video div classcontrols el-button clicktoggleFullscreen全屏/el-button el-button clicksnapshot截图/el-button /div /div /template注意几个关键属性muted自动播放必须设置静音playsinline防止iOS浏览器自动全屏loadedmetadata用于获取视频原始分辨率4. 生产环境部署指南4.1 服务端后台运行在Ubuntu服务器上用systemd托管服务最稳定。创建/etc/systemd/system/webrtc.service[Unit] DescriptionWebRTC Streamer Afternetwork.target [Service] Userubuntu ExecStart/opt/webrtc-streamer/webrtc-streamer -H 8000 Restartalways [Install] WantedBymulti-user.target然后执行sudo systemctl daemon-reload sudo systemctl start webrtc sudo systemctl enable webrtc4.2 性能优化配置高并发场景下建议修改这些启动参数./webrtc-streamer \ -H 8000 \ -S /tmp/webrtc.sock \ # 使用Unix Socket减少TCP开销 -s /ssl/cert.pem \ # HTTPS证书路径 -k /ssl/key.pem \ # SSL密钥路径 --max-clients50 \ # 最大连接数 --ice-serversstun:stun.l.google.com:19302 # 添加STUN服务器5. 常见问题解决方案问题1视频能连接但画面卡顿检查摄像头输出码率建议不超过2048kbps在webrtc-streamer启动时添加--bitrate1500参数限制码率问题2iOS设备无法播放确保RTSP流是H264 Baseline Profile在Safari浏览器需要额外添加crossoriginanonymous属性问题3多路视频内存泄漏在Vue组件的beforeUnmount钩子中必须调用disconnect()定期重启服务可以用cronjob每天凌晨重启记得第一次上线时我们没注意内存泄漏问题结果服务跑了三天就把16G内存吃光了。后来在代码里加了内存监控才解决setInterval(() { console.log(Memory usage: ${process.memoryUsage().heapUsed / 1024 / 1024} MB); }, 60000);