2024年Java最全音视频学习 (十) 基于 Nginx 搭建(rtmp、http)直播服务器，【一篇文章搞懂】

总结

面试前的“练手”还是很重要的，所以开始面试之前一定要准备好啊，不然也是耽搁面试官和自己的时间。

我自己是刷了不少面试题的，所以在面试过程中才能够做到心中有数，基本上会清楚面试过程中会问到哪些知识点，高频题又有哪些，所以刷题是面试前期准备过程中非常重要的一点。

面试题及解析总结

大厂面试场景

知识点总结

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

#能时，必须指定下面的配置项并且它必须位于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 配置
}

Nginx 配置文件详解请看该篇文章

nginx-rtmp-module配置指令详解

在根目录输入 bin/sbin/nginx -t , 如出现如下就说明配置成功。

6. 开启 nginx 服务

#开启服务
bin/sbin/nginx
#停止服务
bin/sbin/nginx -s stop
#重启服务
bin/sbin/nginx -s reload

7. 网页测试是否都显示正常

1. 直接在网页上输入: http://ip:port，如果出现如下，证明首页和基本配置没有问题了

2. 直接在网页输入: 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 项目部署在服务器上吧

1. 安装 npm

#安装 npm
yum install npm
#检查是否安装成功，如有输出证明安装成功
npm --version

2. 直接下载 flv.js 到服务器上

#通过 wget 下载
wget https://github.com/bilibili/flv.js/archive/v1.5.0.tar.gz
#解压
tar -zxvf v1.5.0.tar.gz

3. 安装

进入 flv.js 根目录直接输入 npm install 命令，安装完成之后会出现一个 node_modules 模块

4. 安装生成工具

还是在当前根目录下安装，输入如下命令:

npm install -g gulp

5. 包装和最小化 js 放入 dist 文件夹中

#输入如下命令
gulp release

这一步执行完成之后会生成如下文件:

6. 修改 demo 提供的播放页面

将 demo 中 2 个文件(.ccs,.js) copy 到 dist 文件下,并修改 html 中 flv.js 路径，如下所示:

最后将 dist 文件夹重命名 flvjsplay

7. 部署

nginx.conf 配置网页加载路径:

location /flvjsplay {//测试地址
root /root/nginx/flv.js-1.5.0;
index index.html;#flv.js 测试播放首页
}

修改了配置文件需要在 nginx 根目录输入如下指令，对 nginx 服务器重启:

#重新启动
bin/sbin/nginx -s reload

8. 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 代码，如下所示:

//换成你自己的直播链接

最后

这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档

祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！

感谢大家的支持！！

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

“https://unpkg.com/video.js/dist/video.js”>

最后

这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档

祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！

感谢大家的支持！！

[外链图片转存中…(img-LESDFjD4-1714901772867)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取