Windows實現桌面錄屏、指定視窗錄製直播，低延時，H5頁面播放

林諾歐巴發表於2022-01-05
WindowsH5

接著前面記錄的3種方式實現桌面推流直播：

1、Windows 11實現錄屏直播，搭建Nginx的rtmp服務 的方式需要依賴與Flash外掛，使用場景有限

2、Windows 11實現直播，VLC超簡單實現捕獲、串流、播放 的方式需要依賴於播放器，也可以通過轉換協議實現需求

3、Windows11實現錄屏直播，H5頁面直播 HLS ，不依賴Flash 的方式，在遠端桌面最小化時會斷開連線、且開啟遠端桌面無法重連，上同

 

現在用OBS來實現捕獲桌面或者指定視窗，並實現推流。支援Windows、MacOS、Linux 哦

OBS官方下載地址：https://obsproject.com

 

1、安裝OBS

　　傻瓜操作，一直往下走就行了

 　　自動配置嚮導，取消

 

2、配置OBS捕獲桌面、視窗或者圖片檔案（夾），下方【來源】視窗點 ‘+’ 號

 

 

3、配置推流

　　左上角【檔案】-【設定】，裡面有一系列的設定，點選【推流】

 

 　　服務欄可以選擇推到不同的平臺，我們們這裡推到自己的Nginx，選擇【自定義】

　　【設定】裡頭的【通用】【輸出】【音訊】【視訊】【高階】可以調整直播的窗體、流暢度、清晰度、幀率啥的，自己玩

 

4、配置Nginx

　　在 Nginx 的 conf 目錄下新建 nginx-win-obs.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 C:/live/nginx-1.7.11.3-Gryphon/hls/;
             hls_fragment 1s;
             hls_playlist_length 3s;    
       }   
       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 C:/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   C:/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;
        }
    }
}

　　啟動 Nginx，前面的文章有寫哦

 

5、建立H5頁面

　　在 Nginx 的 html 目錄下新建 live-hls.html

<!DOCTYPE HTML>
<html>

<head>
  <title>Live - FA直播</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="16:9" debug="true" poster="/html/wait.png"
   isresolution="true" resolution="yh,fhd,hd,sd" resolutiondefault="yh" title="FA直播"></easy-player>
</body>
</html>

 

6、開始推流

 

 

7、快去看看你的直播吧

http://10林.諾.最.帥8/html/live-hls.html

 

 

8、其他

　　a、按如上 Nginx 配置延遲大概是8s

　　b、OBS記得去設定1s的關鍵幀、解析度、快取、位元率、自動重連等，CPU使用預設不建議設定veryfast以上，不然會裂開哦

 　   c、此方法部署在伺服器上也不能關掉遠端桌面連線，但是重新連線可以自動播放

        d、OBS比前面用的FFmpeg、VLC強大哦

　　 e、有不依賴桌面的截圖工具可以告訴我，嘗試上面第二點播放密集的圖片即可實現斷掉遠端桌面直播

 

相關文章