ffmpeg+nginx截取屏幕实时画面并进行rtmp推流在前端播放
准备环境和文件
1、下载ffmpeg的包[https://foxbaby.lanzoui.com/iYjPmup51cd]
地址:https://ffmpeg.org/download.html#build-windows
鼠标放到Windows上选择一个构建,点击ffmpeg-release-full.7z下载。
2、下载nginx[https://foxbaby.lanzoui.com/irkdzup6hra]
地址:http://nginx-win.ecsds.eu/download/
下载nginx 1.7.11.3 Gryphon.zip
3、下载截取屏幕的插件
地址:https://foxbaby.lanzoui.com/imI5Vup50za
操作步骤
4、安装截取屏幕的插件
5、解压ffmpeg
把bin目录设置成全局环境变量方便在cmd里使用ffmpeg推流
6、解压nginx
在根目录下,创建三个目录:m3u8File、rec、vod;
进入conf文件夹,新建记事本并改名nginx.conf,内容如下
点击查看代码
worker_processes 1; #Nginx进程数,建议设置为等于CPU总核数 events { worker_connections 1024; #工作模式与连接数上限 } rtmp_auto_push on; #RTMP服务 rtmp{ server{ listen 1935; #推流的端口 chunk_size 4096; #数据传输块的大小 application vod{ play ./vod; #视频文件存放位置 } application live{ live on; hls on; #开启hls直播。这个参数把直播服务器改造成实时回放服务器 #wait_key on; #对视频切片进行保护,这样就不会产生马赛克了 hls_path ./html/hls; #切片视频文件存放位置(HLS,m3u8文件存放位置) hls_fragment 2s; #每个视频切片的时长 hls_playlist_length 16s; recorder myRecord{ record all manual; record_suffix _.flv; record_path ./rec; } #hls_continuous on; #连续模式 #hls_cleanup on; #对多余的切片进行删除 #hls_nested on; #嵌套模式 } } } #HTTP服务 http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { root html; index index.html index.htm; } location /live_hls{ types{ #m3u8 type设置 application/vnd.apple.mpegurl m3u8; #ts分片文件设置 video/mp2t ts; } #指向访问m3u8文件目录 alias ./html/hls; add_header Cache-Control no-cache; #禁止缓存 } location /control{ rtmp_control all; } location /stat{ rtmp_stat all; rtmp_stat_stylesheet stat.xsl; } location /stat.xsl{ root ./nginx-rtmp-module-master; } # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
7、回到nginx根目录,命令行启动nginx
点击查看代码
启动:start nginx 快速停止:nginx -s stop 正常停止:nginx -s quit 配置重载:nginx -s reload
使用ffmpeg推流
新建cmd命令行,输入:
ffmpeg -f dshow -i video="screen-capture-recorder" -f dshow -i audio="virtual-audio-capturer" -vcodec libx264 -preset:v ultrafast -pix_fmt yuv420p -acodec aac -f flv rtmp://127.0.0.1/live
最后跟着的rtmp://中的端口号,就是上面nginx配置的rtmp服务端口
前端访问
新建html文件,内容如下:
点击查看代码
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5 直播</title> <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/5.19/video.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script> </head> <body> <video id="myvideo" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" poster="" data-setup="{}"> <source src="rtmp://127.0.0.1:8008/live/" type="rtmp/flv"> </video> <div> <p>ffmpeg -f dshow -i video="screen-capture-recorder" -f dshow -i audio="virtual-audio-capturer" -vcodec libx264 -preset:v ultrafast -pix_fmt yuv420p -acodec aac -f flv rtmp://127.0.0.1/live</p> </div> <div> <p>ffmpeg -list_devices true -f dshow -i dummy</p> </div> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)