这两天的一个小需求，需要实现桌面实时直播，前面讲了两种方式：
1、Windows 11实现录屏直播，搭建Nginx的rtmp服务 的方式需要依赖与Flash插件，使用场景有限
2、Windows 11实现直播，VLC超简单实现捕获、串流、播放 的方式需要依赖于播放器，也可以通过转换协议实现需求
现在讲第三种，通过 FFmpeg 切片推流 HLS，并嵌入 H5 的web页面实现桌面直播
需要工具去头一篇博客取，别客气，当自己家一样
开始叭
1、写个 Nginx 的配置文件
在自己的nginx/cong文件夹下，新建一个 nginx-win-hls.conf 文件，内容如下：
worker_processes 2; events { worker_connections 8192; } rtmp { server { listen 1935; application live { #rtmp直播 live on; } application hls { #hls直播 live on; hls on; hls_path D:/live/nginx-1.7.11.3-Gryphon/hls/; hls_fragment 5s;
hls_playlist_length 5s; } chunk_size 4096; #数据传输块的大小 } } 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; index web/index.html; # 直播页 location /hls/ { types{ application/vnd.apple.mpegurl m3u8; video/mp2t ts; } alias D:/live/nginx-1.7.11.3-Gryphon/hls/; expires -1; } location /stat { rtmp_stat all; rtmp_stat_stylesheet stat.xsl; } location /stat.xsl { root nginx-rtmp-module/; } location /control { rtmp_control all; } location / { root D:/live/nginx-1.7.11.3-Gryphon; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
2、启动 Nginx，这里有问题去看头一篇文章
nginx.exe -c conf\nginx-win-hls.conf
3、启动FFmpeg，切片、保存
ffmpeg -f gdigrab -i desktop -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -f hls -hls_time 5.0 -hls_list_size 1 -hls_wrap 30 D:\live\nginx-1.7.11.3-Gryphon\hls\tv.m3u8
目录下会生成一个 tv.m3u8文件 + 一堆的 tv片，用过的会自动删除
4、写个H5的Web页面
进入Nginx的html目录，新建 live-hls.html
<!DOCTYPE HTML> <html> <head> <title>Live - HLS</title> <link rel="icon" href="./favicon.ico"> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="renderer" content="webkit" /> <meta name="force-rendering" content="webkit" /> <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"> <script type="text/javascript" src="EasyPlayer-element.min.js"></script> </head> <body> <easy-player video-url="/hls/tv.m3u8" live="true" aspect="400:210" debug="true" isresolution="true" resolution="yh,fhd,hd,sd" resolutiondefault="yh"></easy-player> </body> </html>
5、见证奇迹
浏览器输入：http://127.0.0.1/html/live-hls.html
是的，此时我正在写博客
哈？
白屏！没奇迹！对吧？给你的 js 就有了
链接：https://pan.baidu.com/s/1eqEW1G6kEOxKQ42kN_cyjw 提取码：3235
好了，别客气。求个关注，常来哈