用Nginx + nginx-rtmp-module搭建直播服务器

xu.wang

发布于 2020.02.09 23:41 阅读 265 评论 0

本文主要引用自: https://blog.csdn.net/Ricardo18/article/details/89359623

    本文主要是安装nginx以及使用nginx的rtmp-module来实现直播服务。

    环境介绍:

                 1. 阿里云购买了 1核1G 7M带宽的服务器,并安装CentOS7.7系统

                 2. nginx-1.12.2

                 3. 在CentOS上安装了宝塔运维,方便文件上传等操作

 一、安装Nginx

 

         1. 创建 /www/server/rtmp-live  目录用来存放nginx压缩包、nginx-rtmp-module压缩包

         下载地址如下:        

wget http://nginx.org/download/nginx-1.12.2.tar.gz
wget https://codeload.github.com/arut/nginx-rtmp-module/zip/master

        2. 解压两个压缩包

         由于bt(宝塔运维)自带解压软件,所以使用运维界面可直接解压。

        也可以使用下面的命令进行解压。

tar -zxvf nginx-1.12.2.tar.gz
unzip nginx-rtmp-module-master.zip 

       3. 安装一些依赖库

下面命令直接运行即可,已经安装过的库会有提示,直接进行下一步即可。

yum -y install gcc-c++ 
yum -y install pcre pcre-devel  
yum -y install zlib zlib-devel 
yum -y install openssl openssl-devel

二、安装nginx-rtmp-module

    1. 进入nginx解压目录

cd /www/server/rtmp-live/nginx-1.12.2

    2. 安装模块

#完成rtmp模块安装,=后面输入你的模块包的绝对路径
./configure --add-module=/www/server/rtmp-live/nginx-rtmp-module-master
make&make install

    3. 查看配置是否成功

        注意此时nginx启动、重启等操场需要在/usr/local/nginx/sbin下进行。

        nginx的配置文件也必须在/usr/local/nginx/conf/nginx.conf 此路径下修改才能生效。

cd /usr/local/nginx/sbin
./nginx -t

        显示下面的结果则表示安装成功。

    4. 在nginx配置文件中加入rtmp模块

        首先打开nginx配置文件:

vi /usr/local/nginx/conf/nginx.conf

        http{} 同级加入下面配置:

rtmp {  
  
    server {  
  
        listen 1935;  #监听的端口
  
        chunk_size 4000;  
        
        application hls {
            live on;
            hls on;
            hls_path /www/hls;#视频流存放地址
            hls_fragment 5s;
            hls_playlist_length 15s;
            hls_continuous on; #连续模式。
            hls_cleanup off;    #保存切片。
            hls_nested on;     #嵌套模式。
        }
    }  
}

        位置入下图:

       5.  在http{} 中增加直播流存放地址

           推流时会在视频存放地址生成对应 串流密钥的文件夹,并在文件夹中生成index.m3u8 以及切片文件(.ts)

location /hls {  #添加视频流存放地址。
        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
        #访问权限开启,否则访问这个地址会报403
        autoindex on;
        alias /www/hls;#视频流存放地址,与上面的hls_path相对应,这里root和alias的区别可自行百度
        expires -1;
        add_header Cache-Control no-cache;
        #防止跨域问题
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';  
    }

        位置如下图:

 

        6. 保存配置并重启nginx

cd /usr/local/nginx/sbin
./nginx -s reload

        注意: 由于本文环境使用的是阿里云以及宝塔运维,所以测试前需要将端口:80、1935打开。

三、 测试推流和拉流

 

       1. 推流

        推流时使用的是OBS进行推流,在设置-串流中输入服务器地址和串流密钥即可开始推流。

        由于服务器在nginx中配置的application为 “hls”,所以服务器的地址必须填写为:rtmp://(IP/域名):1935/hls。

        串流密钥可以随便填写,此处我填写的为“1111”。

 

      2. 拉流

        拉流此处介绍两种方式:

        (1)使用VLC用 “rtmp://(IP/域名):1935/hls/1111” 进行拉流

               首先下载VLC播放器:https://www.videolan.org/

          在file - open network 中填写拉流地址:“rtmp://(IP/域名):1935/hls/1111”

                

          双击地址即可进行播放:

      (2)使用网页播放m3u8

        将下面代码中的连接修改为您自己的拉流连接,保存成html后打开即可播放。注意连接格式为:

        “http://” + ip + “/hls” + 推流密钥 + /index.m3u8

         例如: http://192.168.1.123/hls/1111/index.m3u8

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
    <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
    <!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
</head>
<body>
    <style>
        .video-js .vjs-tech {position: relative !important;}
    </style>
    <div>
        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
            <source id="source" src="http://ip/hls/1111/index.m3u8"></source>
        </video>
    </div>
    <div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>
    <div> 当前直播连接为: <div id="liveUrl">http://ip/hls/1111/index.m3u8</div> </div>
</body>
 
<script>
    // videojs 简单使用
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
    })
    myVideo.play()
    var changeVideo = function (vdoSrc) {
        if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
            myVideo.src({
                src: vdoSrc,
                type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
            })
        } else {
            myVideo.src(vdoSrc)
        }
        myVideo.load();
        myVideo.play();
    }
    var src = 'https://live-krs.oss-cn-beijing.aliyuncs.com/index.m3u8';
    document.querySelector('.qiehuan').addEventListener('click', function () {
        changeVideo(src);
        document.getElementById("liveUrl").innerHTML=src;
        // document.getElementById("liveUrl").innerHTML="";
    })
</script>