Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流

场景

Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流：

Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流_win nginx-rtmp最新版_霸道流氓气质的博客-CSDN博客

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流：

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流_videojs-flash vue_霸道流氓气质的博客-CSDN博客

前面使用Vue播放RTMP流时，需要借助于flash。这种方式对于flash插件的安装

与后续浏览器支持等都不是很好。可以采用将rtmp的视频流转换成HTTP-FLV的方式，

然后前端通过bilibili的flv.js实现播放。

nginx-http-flv-module

nginx-http-flv-module: 基于nginx-rtmp-module的流媒体服务器。具备nginx-rtmp-module的所有功能，增加了HTTP-FLV，GOP缓存和VHOST（一个IP对应多个域名）的功能。Media streaming server based on nginx-rtmp-module. In addtion to the features nginx-rtmp-module provides, HTTP-FLV, GOP cache and VHOST (one IP for multi domain names) are supported now.

中文说明

nginx-http-flv-module/README.CN.md at master · winshining/nginx-http-flv-module · GitHub

一款基于 nginx-rtmp-module 的流媒体服务器。

nginx-http-flv-module 具备nginx-rtmp-module 的所有功能，并且对比如下：

支持的播放器

VLC (RTMP & HTTP-FLV) / OBS (RTMP & HTTP-FLV) / JW Player (RTMP) / flv.js (HTTP-FLV).

注意事项

1、Adobe 将在 2020 年 12 月 31 日之后停止对 flash 播放器 的官方支持，

主流浏览器随后将移除 flash 播放器，使用 flash 播放器的插件将不再可用。

2、flv.js 只能运行在支持 Media Source Extensions 的浏览器上。

3、nginx-http-flv-module 包含了 nginx-rtmp-module 所有的功能，

所以不要将 nginx-http-flv-module 和 nginx-rtmp-module 一起编译。

4、如果使用 flv.js 播放流，那么请保证发布的流被正确编码，

因为 flv.js 只支持 H.264 编码的视频和 AAC/MP3 编码的音频。

5、其中的 add_header ‘Access-Control-Allow-Origin’ ‘*’ 与 add_header ‘Access-Control-Allow-Credentials’ ‘true’ 很重要，

主要解决了前端通过HTTP方式拉流是的跨域问题。

其他注意事项和详细细节可见官方github。

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主

实现

1、官方示例以及推荐等都是在Linux服务器上。

但是如果需要在本地Windows电脑上进行调试或者服务器就必须是Windows服务器的话，

需要编译Windows版本，或者直接网络上搜索下载已经编译好的Windows版本。

比如:

https://download.csdn.net/download/codebooks/12793877

但是是否可用需要自己下载验证。

以下载上面的为例，下载解压后，自带run.bat运行脚本

脚本内容为:

nginx.exe -c conf/http-flv.conf

这里是指定走配置文件conf/http-flv.conf

所以如果要修改的话也是修改http-flv.conf文件，而不是原来默认的nginx.conf文件了。

双击启动脚本启动后，可以从任务管理器中验证是否启动成功，或者通过其他查看日志等方式验证。

2、配置文件

关注两个地方，比如这里的官方例子

假设在 http 配置块中的 listen 配置项是：

1. http {
2.     ...
3.     server {
4.         listen 8080; #不是默认的 80 端口
5.         ...
7.         location /live {
8.             flv_live on;
9.         }
10.     }
11. }

在 rtmp 配置块中的 listen 配置项是：

1. rtmp {
2.     ...
3.     server {
4.         listen 1985; #不是默认的 1935 端口
5.         ...
7.         application myapp {
8.             live on;
9.         }
10.     }
11. }

并且发布的流的名称是 mystream，那么基于 HTTP 的播放 url 是：

http://example.com:8080/live?port=1985&app=myapp&stream=mystream

下面附官方提示的配置文件示例

