通过网页浏览器播放rtsp视频流解决方案

说明:
近期有需求,需要将摄像头的rtsp视频流使用web网页端来播放,采用过vlc将rtsp转http流的方式来播放,但效果不太好,在linux服务器上安装依赖过多,坑比较多,而且性能不佳,如今浏览器新版本早已经不再支持rtsp视频协议,只支持m3u8,flv视频流协议播放,因此踩过许多坑,出于安全需要,不能放出截图,所以将大致的解决思路发出来,方便大家解决问题:

拉流转码服务器采用centos 7.8 64位版本:
1.首先通过ffmpeg 将 rtsp的视频流转为rtmp视频流,再通过nodejs的node-media-server包将rtmp转为flv视频流,亲测效果比vlc好太多,负载能力高。
操作步骤:
	(1).ffmpeg 使用的ffmpeg-6.0-amd64-static.tar 包版本(网上可下载),解压,然后将ffmpeg-6.0-amd64-static/ffmpeg复制到/usr/bin/ffmpeg 文件下.
	(2).通过ffmpeg命令将rtsp视频流转为rtmp,命令为:
		ffmpeg -re -rtsp transport tcp -i 你的rtsp视频流地址 -codec h264 -b:v 1024k -an -f flv -s 1280x720 -q 10 rtmp://IP地址:端口/live/5b333004-1aa2-4f36-98f6-3e543826bdb3  
	(注意:rtmp://IP地址:端口/live/5b333004-1aa2-4f36-98f6-3e543826bdb3这个/live/5b333004-1aa2-4f36-98f6-3e543826bdb3由你自定义,IP地址和端口还有live后面的uuid需要记录下来,在本文示例中IP地址为:10.150.50.3,端口为1936,uuid为5b333004-1aa2-4f36-98f6-3e543826bdb3)
	(3).yum -y install nodejs 安装nodejs,我使用的nodejs版本是v16.18.1.
	(4).安装好nodejs后再安装node-media-server包。
		mkdir -p mediaserver/
		cd mediaserver/
		npm install node-media-server		#可以全局安装也可以局部安装(如果报错可以使用cnpm install node-media-server)
		vim app.js
			const NodeMediaServer = require('node-media-server');
		
			const config = {
			  rtmp: {
			    port: 1936,								#通过ffmpeg转发的rtmp端口号,设为1936
			    chunk_size: 60000,
			    gop_cache: true,
			    ping: 60,
			    ping_timeout: 30
			  },
			  http: {
			    port: 808,								   #对外提供的http的flv播放端口位808
			    allow_origin: '*'
			  }
			};
			
			var nms = new NodeMediaServer(config)
			nms.run();
		node app.js								#运行成功
		ps -ef | grep node 					    #查看进程是否运行成功
	
	这时候转发的flv视频地址为:
	http://10.150.50.3:808/live/5b333004-1aa2-4f36-98f6-3e543826bdb3.flv地址。搞定
	
	在网页端播放flv视频地址我采用的是
	https://github.com/Bilibili/flv.js
	flv.js 来播放,可以网上搜索,解决方案很多,在此不累述!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值