Windows11實現錄屏直播，H5頁面直播 HLS ，不依賴Flash

林諾歐巴發表於2021-12-28
WindowsH5

這兩天的一個小需求，需要實現桌面實時直播，前面講了兩種方式：

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

 

　　好了，別客氣。求個關注，常來哈

相關文章