搭建基于nginx-http-flv-module流媒体服务

本文最后更新于：2022年6月1日下午

nginx下载官网：http://nginx.org/en/download.html

1.安装依赖环境

1
2
3

# yum update
# yum install -y libpcre3 libpcre3-dev
# yum install -y openssl libssl-dev

2.下载软件

①下载nginx源码包，示例版本号为1.8.1，点击下载

②下载nginx-http-flv-module源码，点击进入github下载zip

③将文件解压

1
2
3

# tar zxvf nginx-1.8.1.tar.gz  
# yum install -y unzip
# unzip master.zip

3.安装

①将nginx-http-flv-module移动到/usr/local/nginx下,(移动失败可能是没有文件夹需要mkdir)

1 2	`# mkdir -p /usr/local/nginx # cp -r nginx-http-flv-module-master /usr/local/nginx/nginx-http-flv-module`

②cd进入nginx的目录

1	`# cd nginx-1.8.1/`

③将 nginx-http-flv-module 模块添加到nginx里

1	`# ./configure --prefix=/usr/local/nginx --with-http_ssl_module --add-module=/usr/local/nginx/nginx-http-flv-module`

④生成make文件并安装nginx

1 2	`# make # make install`

⑤配置nginx为全局变量

1	`# ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/`

⑥测试nginx安装是否成功，查看nginx版本

1 2	`# nginx -v 输出：nginx version: nginx/1.8.1`

4.配置nginx文件

①打开配置文件

1	`# vim /usr/local/nginx/conf/nginx.conf`

②默认配置中加入以下配置

# 在全局块里加入
rtmp {
    server {
        listen 1935; #Nginx监听的RTMP推流/拉流端口
        application live {
            live on; #当推流时，RTMP路径中的APP（RTMP中一个概念）匹配myapp时，开启直播
            record off; #不记录视频
            gop_cache off;
        }
    }       
}

# 在http的server中加入
location /live {
    flv_live on; #当HTTP请求以/live结尾，匹配这儿，这个选项表示开启了flv直播播放功能
    chunked_transfer_encoding  on; #HTTP协议开启Transfer-Encoding: chunked;方式回复
    add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
    add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
}

5.启动nginx并使用ffmpeg推流

①查看nginx配置文件配置成功

1	`# nginx -t`

②启动nginx

1	`# nginx -s reload`

③安装ffmpeg

1	`# yum install ffmpeg`

④ffmpeg推流

# ffmpeg -re -i ~/Videos/test.mp4 -vcodec copy -acodec copy -f flv "rtmp://127.0.0.1:1935/live/test"
注：
~/Videos/test.mp4替换服务器本地视频路径；
rtmp路径需要根据你的配置进行设置：1935是端口号，live是application名字，test一般是直播的推流密码，可以随便取；

推流本地视频成功截图

6.网页播放

下载flv.js，点击下载

1	`# wget https://github.com/bilibili/flv.js/releases/download/v1.5.0/flv.min.js`

写入网页代码,注意其中的url自定

移动js文件
# mkdir -p /usr/local/nginx/html/js/
# mv flv.min.js /usr/local/nginx/html/js/flv.min.js


写入html文件
# vim /usr/local/nginx/html/index.html


<!DOCTYPE html>
<html>

    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>test</title>
        <style>
            .mainContainer {
                display: block;
                width: 1024px;
                margin-left: auto;
                margin-right: auto;
            }

            .urlInput {
                display: block;
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                margin-top: 8px;
                margin-bottom: 8px;
            }

            .centeredVideo {
                display: block;
                width: 100%;
                height: 576px;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: auto;
            }

            .controls {
                display: block;
                width: 100%;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>

    <body>

        <p class="mainContainer">
            <video name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024"
                height="576">
                Your browser is too old which doesn't support HTML5 video.
            </video>
        </p>

        <script src="js/flv.min.js"></script>

        <script>

            function start() {
                if (flvjs.isSupported()) {
                    var videoElement = document.getElementById('videoElement');
                    var flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: 'http://47.99.91.62/live?port=1935&app=live&stream=test'
                    });
                    flvPlayer.attachMediaElement(videoElement);
                    flvPlayer.load();
                    flvPlayer.play();
                }
            }

            document.addEventListener('DOMContentLoaded', function () {
                start();
            });
        </script>

    </body>

</html>
注：
'http://47.99.91.62/live?port=1935&app=live&stream=test’中port是rtmp端口，app是rtmp中application的名字，而stream就是推流时指定的。