1. ​
2. worker_processes  1; #运行在 Windows 上时，设置为 1，因为 Windows 不支持 Unix domain socket
3. #worker_processes  auto; #1.3.8 和 1.2.5 以及之后的版本
5. #worker_cpu_affinity  0001 0010 0100 1000; #只能用于 FreeBSD 和 Linux
6. #worker_cpu_affinity  auto; #1.9.10 以及之后的版本
8. error_log logs/error.log error;
10. #如果此模块被编译为动态模块并且要使用与 RTMP 相关的功
11. #能时，必须指定下面的配置项并且它必须位于 events 配置
12. #项之前，否则 NGINX 启动时不会加载此模块或者加载失败
14. #load_module modules/ngx_http_flv_live_module.so;
16. events {
17.     worker_connections  4096;
18. }
20. http {
21.     include       mime.types;
22.     default_type  application/octet-stream;
24.     keepalive_timeout  65;
26.     server {
27.         listen       80;
29.         location / {
30.             root   /var/www;
31.             index  index.html index.htm;
32.         }
34.         error_page   500 502 503 504  /50x.html;
35.         location = /50x.html {
36.             root   html;
37.         }
39.         location /live {
40.             flv_live on; #打开 HTTP 播放 FLV 直播流功能
41.             chunked_transfer_encoding on; #支持 'Transfer-Encoding: chunked' 方式回复
43.             add_header 'Access-Control-Allow-Origin' '*'; #添加额外的 HTTP 头
44.             add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的 HTTP 头
45.         }
47.         location /hls {
48.             types {
49.                 application/vnd.apple.mpegurl m3u8;
50.                 video/mp2t ts;
51.             }
53.             root /tmp;
54.             add_header 'Cache-Control' 'no-cache';
55.         }
57.         location /dash {
58.             root /tmp;
59.             add_header 'Cache-Control' 'no-cache';
60.         }
62.         location /stat {
63.             #推流播放和录制统计数据的配置
65.             rtmp_stat all;
66.             rtmp_stat_stylesheet stat.xsl;
67.         }
69.         location /stat.xsl {
70.             root /var/www/rtmp; #指定 stat.xsl 的位置
71.         }
73.         #如果需要 JSON 风格的 stat, 不用指定 stat.xsl
74.         #但是需要指定一个新的配置项 rtmp_stat_format
76.         #location /stat {
77.         #    rtmp_stat all;
78.         #    rtmp_stat_format json;
79.         #}
81.         location /control {
82.             rtmp_control all; #rtmp 控制模块的配置
83.         }
84.     }
85. }
87. rtmp_auto_push on;
88. rtmp_auto_push_reconnect 1s;
89. rtmp_socket_dir /tmp;
91. rtmp {
92.     out_queue           4096;
93.     out_cork            8;
94.     max_streams         128;
95.     timeout             15s;
96.     drop_idle_publisher 15s;
98.     log_interval 5s; #log 模块在 access.log 中记录日志的间隔时间，对调试非常有用
99.     log_size     1m; #log 模块用来记录日志的缓冲区大小
101.     server {
102.         listen 1935;
103.         server_name www.test.*; #用于虚拟主机名后缀通配
105.         application myapp {
106.             live on;
107.             gop_cache on; #打开 GOP 缓存，减少首屏等待时间
108.         }
110.         application hls {
111.             live on;
112.             hls on;
113.             hls_path /tmp/hls;
114.         }
116.         application dash {
117.             live on;
118.             dash on;
119.             dash_path /tmp/dash;
120.         }
121.     }
123.     server {
124.         listen 1935;
125.         server_name *.test.com; #用于虚拟主机名前缀通配
127.         application myapp {
128.             live on;
129.             gop_cache on; #打开 GOP 缓存，减少首屏等待时间
130.         }
131.     }
133.     server {
134.         listen 1935;
135.         server_name www.test.com; #用于虚拟主机名完全匹配
137.         application myapp {
138.             live on;
139.             gop_cache on; #打开 GOP 缓存，减少首屏等待时间
140.         }
141.     }
142. }
144. ​

