1. RTSP协议稳定但需转码的老牌方案RTSPReal Time Streaming Protocol是监控摄像头领域沿用二十余年的经典协议其工作原理类似于电视台的直播车——摄像头作为媒体服务器通过RTSP地址向外推送视频流。我在智能家居项目中最常遇到海康、大华等厂商的设备默认支持RTSP协议地址格式通常是rtsp://[username]:[password][ip]:[port]/[path]。不过浏览器原生不支持RTSP直接播放需要借助转码层。去年给某工厂做设备监控时我测试过两种成熟方案VLC.js方案本质是把桌面端VLC播放器移植到浏览器需要用户预先安装VLC软件。实测在Chrome上延迟约2秒但CPU占用率高达70%转码中转方案用FFmpeg将RTSP流转为Web兼容格式。这里分享个实用命令ffmpeg -i rtsp://your_stream -c:v libx264 -preset ultrafast -f flv rtmp://localhost/live/stream这个方案在树莓派4B上实测延迟800ms左右适合对实时性要求不高的场景。需要注意的是RTSP默认使用UDP传输在Wi-Fi环境下可能出现丢包建议添加-rtsp_transport tcp参数强制使用TCP。2. WebRTC毫秒级延迟的现代方案去年帮某电竞直播平台优化直播延迟时WebRTC给了我们惊喜——从摄像头到观众屏幕的端到端延迟压缩到了200ms以内。其核心在于使用UDP传输并结合NACK丢包重传、FEC前向纠错等抗丢包机制。实现WebRTC视频流需要三个关键组件信令服务器我用Node.jsSocket.io搭建的交换服务器负责协商SDP会话描述协议STUN/TURN服务器用于NAT穿透推荐使用coturn开源项目客户端代码以下是关键的前端实现片段const pc new RTCPeerConnection(); navigator.mediaDevices.getUserMedia({video: true}) .then(stream { document.getElementById(video).srcObject stream; stream.getTracks().forEach(track pc.addTrack(track, stream)); });实测发现WebRTC在1080p分辨率下带宽消耗约2Mbps比RTMP节省30%流量。但需要注意Safari浏览器需要额外引入adapter.js兼容层。3. HLS高兼容性的分段流方案为某连锁超市部署中央监控系统时我们最终选择了HLS方案。其核心原理是把视频流切成若干.ts片段通过m3u8索引文件按需加载。这种类似视频拼图的工作机制使得它在4G网络下表现尤为稳定。推荐使用hls.js库实现前端播放配合Nginx的nginx-rtmp-module实现服务端转码rtmp { server { listen 1935; application live { live on; hls on; hls_path /tmp/hls; hls_fragment 2s; } } }实测数据表明HLS在iOS设备上兼容性最好但默认会有6-10秒的延迟。可以通过调整hls_fragment参数到1秒来优化但这会增加服务器负载。建议在移动端监控场景使用工业控制等低延迟需求慎选。4. RTMP直播场景的经典选择虽然Adobe已停止支持Flash但RTMP协议凭借其低延迟特性1-3秒仍在直播领域广泛使用。我在某网红直播基地的项目中发现90%的推流设备仍在使用RTMP协议。典型部署需要使用OBS等软件推流到Nginx服务器转码为HLS或DASH供网页播放前端使用flv.js解码播放这里有个性能优化技巧启用HTTP-FLV协议可以绕过Flash直接播放延迟可控制在1秒内。配置示例import FLVJS from flv.js; if (FLVJS.isSupported()) { const flvPlayer FLVJS.createPlayer({ type: flv, url: http://example.com/live/stream.flv }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); }需要注意的是RTMP默认使用1935端口在部分企业防火墙中可能被拦截需要提前做好网络规划。5. MJPEG轻量级图像流方案为某农业大棚项目部署虫情监测系统时我们选用了MJPEG方案。这种技术本质是服务器持续发送JPEG图片帧适合低功耗设备。实测ESP32-CAM模块在640x480分辨率下可以保持15FPS的流畅度。实现极其简单前端只需要一个img标签img srchttp://device_ip/mjpeg_stream服务端用Python实现也很容易from flask import Response, Flask app Flask(__name__) def gen_frames(): while True: frame camera.get_frame() # 获取摄像头帧 yield (b--frame\r\n bContent-Type: image/jpeg\r\n\r\n frame b\r\n) app.route(/mjpeg_stream) def video_feed(): return Response(gen_frames(), mimetypemultipart/x-mixed-replace; boundaryframe)不过要注意MJPEG每个帧都是独立JPEG文件带宽利用率较低。实测显示720p视频需要3Mbps带宽是同分辨率H.264的5倍。适合低帧率10FPS的监控场景。