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

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>

在这里插入图片描述

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值