FFMPEG推流到Nginx，VLC/网页播放

前言

本文实现在windows上通过ffmpeg推流到nginx服务器，分别用VLC和网页播放视频。
本文使用的软件版本：
nginx服务器： nginx-1.19.3
ffmpeg： ffmpeg 4.4.1
VLC： VLC Media Player 3.0.16

一、在windows上搭建nginx服务器

1.下载解压nginx-1.19.3

在这里插入图片描述

2.修改nginx.conf文件内容

修改nginx-1.19.3/conf/nginx.conf文件内容
在这里插入图片描述
在events和http中间增加以下内容

rtmp {
    server {
        listen 1935; #Nginx监听的RTMP推流/拉流端口
        application live {
            live on; #当推流时，RTMP路径中的APP（RTMP中一个概念）匹配myapp时，开启直播
            record off; #不记录视频
            gop_cache off;
        }
    }
}

在http的server中增加以下内容

location /live {
			flv_live on; #当HTTP请求以/live结尾，匹配这儿，这个选项表示开启了flv直播播放功能
			chunked_transfer_encoding  on; #HTTP协议开启Transfer-Encoding: chunked;方式回复

			add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
			add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
		}

完整的nginx.conf文件，可以直接覆盖掉自己的nginx.conf


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

rtmp {
    server {
        listen 1935; #Nginx监听的RTMP推流/拉流端口
        application live {
            live on; #当推流时，RTMP路径中的APP（RTMP中一个概念）匹配myapp时，开启直播
            record off; #不记录视频
            gop_cache off;
        }
    }
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        # 在http的server中加入
		location /live {
			flv_live on; #当HTTP请求以/live结尾，匹配这儿，这个选项表示开启了flv直播播放功能
			chunked_transfer_encoding  on; #HTTP协议开启Transfer-Encoding: chunked;方式回复

			add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
			add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
		}
		
        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

3.启动nginx服务器

运行nginx
在这里插入图片描述
检查是否启动成功
在浏览器网址输入localhost
在这里插入图片描述

出现上面页面，启动成功

二、安装VLC

安装VLC Media Player 3.0.16

三、ffmpeg推流

1.下载安装ffmpeg

在这里插入图片描述

2.通过ffmpeg命令推rtmp流到nginx服务器

进入到bin目录
输入以下命令

ffmpeg -re -i 2.mp4 -vcodec copy -acodec copy -f flv "rtmp://127.0.0.1:1935/live/test"

windows powershell用

.\ffmpeg.exe -re -i 2.mp4 -vcodec copy -acodec copy -f flv "rtmp://127.0.0.1:1935/live/test"

四、播放视频

1.使用VLC播放

打开VLC网络串流
在这里插入图片描述
使用rtmp拉流
ip地址为nginx服务器ip地址，我的nginx在本地，所以用本地地址
1935为nginx.conf里面添加的端口号
live为nginx.conf里面添加的应用
test是随便起的一个名字
在这里插入图片描述
然后进行拉流播放
在ffmeg里面推流

.\ffmpeg.exe -re -i 2.mp4 -vcodec copy -acodec copy -f flv "rtmp://127.0.0.1:1935/live/test"

推流成功
在这里插入图片描述

视频正常显示
在这里插入图片描述
在本地延时1s左右

2.网页播放

网页使用的是flv.min.js
网页代码

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>
    <style>
        .mainContainer {
            display: block;
            width: 1024px;
            margin-left: auto;
            margin-right: auto;
        }

        .urlInput {
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .centeredVideo {
            display: block;
            width: 100%;
            height: 576px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }

        .controls {
            display: block;
            width: 100%;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>

<p class="mainContainer">
    <video name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024"
           height="576">
        Your browser is too old which doesn't support HTML5 video.
    </video>
</p>

<script src="flv.min.js"></script>

<script>

    function start() {
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
				url: 'http://127.0.0.1/live?port=1935&app=live&stream=test'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        start();
    });
</script>

</body>

</html>

只需要修改url部分代码
开启ffmpeg推流

.\ffmpeg.exe -re -i 2.mp4 -vcodec copy -acodec copy -f flv "rtmp://127.0.0.1:1935/live/test"

网页正常显示视频
在这里插入图片描述

版权声明：本文为Cgs723原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。