526互联

ffmpeg rtsp转flv挂载到web端（Windos版）

发布时间 2023-07-27 10:40:56作者: striver-sc

ffmpeg rtsp转flv挂载到web端（Windos版）

  1. 下载ffmpeg

image-20230718173453821

image-20230718173541096

解压目录

image-20230718173616408

配置nginx和nginx-http-flv-module

首先必须得下载nginx + http-flv-module + http_ssl_module编译（如果不想编译或者编译不出来，可以直接下载Car-eye-team / car-eye-http-flv-module，里面提供编译好的windows平台的带有http-flv-module和http_ssl_module的nginx）。

修改nginx配置文件

image-20230718174303998

image-20230718174317235

ffmpeg命令推送

ffmpeg -rtsp_transport tcp -i  "rtsp://182.116.62.148:23702/07928543399589000101?DstCode=01&ServiceType=1&ClientType=1&StreamID=1&SrcTP=2&DstTP=2&SrcPP=1&DstPP=1&MediaTransMode=0&BroadcastType=0&SV=1&Token=BZ0peNzNqdPxEaUqs42wsgVo/6Ywlv7XF2XEwqd53No=&"(获取视频流地址) -c copy -f flv "rtmp://127.0.0.1:1935/live/10240"(要推送的地址 1935监控端口)

生成的flv的url

http://127.0.0.1:80/live?port=1935&app=live&stream=10240

ffmpeg前端推流示例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>video</title>
</head>
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.js"></script>

<body>
	<div>
		<video id="vVideo" width="600" height="500" controls />
	</div>

	<script>
		//原生H5支持的媒体格式主要有MP4、OGG、WebM、M3U8
		if (flvjs.isSupported()) {
			var videoElement = document.getElementById('vVideo');
			var flvPlayer = flvjs.createPlayer({
				type: 'flv',
				url: 'http://127.0.0.1:80/live?port=1935&app=live&stream=10240',
				isLive: false,
                hasAudio: false,
                hasVideo: true,
                enableStashBuffer: false,
                changeOrigin: true
			});
			flvPlayer.attachMediaElement(videoElement);
			flvPlayer.load();
			flvPlayer.play();
		}
	</script>
</body>

</html>