欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-07-13 12:07:09
...

0.写在前面

本文通过虚拟机（Ubuntu16.04）搭建基于nginx-http-flv-module的流媒体服务，并在网页中配合Bilibili开源的flv.js可以在不需要flash插件的情况下进行直播。

注：操作系统不一定非得是Ubuntu16.04，只要是Ubuntu应该都是没问题的。

1.安装依赖

sudo apt-get update
sudo apt-get install libpcre3 libpcre3-dev
sudo apt-get install openssl libssl-dev

2.软件下载

下载nginx源码，版本号为1.8.1，下载地址在这里

下载nginx-http-flv-module源码，下载地址在这里

将文件解压，准备开整

3.安装

将nginx-http-flv-module移动到/usr/local/nginx下

cp -r nginx-http-flv-module-master /usr/local/nginx/nginx-http-flv-module

cd进入nginx目录

cd nginx-1.8.1/

将 nginx-http-flv-module 模块添加到 nginx 中

./configure --prefix=/usr/local/nginx  --add-module=/usr/local/nginx/nginx-http-flv-module

生成make文件

make

安装nginx

sudo make install

配置nginx为全局变量

ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/

测试是否安装成功

nginx -v

安装成功将得到以下输出

nginx version: nginx/1.8.1

4.配置nginx

打开配置文件

sudo vim /usr/local/nginx/conf/nginx.conf

务必在默认配置中加入如下配置：

# 在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头
}

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

5.启动nginx并使用ffmpeg推流

启动nginx

sudo nginx -s reload

ffmpeg推流

ffmpeg -re -i ~/Videos/xinyang.mp4 -vcodec copy -acodec copy -f flv "rtmp://127.0.0.1:1935/live/test"

注：

  • ~/Videos/xinyang.mp4替换为你的服务器本地视频路径；
  • rtmp路径需要根据你的配置进行设置：1935是端口号，live是application名字，test是随便取的

推流成功截图：
Ubuntu搭建基于nginx-http-flv-module的流媒体服务

6.网页播放

下载flv.js，下载地址在这里

网页代码如***意其中的url需要根据自己的服务器配置进行设置：

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</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://192.168.208.130/live?port=1935&app=live&stream=test'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    }

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

</body>

</html>

注：'http://192.168.208.130/live?port=1935&app=live&stream=test’中port是rtmp端口，app是rtmp中application的名字，而stream就是推流时指定的。可以直接参考rtmp://127.0.0.1:1935/live/test进行填写。

7.效果展示

我使用的张信哲的《信仰》MV进行推流，网页播放截图如下：
Ubuntu搭建基于nginx-http-flv-module的流媒体服务
Ubuntu搭建基于nginx-http-flv-module的流媒体服务

整个播放过程非常流畅，延迟在1s-3s左右

8.写在最后

有任何问题欢迎交流！

相关标签： ML & DL 直播 nginx flv.js 网页播放

上一篇： ffmpeg开发之旅(3)：AAC编码格式分析与MP4文件封装(MediaCodec+MediaMuxer)

下一篇： 视频监控直播项目经验总结

推荐阅读