March 34 2025 – HangZhou, China
序:
前几天博主在和朋友聊天的时候突然想把正在玩的游戏直播给朋友看，然后用了腾讯会议后发现没vip只能使用40分钟(这么说以前网课老师开直播都是要付钱的吗)，遂临时起意决定搭建一个独属于自己的直播房。这样以后教其他人东西也可以直接进行演示(虽说直接远程更好，但这样可以装一下不是)。
注：本篇使用的系统环境为 Windows 11 24H2
目录
一、构建Nginx+RTMP服务器
二、设置OBS推流
三、使用FFmpeg实时对直播转码
四、搭建网页平台拉流实现直播房效果
五、结语
一、构建Nginx+RTMP服务器
博主在查了不少资料后决定使用Nginx+FFmpeg+OBS的方案，咱们第一步先来搭建Nginx服务器。
服务器由Nginx+RTMP构成。Nginx是HTTP服务器，RTMP则是附加模块。RTMP-流媒体协议，可以把直播推流的画面以像流水一样打包分发，如果不使用此技术，就必须在使用前下载整个媒体文件。流式传输可传送现场影音或预存于服务器上的影片，当观看者在收看这些影音文件时，影音数据在送达观看者的计算机后立即由特定播放软件播放。用户边下载边观看，而不必等待整个文件下载完毕;通过网络播放流媒体文件时，文件本身不会在本地磁盘中存储，这样就节省了大量的磁盘空间开销。从这几点来说其完全贴合对直播的所有需求。平时比如远程软件，视频会议也同样用的是RTMP协议。
首先下载 nginx 1.7.11.3 Gryphon
下载链接: http://nginx-win.ecsds.eu/download/nginx 1.7.11.3 Gryphon.zip
下载完成后解压
记得要将解压后的目录名改成 nginx-1.7.11.3-Gryphon防止后续运行出现问题。
接下来在nginx-1.7.11.3-Gryphon目录下的conf文件夹下创建名为nginx-win-rtmp.conf的文件
并将以下配置复制到其中
worker_processes 2;
events {
worker_connections 8192;
}
rtmp {
server {
listen 1935;
chunk_size 4000;
application live {
live on;
record all;
record_path /tmp/av;
record_max_size 1K;
record_unique on;
allow publish 127.0.0.1;
deny publish all;
}
}
}
http {
include mime.types;
default_type application/octet-stream;
sendfile off;
server_names_hash_bucket_size 128;
client_body_timeout 10;
client_header_timeout 10;
keepalive_timeout 30;
send_timeout 10;
keepalive_requests 10;
server {
listen 80;
server_name localhost;
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root nginx-rtmp-module/;
}
location /control {
rtmp_control all;
}
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
随后在nginx-1.7.11.3-Gryphon目录下，找到html打开并创建一个名为video的文件夹
完成后返回nginx-1.7.11.3-Gryphon根目录，在资源管理器地址栏输入cmd进入命令提示符
输入nginx.exe -c conf\nginx-win-rtmp.conf运行Nginx服务器
由于上面的配置使用的是80端口，所以这时候可能会提示占用，可以自行修改为其他端口
也可以看这里解除80端口占用
如果一切没问题的话浏览器进入127.0.0.1:80就会看到大大的Welcome to nginx啦
二、设置OBS推流
设置好服务器后就可以开始设置OBS啦
目前OBS可以通过Steam获取或者去官网获取，官网地址:https://obsproject.com/
下载完成后打开
这里博主选择的源是显示屏采集，可以看自己具体需求设置OBS的视频源
左上角点文件-设置-直播
可以看到需要配置服务器，点最上面的服务选择自定义
服务器填写rtmp://{你的Nginx服务器地址:前面配置的端口}/live
例如博主这里就是rtmp://127.0.0.1/live
接下来推流码就是类似自定义你房间地址的地方
例如你的服务地址是rtmp://127.0.0.1/live推流码是qwq
那么最后你直播房间的地址就是127.0.0.1/live/qwq
所以推流码就看自己的要求去填写就行
然后返回OBS主页面点击开始直播
如果没有出现错误提示，且底栏开始显示直播时长代表已经成功推流直播
接下来下载VLC media player软件用于接收推流出去的直播
官方Windows下载地址:https://www.videolan.org/vlc/index.zh_CN.html
下载安装后打开
点击左上角的媒体-打开网络串流
在输入网络URL一栏里输入rtmp://{你的Nginx服务器地址:前面配置的端口}/live/{推流码}
比如博主这里就是127.0.0.1/live/qwq
等待一会，如果可以加载出直播画面说明前面的配置都没问题
现在你一定迫不及待的打开浏览器开始访问访问http(s)://{你的Nginx服务器地址:前面配置的端口}/live/{推流码}
诶，但是你会发现啥也没有或者压根进不去
为什么嘞，因为rtmp推流出去的视频封装格式是.flv，不支持web直接播放，所以接下来就要解决这个问题
三、使用FFmpeg实时对直播转码
按照正常做法来说，不应该存在这一步
这一步应该是用Video.js搭建网页来直接web拉流直播，然后就结束了
但是有一个问题，这样子web出来的依然是获取到的.flv文件
而flv文件一定需要安装Flash Player才可以看
这使得看直播需要每个人要安装Flash Player
这显然会导致劝退一部分观众
所以我采用的方案就是用FFmpeg将直播的.Flv实时转码为.m3u8
两者同样都是流媒体文件，且.m3u8在使用Video.js可以直接观看不需要安装Flash Player
首先第一步先下载FFmpeg
官网地址:https://ffmpeg.org/
Windows版下载地址:https://www.gyan.dev/ffmpeg/builds/ffmpeg-release-full.7z
下载完成后解压，最好和之前的nginx-1.7.11.3-Gryphon放同一文件夹
接下来添加环境变量
先打开解压好的FFmpeg文件夹找到bin目录复制地址
比如博主这里是放在D盘的TQ文件夹下
那么FFmpeg的bin目录就是D:\TQ\ffmpeg-7.1.1-full_build\bin
复制这串地址，回到桌面找到此电脑右键选择属性
在打开的设置中点击高级系统设置-环境和变量
在下面的系统变量里找到Path双击点开
点右边的新建，把刚刚复制的目录地址粘上去
然后保存关闭窗口
打开cmd输入ffmpeg正常输出就代表配置完成
接下里我们把前面所做的一切启动起来
启动Nginx服务-打开OBS推流
然后再开一个cmd在里面输入
ffmpeg -y -i rtmp://{你的Nginx服务器地址:配置的端口}/live/{推流码} -vcodec copy -t 5000 -f hls {之前说创建在nginx-1.7.11.3-Gryphon/html/video的文件夹地址+推流码.m3u8}
例如博主就是ffmpeg -y -i rtmp://127.0.0.1/live/Qiany -vcodec copy -t 5000 -f hls D:\TQ\nginx-1.7.11.3-Gryphon\html\video\Qiany.m3u8
这条命令就是将推流出去的.flv实时转码为.m3u8并保存在服务器目录下
FFmpeg参数:
-t 转码持续时间{可以填大点}
-i 设定输入流
-f 设定输出格式
-r 设定帧速率
-s 设定画面的宽与高
-an 去掉音频
如果出现下图的输出且打开Nginx/html/video文件夹可以看到生成的.m3u8主文件和一队临时小文件即代表实时转码成功
四、搭建网页平台拉流实现直播房效果
终于到最后一步啦，搭建一个简单的网页进行拉流完成直播房吧
找到Nginx/html在目录下新建一个.html，这里博主建了一个live.html
并将以下配置复制到其中
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>***的直播房</title>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
#导入video.css
<style>
body {
background-color: #65ddec;
}
:root {
--safe-area-inset-top: env(safe-area-inset-top, 0px);
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
}
/* 初始化 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
}
/* 安全区域容器 */
.video-container {
position: fixed;
top: var(--safe-area-inset-top);
left: 0;
width: 100vw;
height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
overflow: hidden;
}
/* 智能视频适配 */
video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* 竖屏优化 */
@media (orientation: portrait) {
video {
/* 优先保持宽度适配 */
width: 100%;
height: auto;
min-height: 100%;
}
}
/* 横屏优化 */
@media (orientation: landscape) {
video {
/* 优先保持高度适配 */
width: auto;
height: 100%;
min-width: 100%;
}
}
/* 全面屏适配 */
@supports (padding: max(0px)) {
.video-container {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
}
</style>
</head>
<body>
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto"
data-setup='{"techOrder": ["html5"], "sources": [{"src": "替换为转换出来的.m3u8的地址", "type":"application/x-mpegURL"}]}'>
<p class="vjs-no-js">
为了观看此视频，请启用 JavaScript，并考虑使用支持 HTML5 的浏览器。
</p>
</video>
#导入video.js
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
</body>
</html>
保存然后打开浏览器访问
http(s)://{你的Nginx服务器地址:前面配置的端口}/live.html
不出意外的就可以看到自己的OBS推流画面啦！
如果提示没有视频源/无法播放请检查实时转码是否生效
五、结语
总之，搭建直播房的教程到这里就告一段落
有问题可以评论或者联系我的邮箱
本文篇新手向，谨代表博主自己的实践经历，若有更优解可以在评论提出
qwq，谢谢你看到这里，我们下一篇再见
