如果中途没有报任何错误,并且输出了我们指定的 bin 目录,那么就代表成功了。如下图所示:
5. 配置 nginx.conf
在当前目录下输入 vim bin/conf/nginx.conf 进行配置 rtmp、http 直播协议,我直接贴上我的配置
user root; worker_processes auto; #运行在Windows上时,设置为1,因为Windows不支持Unix domain socket #worker_processes auto; #1.3.8和1.2.5以及之后的版本
#worker_cpu_affinity 0001 0010 0100 1000; #只能用于FreeBSD和Linux worker_cpu_affinity auto; #1.9.10以及之后的版本
error_log logs/error.log error;
#如果此模块被编译为动态模块并且要使用与RTMP相关的功 #能时,必须指定下面的配置项并且它必须位于events配置 #项之前,否则NGINX启动时不会加载此模块或者加载失败
#load_module modules/ngx_http_flv_live_module.so;
events { worker_connections 4096; }
http { include mime.types; default_type application/octet-stream;
keepalive_timeout 65;
server { listen 80;//自定义填写 http 的端口
location / { root /root/nginx/nginx-http-flv-module-1.2.7/test/www; index index.html index.htm;//默认首页 }
error_page 500 502 503 504 /50x.html; location = /50x.html { root html; }
location /flvjsplay {//测试地址 root /root/nginx/flv.js-1.5.0; index index.html;//flv.js 测试播放首页 }
location /flv { flv_live on; #打开HTTP播放FLV直播流功能 chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回复 #跨域 add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头 add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头 }
location /hls { types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; }
root /root/nginx/nginx-http-flv-module-1.2.7; add_header 'Cache-Control' 'no-cache'; }
location /dash { root /root/nginx/nginx-http-flv-module-1.2.7; add_header 'Cache-Control' 'no-cache'; }
location /stat { #push和pull状态的配置 rtmp_stat all; rtmp_stat_stylesheet stat.xsl; }
location /stat.xsl { root /root/nginx/nginx-http-flv-module-1.2.7; #指定stat.xsl的位置 }
#如果需要JSON风格的stat, 不用指定stat.xsl #但是需要指定一个新的配置项rtmp_stat_format
#location /stat {
rtmp_stat all;
rtmp_stat_format json;
#}
location /control { rtmp_control all; #rtmp控制模块的配置 } } }
rtmp_auto_push on; rtmp_auto_push_reconnect 1s; rtmp_socket_dir /root/nginx/nginx-http-flv-module-1.2.7;
rtmp { out_queue 4096; out_cork 8; max_streams 128; timeout 30s; drop_idle_publisher 30s;
log_interval 5s; #log模块在access.log中记录日志的间隔时间,对调试非常有用 log_size 1m; #log模块用来记录日志的缓冲区大小
server { listen 1935;//自定义 rtmp 端口
server_name www.test.*; #用于虚拟主机名后缀通配
application devyk { live on; gop_cache on; #打开GOP缓存,减少首屏等待时间 }
application hls { live on; hls on; hls_path /root/nginx/nginx-http-flv-module-1.2.7/hls; }
application dash { live on; dash on; dash_path /root/nginx/nginx-http-flv-module-1.2.7/dash; } }
#可以有多个 server 配置 }
在根目录输入 bin/sbin/nginx -t , 如出现如下就说明配置成功。
6. 开启 nginx 服务
#开启服务 bin/sbin/nginx
#停止服务 bin/sbin/nginx -s stop
#重启服务 bin/sbin/nginx -s reload
7. 网页测试是否都显示正常
- 直接在网页上输入:
http://ip:port,如果出现如下,证明首页和基本配置没有问题了
- 直接在网页输入:
http://ip:port/stat如出现如下监控页面,说明监控页面一切正常。
现在服务器搭建完成,下面可以进入测试环节了。
rtmp 推流
我们直接用开源 obs-studio 软件进行推流,听说很多游戏主播也用该款推流软件。
推流源设置:
如上图所示,证明已经推流成功了,下面我们就来测试拉流。
拉流
flv 在 Html5 上播放
注意: 其它播放也是如下格式,这里只是以 Html 举例说明:
例子:
假设在http配置块中的listen配置项是:
http { ... server { listen 8080; #不是默认的80端口 ...
location /live { flv_live on; } } }
在rtmp配置块中的listen配置项是:
rtmp { ... server { listen 1935; #也可以不是默认的1935端口 ...
application myapp { live on; } } }
并且发布的流的名称是mystream,那么基于 HTTP-FLV 的播放url是:
http://ip:8080/flv?port=1935&app=myapp&stream=mystream
播放器这里选择 bilibili 开源的 flv.js , 既然我们已经有服务器了,那就直接把 flv.js 项目部署在服务器上吧
- 安装 npm
#安装 npm yum install npm #检查是否安装成功,如有输出证明安装成功 npm --version
- 直接下载 flv.js 到服务器上
#通过 wget 下载 wget github.com/bilibili/fl… #解压 tar -zxvf v1.5.0.tar.gz
- 安装
进入 flv.js 根目录直接输入 npm install 命令,安装完成之后会出现一个 node_modules 模块
- 安装生成工具
还是在当前根目录下安装,输入如下命令:
npm install -g gulp
- 包装和最小化 js 放入 dist 文件夹中
#输入如下命令 gulp release
这一步执行完成之后会生成如下文件:
- 修改 demo 提供的播放页面
将 demo 中 2 个文件(.ccs,.js) copy 到 dist 文件下,并修改 html 中 flv.js 路径,如下所示:
最后将 dist 文件夹重命名 flvjsplay
- 部署
nginx.conf 配置网页加载路径:
location /flvjsplay {//测试地址 root /root/nginx/flv.js-1.5.0; index index.html;#flv.js 测试播放首页 }
修改了配置文件需要在 nginx 根目录输入如下指令,对 nginx 服务器重启:
#重新启动 bin/sbin/nginx -s reload
- chrome 加载播放
左边是拉流,右边是推流
可以看到首屏加载速度还是比较快延迟在 2-5s 之间,画面延迟有点高跟我服务器和网络有关。
VLC rtmp 拉流播放
VLC 点击文件->打开网络输入 rtmp 拉流地址点击播放
//配置rtmp 拉流格式 //ip:host //rtmpPost:rtmp 服务的端口 //appname 配置在rtmp application 的名称 //streamname:推流的时候填写的密码 rtmp://ip:rtmpPort/appname/streamname
左边是拉流,右边是推流
http-hls 播放
播放格式:
http://ip:port/hls/streamname.m3u8
因为笔者不是做 H5 开发的,所以对浏览器播放 HLS 直播流兼容性不是太清楚,我就直接使用 video 标签在我电脑上用 chrome 浏览器测试, 结果是播放不出来的,查了资料好像说是原生 video 标签仅支持 MP4、WebM、Ogg 格式,那这怎么办呢?其实可以直接使用开源项目来解决的,比如 video.js 、videojs-contrib-hls 等,我这里直接使用的是 videojs-contrib-hls ,目前测试在 Android 浏览器、PC 谷歌浏览器 、IOS 微信、IOS Safari 浏览器 均已成功,下面是 Html 代码,如下所示:
Player //换成你自己的直播链接注意:在这儿使用的 js 等资源皆是在线的一些支持。若需要在项目中使用,最好下载到本地使用
为了测试方便,我也直接把该 Html 代码部署到了云服务器中,nginx.conf 配置如下:
location /hlsplay { root /root/nginx/nginx-http-flv-module-1.2.7/hls; index hlsplay.html; //指定首页,也就是我们播放的页面,hlsplay.html 就是上面代码。 }
重启 nginx 服务器之后,直接输入 http://ip:port/hlsplay 就可以播放了,测试效果如下图:
VLC rtmp 、flv.js Http-Flv 、android rtmp 三端同时拉流测试
总结
到这里您已经成功搭建直播服务器了,虽然说该篇文章没有敲任何的代码,也许你会说没有学到什么,但是搭建服务器和部署一套简易直播环境这个过程也都是值得我们作为一个移动或者前端开发者学习的。
如有帮助到你,可以点击一波关注、点赞吗?感谢支持!
更多系列教程GitHub白嫖入口:github.com/Timdk857/An…
作者:DevYK 链接:juejin.im/post/5e1c0a…
参考
学习分享
在当下这个信息共享的时代,很多资源都可以在网络上找到,只取决于你愿不愿意找或是找的方法对不对了
很多朋友不是没有资料,大多都是有几十上百个G,但是杂乱无章,不知道怎么看从哪看起,甚至是看后就忘
如果大家觉得自己在网上找的资料非常杂乱、不成体系的话,我也分享一套给大家,比较系统,我平常自己也会经常研读。
七大模块学习资料:如NDK模块开发、Android框架体系架构...
只有系统,有方向的学习,才能在段时间内迅速提高自己的技术。
这份体系学习笔记,适应人群: 第一,学习知识比较碎片化,没有合理的学习路线与进阶方向。 第二,开发几年,不知道如何进阶更进一步,比较迷茫。 第三,到了合适的年纪,后续不知道该如何发展,转型管理,还是加强技术研究。如果你有需要,我这里恰好有为什么,不来领取!说不定能改变你现在的状态呢! 由于文章内容比较多,篇幅不允许,部分未展示内容以截图方式展示 。如有需要获取完整的资料文档的朋友点击我的GitHub免费获取。