5分钟搞定！用flv.js + OBS搭建低延迟直播系统（含常见问题排查）-CSDN博客

从零构建低延迟直播系统：flv.js与OBS的实战调优指南

最近在帮一个朋友搭建线上分享会的直播系统，他原本以为用OBS推流，网页端随便找个播放器就能搞定，结果实际一跑，延迟高得离谱，观众反馈比现场慢了快十秒，互动环节几乎没法进行。这让我意识到，很多开发者虽然知道flv.js和OBS这些工具，但真正要把延迟压到可接受范围（比如2秒内），中间有一堆细节坑要填。这篇文章就是把我踩过的坑和调优经验整理出来，目标不是简单地复现一个“能播”的demo，而是让你搭建的系统在实际生产环境中稳定、低延迟、易维护。

这套方案的核心是HTTP-FLV协议，它结合了RTMP的低延迟和HTTP的易用性，而flv.js则负责在浏览器端无Flash播放FLV流。听起来简单，但OBS的参数、服务器的配置、flv.js的优化选项，任何一个环节设置不当，延迟就可能从1秒飙升到5秒以上。接下来，我会分步拆解，从环境搭建、参数调优到深度优化，手把手带你构建一个真正可用的低延迟直播系统。

1. 核心组件选型与基础环境搭建

在开始写代码之前，我们先得把几个核心组件的作用和选型理清楚。很多人一上来就照着教程安装，却不知道每个工具到底承担了什么角色，出了问题自然无从排查。

整个直播数据流的路径是这样的： OBS（推流端） -> 流媒体服务器（中转与分发） -> 网页浏览器（拉流播放端）

对应的工具链是：

推流工具：OBS Studio。免费、开源、功能强大，几乎是行业标准。它负责采集音视频（摄像头、屏幕、音频），编码压缩（H.264/AAC），并按照RTMP或SRT等协议推送到服务器。
流媒体服务器：这里我们选用Nginx + nginx-http-flv-module。这是一个非常流行的组合。Nginx本身是高性能的Web服务器，而nginx-http-flv-module模块让它具备了接收RTMP推流并转换为HTTP-FLV流的能力。相比单独使用LiveGo等工具，集成在Nginx中更便于统一管理和配置HTTPS、负载均衡等。
网页播放器：flv.js。B站开源的神器，它在前端将服务器推送过来的FLV流进行解封装，把音视频数据喂给HTML5的<video>标签。整个过程不需要Flash。

注意：如果你的观众需要覆盖iOS或较老版本的Android移动设备，需要额外准备HLS（m3u8）的降级方案，因为flv.js依赖的Media Source Extensions API在这些平台上支持有限。本文主要聚焦于PC浏览器和现代移动浏览器上的低延迟方案。

1.1 流媒体服务器部署（Nginx with RTMP/FLV Module）

不建议使用预编译的普通Nginx，我们需要自己编译集成nginx-http-flv-module模块。以下是在Ubuntu 20.04系统上的操作步骤，其他Linux发行版类似。

首先，安装编译依赖：

sudo apt update
sudo apt install build-essential libpcre3 libpcre3-dev zlib1g zlib1g-dev openssl libssl-dev -y

然后，下载Nginx和模块的源码：

# 创建一个工作目录
mkdir ~/nginx-build && cd ~/nginx-build

# 下载Nginx稳定版源码 (以1.22.1为例)
wget http://nginx.org/download/nginx-1.22.1.tar.gz
tar -zxvf nginx-1.22.1.tar.gz

# 下载nginx-http-flv-module源码
wget https://github.com/winshining/nginx-http-flv-module/archive/refs/tags/v1.2.10.tar.gz
tar -zxvf v1.2.10.tar.gz

接下来是编译配置和编译。关键的--add-module参数指向我们下载的模块路径。

cd nginx-1.22.1
./configure --prefix=/usr/local/nginx \
            --add-module=../nginx-http-flv-module-1.2.10 \
            --with-http_ssl_module \
            --with-http_stub_status_module \
            --with-http_realip_module \
            --with-threads

# 编译并安装
make -j$(nproc)
sudo make install

编译完成后，需要修改Nginx的配置文件。打开/usr/local/nginx/conf/nginx.conf，在http块之外，添加rtmp服务配置：

# 在events块之后，http块之前添加
rtmp {
    server {
        listen 1935; # RTMP默认端口
        chunk_size 4096;
        application live {
            live on;
            meta copy; # 复制元数据
            gop_cache off; # 关闭GOP缓存，降低延迟，但可能增加首屏时间
            wait_key on; # 等待关键帧，提升体验
            wait_video on;
            publish_notify on;

            # 将RTMP流转为HTTP-FLV流
            dash off;
            hls off;
        }
    }
}

同时，在http块的server配置中，添加一个location来处理FLV流的访问：

http {
    server {
        listen       80;
        server_name  localhost;

        location /live {
            flv_live on; # 开启FLV直播
            chunked_transfer_encoding on;
            add_header 'Access-Control-Allow-Origin' '*'; # 允许跨域，开发时使用，生产环境应指定域名
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        # 其他location配置...
    }
}

配置完成后，启动Nginx：