vlc搭建rtsp直播Demo & ffmpeg + nginx + flv.js实现rtsp网页播放Demo

本文介绍: 如图选择 ts流（激活转码要勾选哦），点击下一个。点击添加，选择视频文件，后点击串流。然后，稍等，就可以看到视频在播放了。输入 rtsp的地址，点击播放。手动输入 rtsp的推流地址。与上面相同，点击媒体-&g t;流。选择 rtsp后，点击添加。手动输入路径，点击下一个。点击媒体-&g t;打开网络串流。可以看到推流地址，点击流。点击串流后，点击下一个。即可看到，它开始推流了。选择 rtsp，点击添加。选择 ts，点击下一个。

ffmpeg 使用VLC亲手搭建RTSP直播点播
 【前端】rtsp 与 rtmp 视频流的播放方法
 在windows下搭建、配置nginx流媒体服务器，并进行rtmp流的推流、拉流测试（测了有效，但是播放一会儿之后，就断了，不知道咋回事）
Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流

如何不花钱让html5播放rtsp视频流（第一弹）
FFmpeg-Linux下实现FFmpeg+nginx搭建 RTMP&flv流媒体服务器实现监控等视频进行web直播
 rtmp、hls、flv基本介绍

ffmpeg & nginx 解决无法在web里播放海康rtsp流媒体的问题

HTTP-FLV直播模块（nginx-http-flv-module）配置
 [http-flv]flv.js和nginx-http-flv的推流和拉流 !!! 有用
 [nginx-rtmp]ffmpeg+video-js的推流和拉流 (不推荐)

nginx-http-flv-module模块使用介绍 gitee地址
 哔哩哔哩flv.js

worker_processes  1;

error_log logs/error.log error;

events {
    worker_connections  4096;
}

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

    keepalive_timeout  65;

    server {
        listen       80;

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

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        location /live {
            flv_live on; #打开HTTP播放FLV直播流功能
            chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回复

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

        location /hls {
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }

            root temp;
            add_header 'Cache-Control' 'no-cache';
        }

        location /dash {
            root temp;
            add_header 'Cache-Control' 'no-cache';
        }

        location /stat {
            #推流播放和录制统计数据的配置

            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            root www/rtmp; #指定stat.xsl的位置
        }

        #如果需要JSON风格的stat, 不用指定stat.xsl
        #但是需要指定一个新的配置项rtmp_stat_format

        #location /stat {
        #    rtmp_stat all;
        #    rtmp_stat_format json;
        #}

        location /control {
            rtmp_control all; #rtmp控制模块的配置
        }
    }
}

rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir temp;

rtmp {
    out_queue           4096;
    out_cork            8;
    max_streams         128;
    timeout             15s;
    drop_idle_publisher 15s;

    log_interval 5s; #log模块在access.log中记录日志的间隔时间，对调试非常有用
    log_size     1m; #log模块用来记录日志的缓冲区大小

    server {
        listen 1935;
        #server_name www.test.*; #用于虚拟主机名后缀通配

        application myapp {
            live on;
            gop_cache on; #打开GOP缓存，减少首屏等待时间
        }

        application hls {
            live on;
            hls on;
            hls_path temp/hls;
        }

        application dash {
            live on;
            dash on;
            dash_path temp/dash;
        }
    }
}

ffmpeg -i rtsp://127.0.0.1:8554/rtsp01 -vcodec copy -acodec copy -f flv -an -b 1024k -y rtmp://127.0.0.1:1935/myapp/mystream

<html>
		<head>
				<title>Live</title>
				<meta charset="utf-8">
		</head>
		<body >
				<h2 >推流测试</h2>
				<button id="startVideoBtn">开始</button>
				<script src="flv.js"></script>
				<video id="videoElement"></video>
				<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&amp;app=myapp&amp;stream=mystream'
						});
						flvPlayer.attachMediaElement(videoElement);
						flvPlayer.load();
						flvPlayer.play();
					}
				}
						 
				let startVideoBtn = document.getElementById('startVideoBtn')	
				startVideoBtn.onclick = ()=>{
					start()
				}
				</script>
		</body>
</html>