编译环境准备：
-
nginx源码 (用于编译)
github nginx源码下载 -
构建工具
git (推荐)
mingw （不推荐）
注：这里可以不必下载mingw，安装mingw是要用mingw的命令窗口来构建Makefile文件以及相关的类库，如果本机安装了git，git本身自带了mingw命令窗口 如果没有git就自行下载mingw并且安装mingw32-base-bin、sys-base-bin
-
其他工具 （需要配置环境变量Path）
-
所需编译三方类库
- nginx-rtmp-module (需要flash插件) 或者 nginx-http-flv-module （不需要插件）
- openssl-1.0.1u
- zlib-1.2.11
- pcre-8.34
-
VS2017 (本人是下载的2017其他版本也可以，主要使用nmake来编译)
下载地址
下载完成后只安装c++的桌面开发
懒人福利
nginx编译的所有的依赖包和工具,包括nginx源码、zlib、openssl、pcre、perl、nasm、sed、nginx-http-flv-module、vs2017下载工具、VLC、ffmpeg(推流工具，到时候测试用) 、已经编译好的nginx 所有功能根据集合gitee下载地址
开始编译
准备
1、新建nginx-compile-env文件夹，将下载的nginx源码放入此文件夹，目录内新建一个build文件夹。
2、再在build文件夹内新建lib、output文件夹。再将下载好的三方类库解压放入lib文件夹。
3、新建build.bat脚本文件放入nginx-compile-env目录下
auto/configure --with-cc=cl --builddir=build/output --prefix= \
--conf-path=conf/nginx.conf --pid-path=logs/nginx.pid \
--http-log-path=logs/access.log --error-log-path=logs/error.log \
--sbin-path=nginx-flv.exe --http-client-body-temp-path=temp/client_body_temp \
--http-proxy-temp-path=temp/proxy_temp \
--http-fastcgi-temp-path=temp/fastcgi_temp \
--http-scgi-temp-path=temp/scgi_temp \
--http-uwsgi-temp-path=temp/uwsgi_temp \
--with-cc-opt=-DFD_SETSIZE=1024 --with-pcre=build/lib/pcre-8.34 \
--with-zlib=build/lib/zlib-1.2.11 --with-openssl=build/lib/openssl-1.0.1u \
--with-select_module --with-http_ssl_module \
--add-module=build/lib/nginx-http-flv-module-master
总体目录结构如下（所有路径都不能有中文或者空格）：
nginx-compile-env
├─auto
├─build
│ ├─lib
│ │ ├─nginx-http-flv-module-master
│ │ ├─openssl-1.0.1u
│ │ ├─pcre-8.34
│ │ └─zlib-1.2.11
│ └─output
├─conf
├─contrib
├─docs
├─misc
├─src
└─build.bat
开始编译
- 打开
mingw命令窗口这里我是用的git bash,进入nginx-compile-env目录执行build.bat：(这里build时间可能会等几分钟)
成功如下图：bash build.bat
build/output目录下会生成Makefile和一些依赖文件
- openssl编译坑！！！ 编译前还要将nginx源码路径
/auto/lib/openssl/makefile.msvc文件中的ms\do_ms改为ms\do_nasm不然编译时将会报错。
具体原因参看这篇文章: http://blog.csdn.net/felixking/article/details/51981794?utm_source=itdadao&utm_medium=referral
- 以管理员身份打开
VS2017本机工具命令提示符x86进入nginx-compile-env目录进行nmake。这里一定要是X86的本机命令提示符工具千万不要用成X64
进入nginx-compile-env在命令提示符窗口输入nmake /f build/output/Makefile进行编译，编译过程时间很长等待便是。
编译成功如下：
编译成功后会在build/output目录生成nginx.exe
整理
1、新建nginx-http-flv-server文件夹，将编译成功的nginx.exe放入此文件夹。
2、将nginx源码目录下的conf文件夹和docs/html复制到nginx-flv-server
3、在nginx-http-flv-server/html文件夹下新建hls、dash文件夹
4、将nginx-http-flv-module-master下的stat.xsl放入html文件夹
5、再在nginx-http-flv-server文件夹下新建logs文件和temp文件夹
6、更改conf/nginx.conf为如下配置
worker_processes 10;
events {
worker_connections 10240;
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir tmp;
rtmp{
out_queue 4096;
out_cork 8;
max_streams 128;
timeout 15s;
drop_idle_publisher 15s;
log_interval 5s;
log_size 1m;
server{
listen 1935;
application live{
live on;
gop_cache on;
}
application hls{
live on;
hls on;
hls_path html/hls;
}
application dash{
live on;
dash on;
dash_path html/dash;
}
}
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8888;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
location /live{
flv_live on;
chunked_transfer_encoding on;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
}
location /hls{
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root html/hls;
add_header 'Cache-Control' 'no-cache';
}
location /dash {
root html/dash;
add_header 'Cache-Control' 'no-cache';
}
location /stat {
#configuration of push & pull status
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root html;
}
location /control {
rtmp_control all; #configuration of control module of rtmp
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
目录结构如下:
nginx-http-flv-server
├─temp
├─conf
│ ├─…
│ ├─nginx.conf
│ ├─mime.types
│ └─…
├─logs
├─html
│ ├─dash
│ ├─hls
│ ├─50x.html
│ ├─index.html
│ └─stat.xsl
├─nginx.exe
└─stop.bat
- 点击nginx.exe启动服务，访问http://localhost:8888
成功
访问http://localhost:8888/stat查看推流状态
ffmpeg推流测试：ffmpeg -rtsp_transport tcp -i "rtsp://admin:hjex2020@192.168.1.91:554/h264/ch33/main/av_stream" -f flv -r 25 -s 1920*1080 -an "rtmp://localhost/live/123"
（ffmpeg是一个推流工具，具体请自行搜索，这里我用的海康摄像头进行推流测试，你们可以自己用本地视频进行推流，具体推流命令 参见）
查看推流状态，此时已经有一个推流任务正在执行。
- 使用
VLC media player播放下载地址
rtmp播放地址：rtmp://localhost/live/123(需要flash插件大部分浏览器不支持)
http播放地址：http://localhost:8888/live?app=live&stream=123(无需插件，使用flv.js播放)
注意：如果想要关闭nginx可能会关闭不了会无限重启，直接使用taskkill /f /im nginx.exe杀死进程
使用java推流
具体细节请参照https://blog.csdn.net/weixin_40777510/article/details/103764198
原作者纯净版代码 下载地址
本人更改了上面链接文章中的一些代码，感兴趣的自行取 gitee地址
前端显示（vue）
前端播放使用flv.js，这里贴出vue的代码：
依赖下载：
npm install --save flv.js
代码如下：
<template>
<div>
<video autoplay controls width="100%" height="500" id="videoElement"></video>
</div>
</template>
<script>
import flvjs from 'flv.js'
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted() {
this.$nextTick(() => {
this.createVideo()
})
},
methods: {
createVideo() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'url' //你的url地址
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
}
}
}
</script>
完整vue demo代码，其中包含推流、拉流、保活、关闭流的功能与上诉java代码整合。
要的自行下载 gitee下载地址
结语
以上便是win10下nginx源码编译nginx-http-flv并整合springBoot(java推流)+vue(flv.js)实现网页播放的所有方法和步骤，如有疑问请在下方留言。
总结不易，如果这篇文章对你有用，请各位点一个赞以示对我的支持！！深知csdn下载不易，都需要积分，所以所有的资源包和编译好的nginx都放在gitee，直接下载即可。
扫一扫
2811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
