rtsp流通过ffmpeg+nginx转成rtmp以及http-flv流

最新推荐文章于 2024-09-13 22:15:39 发布

队友一直叫我撤

最新推荐文章于 2024-09-13 22:15:39 发布

阅读量6.2k

点赞数 10

分类专栏：前端视频流文章标签： javascript rtsp http-flv ffmpeg nginx

本文链接：https://blog.csdn.net/a123789999/article/details/117249952

版权

前端同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

视频流

2 篇文章 0 订阅

订阅专栏

1.摄像头提供rtsp的视频流，使用VLC转成ogg格式虽然可以通过h5播放，但是延迟太高；最终决定将rtsp流通过ffmpeg+nginx-http-flv转成rtmp以及http-flv流，并通过flv.js在h5页面播放。
2.打开包含rtmp模块的nginx文件(编译好的nginx文件下载)的conf配置文件，设置rtmp服务和http服务后打开nginx.exe

# 添加RTMP服务
rtmp {
    server {
        listen 1935; # 监听端口

        chunk_size 4000;
        application live {
            live on;
			gop_cache on;
        }
    }
}

# HTTP服务
http {
    server {
        listen       80;
        server_name	 localhost;
		
		location /live {
			flv_live on;
            chunked_transfer_encoding  on; #open 'Transfer-Encoding: chunked' response
			add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
			add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
			add_header Access-Control-Allow-Headers X-Requested-With;
			add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
			add_header 'Cache-Control' 'no-cache';
        }
	}
}

3.安装ffmpeg(安装方法)，使用ffmpeg命令实时推流：
ffmpeg -i “rtsp://admin:123456@192.168.1.65:554/Streaming/Channels/1” -vcodec copy -acodec copy -f flv "rtmp:192.168.1.161:1935/live/10240"
我的rtsp视频流：rtsp://admin:123456@192.168.1.65/Streaming/Channels/1
我的ip地址：192.168.1.161
我的nginx配置文件中rtmp默认的端口号：1935
我自定义的端口号：10240 (/live在配置文件的http服务配置内)
得到rtmp播放地址：rtmp://192.168.1.161:1935/live/10240
http-flv播放地址：http://192.168.1.161:80/live?port=1935&app=live&stream=10240

在这里插入图片描述
4.前端页面播放flv.js,flv.js使用cdn或下载到本地引入都可

<!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>
  <link rel="icon" href="../image/terrain.ico" type="image/x-icon">
  <link rel="stylesheet" href="../dependent/video-js.css">
</head>
<script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.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://192.168.1.161:80/live?port=1935&app=live&stream=10240'
		        });
		        flvPlayer.attachMediaElement(videoElement);
		        flvPlayer.load();
		        flvPlayer.play();
		    }
  </script>
</body>
</html>

在这里插入图片描述