Android- 音视频学习系列 -(八) 基于 -Nginx- 搭建 (rtmp、http) 直播服务器
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 和 Linuxworker_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
配置块中的`list
en`配置项是:
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
#安装 npmyum install npm#检查是否安装成功,如有输出证明安装成功 npm --version
直接下载 flv.js 到服务器上
#通过 wget 下载 wget https://github.com/bilibili/flv.js/archive/v1.5.0.tar.gz#解压 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 代码,如下所示:
<html><head><meta charset="utf-8" /><title>Player</title><link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"></head>
<body><video id="video" class="video-js vjs-default-skin" controls autoplay="autoplay" width="640" height="320" data-setup='{}'>//换成你自己的直播链接<source src="http://ip:8082/hls/live1.m3u8" type="application/x-mpegURL" /></video>
<script src="https://unpkg.com/video.js/dist/video.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.1/videojs-contrib-hls.min.js"></script></body></html>
注意:在这儿使用的 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 白嫖入口:https://github.com/Timdk857/Android-Architecture-knowledge-2-
作者:DevYK 链接:https://juejin.im/post/5e1c0a4ce51d451c8771c487
评论