【浅学】Windows下ffmpeg+nginx+flv将本地视频推流在本地搭建的Web前端页面中播放,超详细步骤

Nginx安装和配置

下载nginx-1.19.3-http-flv 模块预编译包并解压放在d盘,路径就跟安装步骤里说的一样(如下图),不然会有其他问题出现。

打开conf/nginx.conf,查看RTMP和http相关的配置,确认端口号和路由名称


ffpemg推流视频

ffmpeg安装

安装步骤参考FFmpeg 超级详细安装与配置教程(Windows 系统)安装包的位置不要有中文路径,建议把原来的巨长的文件夹名重命名简短一点,官网下载需要魔法不然很慢但下下来的时长可以接受,我上传的安装包被自动设成VIP资源了需要的话可以留邮箱。。

视频推流

安装配置好后在终端(CMD)中输入以下命令(同时按住win+R键左下角弹出输入框,然后输入cmd按回车就能打开终端)

bash 复制代码
ffmpeg -stream_loop -1 -i 你的视频文件的路径.mp4 -c:v libx264 -preset ultrafast -c:a aac -f flv rtmp://localhost/myapp/stream

这条命令的作用是把本地的 .mp4 文件进行无限循环播放,并将视频流以 H.264 编码、音频流以 AAC 编码,封装成 FLV 格式后推送到 rtmp://localhost/myapp/stream 这个 RTMP 地址。

ffmpeg命令解释

命令的基本格式如下

bash 复制代码
ffmpeg [全局选项] [输入文件选项] -i 输入文件 [输出文件选项] 输出文件或推流地址
  1. -stream_loop -1
    此为全局选项,用于指定输入文件的循环次数。-1 表示无限循环,也就是输入的视频文件会不断循环播放,直至手动停止推流。这个选项也可以不要
  2. -i 你的视频文件.mp4
    这是输入文件选项,-i 是指定输入文件的标志,你的视频文件.mp4 是要作为输入的本地视频文件名称,注意如果终端没有切到这个文件的所在的目录下要加上文件所在的完整路径(文件夹或者文件名一定不能有空格)
  3. -c:v libx264
    属于输出文件选项,-c:v 用于指定视频编码器,libx264 是常用的 H.264 视频编码器,它能将视频流编码成 H.264 格式。
  4. -preset ultrafast
    同样是输出文件选项,-preset 用于设置编码速度和压缩比的平衡。ultrafast 是最快的预设,意味着编码速度快,但可能会牺牲一定的视频质量和压缩率。
  5. -c:a aac
    这是输出文件选项,-c:a 用于指定音频编码器,aac 是常用的音频编码格式,可将音频流编码成 AAC 格式。
  6. -f flv
    属于输出文件选项,-f 用于指定输出文件的格式,flv 是 Flash Video 格式,常用于 RTMP 推流。
  7. rtmp://localhost/myapp/stream
    这是推流地址,代表 RTMP 服务器的地址和流名称。localhost 是本地服务器地址,myapp 是应用名称,stream 是流名称。

终端没有报Error,持续显示以下信息即表示正常推流了

查看推流视频

通过VLC软件播放RTMP流

使用VLC播放器(没有这个软件可以点击去官网下载安装),点击媒体->打开网络串流输入你的推流地址然后点击播放,如果能正常播放你的视频则说明RTMP正常推流了

通过VLC软件播放FLV流

同上一步操作 "打开网络串流",输入 FLV 流的地址http://localhost:8080/live?port=1935&app=myapp&stream=stream&schema=rtmp,然后点击 "播放" 按钮,注意这里的两个端口号分别对应第一步中Nginx中的配置,8080是http服务的端口号,1935是RTMP的的端口号,后面的app、stream、schema这三个参数与推流地址rtmp://localhost/myapp/stream对应匹配,如果前一步中RTMP能正常播放那么这一步也是能正常播放的

通过web的video标签播放

新建一个.txt文件,然后输入以下代码并保存。重名将.txt后缀改成.html,如果前一步中FLV流正常播放那么,双击这个html文件在浏览器打开就能看到视频播放

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>FLV Stream Player</title>
</head>

<body>
    <video width="640" height="480" controls>
        <source src="http://localhost:8080/live?stream=myapp/stream.flv" type="video/flv">
        Your browser does not support the video tag.
    </video>
</body>

</html>

当然还可以通过js脚本把以上推流步骤封装一键运行web项目,本篇纯小白向所以不展开赘述,有需要后续会单开一篇在web项目里脚本实现的基础demo

相关推荐
charlie1145141911 小时前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
你我约定有三2 小时前
java--泛型
java·开发语言·windows
self_myth3 小时前
[特殊字符] 深入理解操作系统核心特性:从并发到分布式,从单核到多核的全面解析
windows·macos·wpf·harmonyos
十五年专注C++开发4 小时前
cargs: 一个轻量级跨平台命令行参数解析库
linux·c++·windows·跨平台·命令行参数解析
小韩博5 小时前
Windows权限提升(二)
windows·网络安全·github
CookieCrusher8 小时前
数据泄露危机逼近:五款电脑加密软件为企业筑起安全防线
运维·数据库·windows·安全·文件加密·数据防泄漏·dlp
lvcoc14 小时前
unity 接入火山引擎API,包括即梦AI
windows·unity·ai·火山引擎
LJC_Superman15 小时前
Web与Nginx网站服务
运维·服务器·前端·网络·数据库·nginx·vim
正义的大古15 小时前
OpenLayers常用控件 -- 章节六:全屏控件教程
前端·javascript·html·openlayers
ʚʕ̯•͡˔•̯᷅ʔɞ LeeKuma16 小时前
nginx常用命令(备忘)
服务器·nginx