Windows11实现录屏直播，H5页面直播 HLS ，不依赖Flash

这两天的一个小需求，需要实现桌面实时直播，前面讲了两种方式：

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;     
       }   
       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 20  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:300" debug="true"
   isresolution="true" resolution="yh,fhd,hd,sd" resolutiondefault="yh"></easy-player>
</body>
</html>

 

5、见证奇迹

　　浏览器输入：//127.0.0.1/html/live-hls.html

 

 　　是的，此时我正在写博客

　　哈？　

　　白屏！没奇迹！对吧？给你的 js 就有了

链接：https://pan.baidu.com/s/1eqEW1G6kEOxKQ42kN_cyjw 
提取码：3235

 

　　好了，别客气。求个关注，常来哈

Tags:

VirMach 便宜 VPS

QNews

QNews