然后上面下载的Windows编译版本的配置文件http-flv.conf的内容为

1. ​
2. worker_processes  1;
4. error_log logs/error.log error;
6. events {
7.     worker_connections  4096;
8. }
10. http {
11.     include       mime.types;
12.     default_type  application/octet-stream;
14.     keepalive_timeout  65;
16.     server {
17.         listen       800;
19.         location / {
20.             root   www;
21.             index  index.html index.htm;
22.         }
24.         error_page   500 502 503 504  /50x.html;
25.         location = /50x.html {
26.             root   html;
27.         }
29.         location /live {
30.             flv_live on; #打开HTTP播放FLV直播流功能
31.             chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回复
33.             add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
34.             add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
35.         }
37.         location /hls {
38.             types {
39.                 application/vnd.apple.mpegurl m3u8;
40.                 video/mp2t ts;
41.             }
43.             root temp;
44.             add_header 'Cache-Control' 'no-cache';
45.         }
47.         location /dash {
48.             root temp;
49.             add_header 'Cache-Control' 'no-cache';
50.         }
52.         location /stat {
53.             #推流播放和录制统计数据的配置
55.             rtmp_stat all;
56.             rtmp_stat_stylesheet stat.xsl;
57.         }
59.         location /stat.xsl {
60.             root www/rtmp; #指定stat.xsl的位置
61.         }
63.         #如果需要JSON风格的stat, 不用指定stat.xsl
64.         #但是需要指定一个新的配置项rtmp_stat_format
66.         #location /stat {
67.         #    rtmp_stat all;
68.         #    rtmp_stat_format json;
69.         #}
71.         location /control {
72.             rtmp_control all; #rtmp控制模块的配置
73.         }
74.     }
75. }
77. rtmp_auto_push on;
78. rtmp_auto_push_reconnect 1s;
79. rtmp_socket_dir temp;
81. rtmp {
82.     out_queue           4096;
83.     out_cork            8;
84.     max_streams         128;
85.     timeout             15s;
86.     drop_idle_publisher 15s;
88.     log_interval 5s; #log模块在access.log中记录日志的间隔时间，对调试非常有用
89.     log_size     1m; #log模块用来记录日志的缓冲区大小
91.     server {
92.         listen 1935;
93.         #server_name www.test.*; #用于虚拟主机名后缀通配
94.   server_name 127.0.0.1;
95.         application myapp {
96.             live on;
97.             gop_cache on; #打开GOP缓存，减少首屏等待时间
98.         }
100.         application hls {
101.             live on;
102.             hls on;
103.             hls_path temp/hls;
104.         }
106.         application dash {
107.             live on;
108.             dash on;
109.             dash_path temp/dash;
110.         }
111.     }
112. }
114. ​

3、Windows上本地模拟推送RTMP视频流到nginx-http-flv-module

参考上面使用FFMpeg推送的流程，修改模拟推流bat脚本为

1. ffmpeg.exe -re -i D:\WorkSpace\Other\FFmpegDemo\test\1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/myapp/badao
2. pause

推流成功之后，使用VLC进行拉流测试，网络串流地址为

http://127.0.0.1:800/live?port=1935&app=myapp&stream=badao

注意这里的

800对应http配置的端口

live对应http配置的location后面的/live

port=1935对应rtmp中配置的端口

app=myapp对应的myapp是rtmp中配置的application myapp

stream=badao的badao是对应推流时的rtmp://127.0.0.1:1935/myapp/badao的badao

拉流推流效果。

为了模拟时间延迟效果，可以使用其他推流工具，截图桌面时间显示进行推流，测试延迟效果。

Docker和docker-compose中部署nginx-rtmp实现流媒体服务与oob和ffmpeg推流测试：

