视频流实时预览设置：几处关键配置别漏掉

在安防监控、远程巡检、AI视觉分析这些场景里，视频流实时预览不是‘能看就行’的事儿。画面卡顿、延迟高、黑屏、花屏——这些问题往往不是摄像头坏了，而是预览设置没调对。

先看协议和端口通不通

很多用户一上来就折腾分辨率或码率，结果发现根本连不上流。得先确认后端服务是否正确启用了 RTSP/RTMP/WebRTC 等协议，并开放对应端口。比如常见 RTSP 默认走 554，但有些设备改成了 8554 或自定义端口，客户端填错就直接白屏。

用命令行快速验证：

ffplay -v quiet -i rtsp://192.168.1.100:554/stream1

如果报 Connection refused，八成是端口没开或地址写错了。

分辨率与帧率要匹配设备能力

不是越高越好。一台海康低端枪机标称支持 4MP@30fps，但实际在 Web 页面用 WebRTC 拉流时，若强行设成 2560×1440@30，浏览器可能解码不过来，反而频繁掉帧。实测中，1280×720@15fps 在多数内网环境更稳。

在 VLC 或 ffmpeg 推流端调试时，可加参数限制输出规格：

ffmpeg -i /dev/video0 -s 1280x720 -r 15 -c:v libx264 -preset fast -f rtsp rtsp://0.0.0.0:8554/stream

缓冲区大小影响首帧时间

网页端预览常遇到‘点开等三秒才出画面’，这跟播放器缓冲策略有关。比如 Video.js 默认 bufferLength 是 30 秒，对实时性要求高的场景太长了。可在初始化时调整：

player.src({
  src: 'rtmp://192.168.1.100/live/cam1',
  type: 'rtmp/flv'
});
player.tech().options_.bufferLength = 1; // 单位：秒

别忽略跨域和 HTTPS 限制

Chrome 95+ 已禁止非安全上下文（HTTP）加载媒体资源。如果你的前端页面是 http://local.test，而视频流地址是 https://api.xxx.com/stream，或者反过来，大概率被拦截。本地开发建议统一走 HTTPS + 本地证书，或用 http-server -S -C cert.pem -K key.pem 启服务。

硬件加速开启与否，差别很明显

在边缘盒子或低配 PC 上跑多路 1080p 预览，CPU 解码很容易飙到 90%。Windows 下 Chrome 可在 chrome://flags/#enable-accelerated-video-decode 开启硬解；Linux 则需确认系统已装好 VA-API 或 VDPAU 驱动，并在 ffmpeg 中指定：

ffmpeg -hwaccel vaapi -hwaccel_device /dev/dri/renderD128 -i input.rtsp ...

设置不是一劳永逸。同一套配置换到不同网络环境（比如从千兆内网切到 4G 热点），就得重新调帧率、关 GOP、降码率。多试两次，比查十篇文档更管用。