ffmpeg+nginx截取屏幕实时画面并进行rtmp推流在前端播放

准备环境和文件

1、下载ffmpeg的包[https://foxbaby.lanzoui.com/iYjPmup51cd]

地址：https://ffmpeg.org/download.html#build-windows

鼠标放到Windows上选择一个构建，点击ffmpeg-release-full.7z下载。

2、下载nginx[https://foxbaby.lanzoui.com/irkdzup6hra]

地址：http://nginx-win.ecsds.eu/download/

下载nginx 1.7.11.3 Gryphon.zip

3、下载截取屏幕的插件

地址：https://foxbaby.lanzoui.com/imI5Vup50za

操作步骤

4、安装截取屏幕的插件

5、解压ffmpeg

把bin目录设置成全局环境变量方便在cmd里使用ffmpeg推流

6、解压nginx

在根目录下，创建三个目录：m3u8File、rec、vod；

进入conf文件夹，新建记事本并改名nginx.conf，内容如下

点击查看代码

worker_processes  1;   #Nginx进程数，建议设置为等于CPU总核数

events {

    worker_connections  1024;  #工作模式与连接数上限

}

rtmp_auto_push on;

#RTMP服务

rtmp{

    server{

		listen 1935;        #推流的端口

		chunk_size 4096;    #数据传输块的大小

		application vod{

		    play ./vod;   #视频文件存放位置

		}

		application live{

		    live on;

			hls on;                      #开启hls直播。这个参数把直播服务器改造成实时回放服务器

			#wait_key on;                #对视频切片进行保护，这样就不会产生马赛克了

			hls_path ./html/hls;         #切片视频文件存放位置（HLS，m3u8文件存放位置）

			hls_fragment 2s;             #每个视频切片的时长

			hls_playlist_length 16s;

			recorder myRecord{

			    record all manual;

				record_suffix _.flv;

				record_path ./rec;

			}

			#hls_continuous on;          #连续模式

			#hls_cleanup on;             #对多余的切片进行删除

			#hls_nested on;              #嵌套模式

		}

	}

}

#HTTP服务

http {

    include       mime.types;

    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {

        listen       80;

        server_name  localhost;

        location / {

            root   html;

            index  index.html index.htm;

        }

        location /live_hls{

		    types{

			    #m3u8 type设置

				application/vnd.apple.mpegurl m3u8;

				#ts分片文件设置

				video/mp2t ts;

			}

			#指向访问m3u8文件目录

			alias ./html/hls;

			    add_header Cache-Control no-cache; #禁止缓存

		}

        location /control{

		    rtmp_control all;

		}

		location /stat{

		    rtmp_stat all;

			rtmp_stat_stylesheet stat.xsl;

		}

		location /stat.xsl{

		    root ./nginx-rtmp-module-master;

		}

        # redirect server error pages to the static page /50x.html

        #

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        }

    }

}

7、回到nginx根目录，命令行启动nginx

点击查看代码

启动：start nginx

快速停止：nginx -s stop

正常停止：nginx -s quit

配置重载：nginx -s reload

浏览器输入：127.0.0.1:nginx中http服务配置的端口号，例如：127.0.0.1:81，能成功显示页面即说明ngix启动成功

使用ffmpeg推流

新建cmd命令行，输入：

ffmpeg -f dshow -i video="screen-capture-recorder" -f dshow -i audio="virtual-audio-capturer" -vcodec libx264 -preset:v ultrafast -pix_fmt yuv420p -acodec aac -f flv rtmp://127.0.0.1/live

最后跟着的rtmp://中的端口号，就是上面nginx配置的rtmp服务端口

前端访问

新建html文件，内容如下：

点击查看代码

<!DOCTYPE html>

<html lang="en">

<head>

    <title>HTML5 直播</title>

    <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">

    <script src="http://vjs.zencdn.net/5.19/video.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>

</head>

<body>

    <video id="myvideo" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720"

        poster="" data-setup="{}">

        <source src="rtmp://127.0.0.1:8008/live/" type="rtmp/flv">

    </video>

    <div>

        <p>ffmpeg -f dshow -i video="screen-capture-recorder" -f dshow -i audio="virtual-audio-capturer" -vcodec libx264 -preset:v ultrafast -pix_fmt yuv420p -acodec aac -f flv rtmp://127.0.0.1/live</p>

    </div>

    <div>

        <p>ffmpeg -list_devices true -f dshow -i dummy</p>

    </div>

</body>

</html>

使用360浏览器访问即可查看，chrome新版已经弃用flash，所以无法播放