Docker和docker-compose中部署nginx-rtmp实现流媒体服务与oob和ffmpeg推流测试_docker 推流_霸道流氓气质的博客-CSDN博客

这里可以参考使用oob进行模拟推流测试效果

4、bilibili的flv.js

GitHub - bilibili/flv.js: HTML5 FLV Player

可以看到其特点是

HTTP FLV低延迟实时流播放

在html中使用flv.js播放http-flv

将flv.min.js下载到本地

https://github.com/bilibili/flv.js/releases/download/v1.5.0/flv.min.js

然后新建html

1. html>
2. <html>
4. <head>
5.     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
6.     <title>flv.js demotitle>
7.     <style>
8.         .mainContainer {
9.             display: block;
10.             width: 1024px;
11.             margin-left: auto;
12.             margin-right: auto;
13.         }
15.         .urlInput {
16.             display: block;
17.             width: 100%;
18.             margin-left: auto;
19.             margin-right: auto;
20.             margin-top: 8px;
21.             margin-bottom: 8px;
22.         }
24.         .centeredVideo {
25.             display: block;
26.             width: 100%;
27.             height: 576px;
28.             margin-left: auto;
29.             margin-right: auto;
30.             margin-bottom: auto;
31.         }
33.         .controls {
34.             display: block;
35.             width: 100%;
36.             text-align: center;
37.             margin-left: auto;
38.             margin-right: auto;
39.         }
40.     style>
41. head>
43. <body>
45. <p class="mainContainer">
46.     <video name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024"
47.            height="576">
48.         Your browser is too old which doesn't support HTML5 video.
49.     video>
50. p>
52. <script src="js/flv.min.js">script>
54. <script>
56.     function start() {
57.         if (flvjs.isSupported()) {
58.             var videoElement = document.getElementById('videoElement');
59.             var flvPlayer = flvjs.createPlayer({
60.                 type: 'flv',
61.                url:'http://127.0.0.1:800/live?port=1935&app=myapp&stream=badao'
62.             });
63.             flvPlayer.attachMediaElement(videoElement);
64.             flvPlayer.load();
65.             flvPlayer.play();
66.         }
67.     }
69.     document.addEventListener('DOMContentLoaded', function () {
70.         start();
71.     });
72. script>
74. body>
76. html>

将url设置为上面的拉流地址，注意flv.min.js的路径

浏览器中访问该html看下效果

5、在Vue中使用flv.js播放http-flv

安装依赖

npm install --save flv.js

新建页面修改代码

1. <template lang="html">
2.   <div id="app">
3.     <video
4.       id="videoLive"
5.       crossorigin="anonymous"
6.       controls
7.       autoplay
8.       width="100%"
9.       height="100%"
10.       style="object-fit: fill"
11.     ></video>
12.   </div>
13. </template>
15. <script>
16. import flvjs from "flv.js";
17. export default {
18.   name: "flvPlayer",
19.   data() {
20.     return {
21.       flvPlayer: null,
22.     };
23.   },
24.   mounted() {
25.    this.createVideo('http://127.0.0.1:800/liveport=1935&app=myapp&stream=badao',"videoLive")
26.   },
27.   methods: {
28.     createVideo(url, elementId) {
29.       if (flvjs.isSupported()) {
30.         let videoElement = document.getElementById(elementId);
31.         this.flvPlayer = flvjs.createPlayer({
32.           type: "flv",
33.           enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
34.           isLive: true, //直播模式
35.           hasAudio: false, //关闭音频
36.           hasVideo: true,
37.           stashInitialSize: 128,
38.           enableStashBuffer: true, //播放flv时，设置是否启用播放缓存，只在直播起作用。
39.           url: url,
40.         });
41.         this.flvPlayer.attachMediaElement(videoElement);
42.         this.flvPlayer.load();
43.         this.flvPlayer.play();
44.       }
45.     },
46.   },
47. };
48. </script>
50. <style lang="css">
51. </style>

运行查看效果