1. 为什么选择WebRTC-streamer做实时监控？

最近在给公司搭建内部安防系统时，我对比了市面上常见的几种视频流方案。传统方案比如ffmpeg转码+flv.js播放，延迟经常在2秒以上，保安同事总抱怨"看到人影的时候贼都跑没影了"。换成WebRTC-streamer后，延迟直接降到400毫秒内，画面流畅得就像在看本地视频。

WebRTC-streamer的核心优势在于它原生支持WebRTC协议。这个由谷歌推动的开放标准，本来就是为实时通信设计的。我实测发现几个亮点：首先切换浏览器标签时视频不会暂停（传统方案会断流）；其次Chrome下能轻松实现10+路并发（flv.js受限于HTTP/1.1的6路限制）；最重要的是它直接支持RTSP源，省去了转码环节，这对老旧摄像头特别友好。

2. 五分钟快速部署服务端

2.1 Windows一键启动

官网提供的Windows版简直是小白福音。下载压缩包解压后，双击webrtc-streamer.exe就能启动服务。不过要注意两点：一是防火墙要放行8000端口；二是如果摄像头在内网，记得把exe文件和html文件夹放在同一目录下，否则前端页面会找不到依赖的JS文件。

我习惯用命令行启动，方便查看日志：

webrtc-streamer.exe -H 0.0.0.0 -P 8000 -C config.json

这里的-H参数指定监听地址，-P是端口号，-C可以加载自定义配置。实测下来，4核8G的服务器带20路720P流毫无压力。

2.2 Docker方案更省心

Linux环境推荐直接用Docker，省去编译依赖的麻烦。官方镜像已经配置好所有环境：

docker run -d --restart always \
  -p 8000:8000 \
  -v /etc/localtime:/etc/localtime:ro \
  --name webrtc-streamer \
  mpromonet/webrtc-streamer

特别提醒：如果摄像头和Docker主机不在同一网段，需要加上--network host参数。遇到过时区问题的同学，记得挂载localtime文件（如上所示），否则录像回放的时间戳会错乱。

3. 前端集成实战技巧

3.1 基础播放器实现

前端只需要引入两个JS文件：webrtcstreamer.js和adapter.min.js。注意adapter.js必须放在前面，它是WebRTC的兼容层。这是我优化过的代码模板：

<video id="video1" style="width:640px;height:360px" 
  autoplay playsinline muted>
</video>

<script>
const serverUrl = window.location.origin.replace(/^http/, 'ws');
const streamer = new WebRtcStreamer('video1', serverUrl);
streamer.connect('rtsp://admin:123456@192.168.1.100/stream1');
</script>

踩坑提醒：一定要加playsinline属性，否则iOS上会全屏播放；muted属性也必不可少，因为浏览器禁止自动播放带声音的视频。

3.2 多路监控墙方案

要实现监控墙效果，可以用CSS Grid布局配合动态创建video元素：

// 创建4x4监控墙
const grid = document.getElementById('video-wall');
for(let i=0; i<16; i++) {
  const video = document.createElement('video');
  video.id = `cam${i}`;
  video.autoplay = true;
  video.muted = true;
  grid.appendChild(video);
  
  new WebRtcStreamer(`cam${i}`, serverUrl)
    .connect(cameraList[i].rtsp);
}

性能优化点：当监控墙不可见时（比如切到其他tab），建议调用disconnect()断开连接。实测这样可以降低40%的CPU占用。

4. 连接不同品牌摄像头的秘籍

4.1 海康威视配置模板

海康摄像头的RTSP地址结构最规范，但有几个易错点：

# 新款摄像头
rtsp://admin:密码@IP:554/Streaming/Channels/101

# 老款摄像头
rtsp://admin:密码@IP:554/h264/ch1/main/av_stream

特别注意：101中的第一个1表示通道号，后两位01表示主码流（02是子码流）。如果提示"404 Not Found"，很可能是用了老款模板访问新款设备。

4.2 大华设备特殊配置

大华的URL参数比较特别，需要区分实时流和回放流：

# 实时监控
rtsp://admin:admin@IP:554/cam/realmonitor?channel=1&subtype=0

# 录像回放（注意时间格式）
rtsp://admin:admin@IP:554/cam/playback?channel=1&subtype=0&starttime=2023_08_01_14_30_00

遇到连接失败时，先确认三件事：1)摄像头是否开启RTSP服务；2)密码是否含特殊字符（建议先用简单密码测试）；3)子码流是否可用（有些设备主码流转码压力大）。

5. 性能调优与故障排查

5.1 关键参数调整

在config.json中可以优化这些参数：

{
  "webrtc": {
    "iceServers": [{"urls": "stun:stun.l.google.com:19302"}],
    "portRange": "10000-20000",
    "bitrate": 2000
  },
  "rtsp": {
    "tcp": true,
    "timeout": 5
  }
}

重点说明：tcp设为true可以解决UDP被防火墙拦截的问题，但会增加延迟；bitrate单位是kbps，根据网络质量调整；STUN服务器建议自建，公共服务器可能不稳定。

5.2 常见问题解决方案

• 画面卡顿：先降低bitrate试试，也可能是摄像头编码压力大，切换为子码流
• 绿色花屏：这是H.265编码的兼容性问题，在摄像头后台改为H.264编码
• 无法连接：用VLC测试RTSP地址是否有效，检查端口是否被占用（netstat -tulnp）
• 延迟突然增大：可能是网络抖动，建议在交换机上开启QoS优先级

日志分析技巧：启动时加上-v参数显示详细日志。关键字段看这些：ICE connection state（应该是completed）、bytes received（持续增长表示流正常）、RTT（超过300ms就要排查）。

6. 进阶功能扩展

对于企业级应用，可以考虑这些增强方案：

1. 鉴权集成：在Nginx层添加Basic Auth，或者对接OAuth2.0
2. 状态监控：通过/api/status接口获取各流的状态信息
3. 云端录制：用FFmpeg转存关键片段到对象存储
4. AI分析：配合TensorFlow.js实现人脸检测等边缘计算

有个取巧的方案：在Docker里同时运行WebRTC-streamer和Janus Gateway，用Janus来做SFU转发，这样既能保留低延迟特性，又能支持大规模并发。