保姆级教程：用FFmpeg+nginx实现大华摄像头网页实时监控（附常见问题解决）

从RTSP到HLS：构建一个稳定、可扩展的网页视频监控系统

最近在做一个智慧园区的项目，需要把几十个大华摄像头的画面集成到一个统一的Web管理后台里。甲方要求得很明确：不能装任何插件，领导用浏览器就能随时看，手机也能访问，还得稳定。这听起来像是要用WebRTC？但考虑到跨浏览器兼容性和海量并发的压力，我们最终选择了更经典的方案：将摄像头的RTSP流转换成HLS流，通过Nginx分发，再用前端播放器呈现。这套方案听起来老派，但经过深度优化后，其稳定性、兼容性和资源消耗的平衡，在实际生产环境中表现得出奇地好。今天，我就把从设备取流到前端播放的完整链路，结合我踩过的坑和优化经验，系统地梳理一遍。无论你是想为自家小店搭建一个简单的监控看板，还是为企业部署一套中型的视频中台，这篇文章都能给你提供一条清晰的路径。

1. 核心架构解析：为什么是FFmpeg + Nginx + HLS？

在动手之前，我们得先理解这套技术栈背后的逻辑。很多教程一上来就敲命令，但如果不明白“为什么”，一旦出现问题，调试起来就会像无头苍蝇。

RTSP (Real Time Streaming Protocol) 是网络摄像头的“母语”。它是一种标准的流媒体控制协议，设计初衷就是为了控制音视频流的播放、暂停等。大华、海康等主流厂商的摄像头都原生支持通过RTSP协议输出视频流。然而，RTSP在Web端存在一个根本性的障碍：主流的HTML5 <video> 标签不支持直接播放RTSP流。浏览器厂商出于安全、复杂度等原因，并未将RTSP支持纳入标准。

那么，如何让浏览器能看呢？技术路线主要有几条：

1. WebRTC： 新兴的实时通信方案，延迟极低（可做到毫秒级）。但它对服务器资源消耗大，需要专门的信令服务器（如Janus, Mediasoup），配置复杂，且在高并发下对带宽和服务器性能要求苛刻。
2. HTTP-FLV / WebSocket： 需要前端集成特定的播放器库（如flv.js），通过HTTP长连接或WebSocket传输流数据。延迟较低（1-3秒），但需要浏览器支持MSE (Media Source Extensions)，且服务器端需要专门的流媒体服务器（如SRS）。
3. HLS (HTTP Live Streaming)： 苹果公司提出的基于HTTP的流媒体协议。其原理是将整个流切割成一个个小的、基于HTTP的文件（.ts切片）来下载，同时由一个索引文件（.m3u8）来管理。它的最大优势是极致兼容。任何能播放MP4视频的浏览器或设备，几乎都能播放HLS。它利用HTTP协议，完美绕过了企业防火墙的限制，CDN分发也极其方便。

我们的选择逻辑就很清晰了：用FFmpeg这个“瑞士军刀”将摄像头的RTSP流实时转封装或转码为HLS流；用Nginx这个高性能Web服务器来托管和分发这些HLS切片文件；前端使用通用的HLS播放器（如video.js）进行播放。

这个架构的优缺点对比如下：

提示：如果你的场景对延迟非常敏感（要求3秒内）