使用Nginx rtmp模块+Obs+jwplayer搭建实现直播

技术栈

  1. Obs

  2. JWPlayer

  3. Nginx+nginx-rtmp-module

    rtmp 即 Real Time Messaging Protocol(实时消息传输协议), 该协议基于TCP,是一个协议族 ,我们这里用来做视频推流

搭建步骤

  1. 安装Nginx+rtmp模块

    # 添加组和用户
    groupadd www
    useradd -g www www
    
    # 下载安装包
    cd /home/download/
    git clone https://github.com/arut/nginx-rtmp-module.git
    
    wget http://nginx.org/download/nginx-1.13.9.tar.gz && \
    tar -zxvf nginx-1.13.9.tar.gz  && \
    cd nginx-1.13.9 
    
    # 安装依赖
    yum -y install gcc gcc-c++ autoconf automake zlib  wget  pcre pcre-devel
    
    # 编译安装
    ./configure --prefix=/usr/local/nginx \
    --user=www \
    --group=www \
    --with-http_v2_module \
    --with-http_ssl_module \
    --with-http_realip_module \
    --with-http_stub_status_module \
    --with-http_flv_module \
    --with-http_gzip_static_module\
    --add-module=/home/download/nginx-rtmp-module   # 安装Nginxrtmp扩展,很重要
    
    make
    make test
    make install
    
  2. 配置rmtp应用
    vim /usr/local/nginx/conf/nginx.conf
    
    # 配置如下
    #user  nobody;
    worker_processes  1;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    events {
       worker_connections  1024;
    }
    # 配置rmtp应用
    rtmp {
       server {
           listen 1935;        # 推流拉流的端口
           chunk_size 4096;    # 分片大小
    
           # rtmp应用直播流设置
           application rtmpapp {
                   live on;        # 开启直播模式
                   max_connections 1024; # 最大连接数
           }
       }
    }
    # 这里不用改
    http {
    .....
    }
    
  3. 开启nginx服务
    /usr/local/nginx/sbin/nginx
    
  4. 使用Obs推流至Nginx(我这里的服务器地址为192.168.123.123)
    > 配置推流服务地址

    > 点击开始串流

    > 下方标记的地方为绿色即代表推流成功

  5. 运行用户客户端
    > 用户客户端代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>player</title>
    <!-- 自行在网上下载,包括jwplayer.js和jwplayer.flash.swf -->
    <script type="text/javascript" src="./jwplayer.js"></script>
    </head>
    <body>
    <div id="container">Loading the player ...</div>
    <script type="text/javascript">
        jwplayer("container").setup({
        sources: [
            {
                file: "rtmp://192.168.123.123:1935/rtmpapp/"
            }
        ],
        autostart: true,
        primary: "flash"
    });
    </script>
    </body>
    </html>
    

    > 运行截图如下(切记浏览器需要开启flash插件)

发表评论