雪の镇守府

一个技术宅的个人小站

0%

使用nginx给自己的博客插入直播系统

发表于 分类于

最近天天看vtb上瘾，然后国内挂代理看直播感觉不过瘾，还经常卡顿。又不敢用自己的服务器挂代理看，于是乎想到了一个办法，给自己的博客加一个直播系统，然后通过服务器转播的自己的博客，然后自己看不就好了~
【这人纯粹是每个月1t流量用不完

nginx的安装

我们这里因为是需要直播系统，原版的nginx肯定不行的。我们需要手动编译进去rtmp的直播模块。
1、 首先创建操作进入目录 

1
mkdir nginx & cd nginx

2、 使用apt安装编译库 

1
apt install -y curl build-essential libpcre3 libpcre3-dev libpcre++-dev zlib1g-dev libcurl4-openssl-dev libssl-dev

3、 下载nginx 和 rtmp插件

本人使用的下载地址
nginx: https://ipoi.bid/download/nginx-1.17.10.tar.gz
nginx-rtmp-module: https://ipoi.bid/download/v1.2.1.tar.gz

1
2
wget http://nginx.org/download/nginx-1.11.8.tar.gz
wget https://github.com/arut/nginx-rtmp-module/archive/master.zip

4、 解压上述文件 

1
2
tar -zxvf nginx-1.11.8.tar.gz
unzip master.zip

5、 创建网站目录 

1
mkdir /var/www

6、 设定编译参数 

1
2
3
4
#进入nginx文件
cd nginx-1.11.8
#注意自行修改rtmp的目录
./configure --prefix=/var/www --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --pid-path=/var/run/nginx.pid --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --with-http_ssl_module --without-http_proxy_module --add-module=/root/nginx/nginx-rtmp-module-master

7、 开始编译安装nginx 

1
2
make
sudo make install

nginx的配置

nginx配置比较繁琐，一点一点来配置

配置原博客服务，以及直播信息监控的数据

注意自行把rtmp插件中的stat.xsl文件拷贝过去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
http {
    server {
        listen       80;
        root /var/www;

    }
    server {
        listen 8080;
        location / {
            root /var/www/html;
        }
        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            root /var/www/html;
        }
    }
}

启动rtmp服务 并切片保存hls

1
2
3
4
5
6
7
8
9
10
11
12
13
14
rtmp {
    server {
        listen 1935;
        application hls {
            live on;
            notify_method get;
            on_publish http://127.0.0.1:8080/on_publish;
            hls on;
            # 切片视频保存位置以及缓存时间 注意保存切片视频到博客目录
            hls_path /var/www/temp/hls;     
            hls_fragment 8s;
        }
    }
}

增加rtmp推送校验

正常的直播系统都是需要使用rtmp传送房间号和校验码，所以看上个代码里有一个on_pulish配置。我们需要做个代理进行key校验。
把这个key校验放到8080端口 进行判断。正常情况应该是把这个on_publish请求转发到 python、java、nodejs等后台服务读取数据库进行校验。
这里由于是搭建个人使用环境，就进行简单配置就行了。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
http {
    server {
        listen 8080;
        ...
        location /on_publish {
            default_type text/html;
            if ($arg_key != 123456) {
                return 404;
            }
            return 200;
        }
        ...
    }
}

解决跨域问题，原博客配置修改

解决跨域问题，所以要把直播放到和博客相同的目录下，这里添加hls用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
http {
    server {
        listen 80;
        location /hls {
            #server hls fragments  
            types{
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            alias /var/www/temp/hls;
            expires -1;
        }
    }
}

服务器视频推流

这里推荐使用FFmpeg进行推流。
这里附上一个使用youtube-dl 和FFmpeg配合的转播方法。

1
ffmpeg -i `youtube-dl -g 'https://www.youtube.com/watch?v=4gxmnm1GSS0'` -c:v copy -c:a aac -b:a 320k -ar 44100 -strict -2 -f flv 'rtmp://127.0.0.1:1935/hls/test?key=123456'

博客页面的前端配置

这里比较简单 使用video.js来播放hls视频即可
这里因为是需要添加到博客中，需要添加一个标签(vjs-fluid)，使视频大小自动匹配页面宽度。
注意替换为服务器的ip

1
2
3
4
5
6
7
8
9
10
11
12
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
<video id=example-video class="video-js vjs-default-skin vjs-fluid" controls>
  <source
     src="http://本机ip/hls/test.m3u8"
     type="application/x-mpegURL">
</video>
<script>
var player = videojs('example-video');
player.play();
</script>

参考资料：http://shumeipai.nxez.com/2017/11/01/build-rtmp-stream-live-server-with-raspberry-pi.html

[]: https://ipoi.bid/download/nginx-1.17.10.tar.gz