场景
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 配置项是：
http { ... server { listen 8080; #不是默认的 80 端口 ... location /live { flv_live on; } }}在 rtmp 配置块中的 listen 配置项是：
rtmp { ... server { listen 1985; #不是默认的 1935 端口 ... application myapp { live on; } }}并且发布的流的名称是 mystream，那么基于 HTTP 的播放 url 是：
http://example.com:8080/live" />
为了模拟时间延迟效果，可以使用其他推流工具，截图桌面时间显示进行推流，测试延迟效果。
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
flv.js demo .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; }
function start() { if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv',url:'http://127.0.0.1:800/live" />
5、在Vue中使用flv.js播放http-flv
安装依赖
npm install --save flv.js
新建页面修改代码
import flvjs from "flv.js";export default { name: "flvPlayer", data() { return { flvPlayer: null, }; }, mounted() {this.createVideo('http://127.0.0.1:800/liveport=1935&app=myapp&stream=badao',"videoLive") }, methods: { createVideo(url, elementId) { if (flvjs.isSupported()) { let videoElement = document.getElementById(elementId); this.flvPlayer = flvjs.createPlayer({ type: "flv", enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js isLive: true, //直播模式 hasAudio: false, //关闭音频 hasVideo: true, stashInitialSize: 128, enableStashBuffer: true, //播放flv时，设置是否启用播放缓存，只在直播起作用。 url: url, }); this.flvPlayer.attachMediaElement(videoElement); this.flvPlayer.load(); this.flvPlayer.play(); } }, },};
运行查看效果
