当前位置 博文首页 > 文章内容
最大化 缩小

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

    作者：shunshunshun18 栏目：未分类 时间：2021-12-28 18:30:35

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客，有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
    博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！

    另祝：版权碰瓷诈骗团伙，早日弃暗投明。

    相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹！百花齐放的时代,渐行渐远!


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

    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

     

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

    bkbky