ffmpeg+nginx+h5 播放rtsp视频流demo

1、方案：在点选摄像头时根据选中的摄像头id，读取rtsp地址，调用ffmpeg命令转换成hls格式，返回hls地址给前端，通过videojs进行播放

2、下载ffmpeg，windows下安装
地址：https://www.gyan.dev/ffmpeg/builds/packages/ffmpeg-5.0-full_build.7z
下载以后解压
在这里插入图片描述
在环境变量中添加path：d:\ffmpeg\bin
验证方法：cmd 输入ffmpeg -version

3、安装nginx
修改nginx.conf配置
并在html文件夹下创建hls文件

启动nginx：

start nginx.exe

4、执行ffmpeg命令将rtsp流转为hls流

ffmpeg -i "rtsp://admin:[email protected]" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 E:/shipin/nginx/html/hls/test.m3u8

ffmpeg 关于hls方面的指令说明：

-hls_time n: 设置每片的长度，默认值为2。单位为秒
-hls_list_size n: 设置播放列表保存的最多条目，设置为0会保存有所片信息，默认值为5
-hls_wrap n: 设置多少片之后开始覆盖，如果设置为0则不会覆盖，默认值为0.这个选项能够避免在磁盘上存储过多的片，而且能够限制写入磁盘的最多的片的数量
-hls_start_number n: 设置播放列表中sequence number的值为number，默认值为0

此时nginx下的hls文件夹里会生成实时的视频流

注意：-hls_list_size 2 -hls_flags 2 代替 -hls_list_size 4 -hls_wrap 20

5、前端用video.js进行播放

地址：http://localhost:5010/hls/test.m3u8，通过nginx转发

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 7.4.1</title>
<link href="../lib/video-7.4.1/video-js.min.css" rel="stylesheet">
<style>
body {
    
    
	background-color: #191919
}
.m {
    
    
	width: 960px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
}
</style>
</head>
 
<body>
	<div class="m">
		<video id="my-video" class="video-js" muted controls autoplay preload="auto" width="480" height="300" data-setup="{}">
			<source src="http://localhost:5010/hls/test.m3u8" type="application/x-mpegURL">
		</video>
		<video id="my-video" class="video-js" muted controls autoplay preload="auto" width="480" height="300" data-setup="{}">
			<source src="http://localhost:5010/hls/test.m3u8" type="application/x-mpegURL">
		</video>
		<script type="text/javascript" src="../lib/video-7.4.1/video.min.js"></script>
		<script type="text/javascript">
			var myPlayer = videojs('my-video');
			videojs("my-video").ready(function() {
    
    
				var myPlayer = this;
				myPlayer.play();
			});
		</script>
	</div>
</body>
</html>

ffmpeg+nginx+h5 播放rtsp视频流demo

猜你喜欢