vue视频直接播放rtsp流；vue视频延迟问题解决；webRTC占cpu太大卡死问题解决；解决webRTC播放卡花屏问题:

已于 2023-10-19 15:40:18 修改
阅读量2.2k 收藏 4
点赞数 1
分类专栏： video 文章标签： vue.js 音视频 前端
于 2023-10-17 15:03:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/killerdoubie/article/details/133884070
版权

播放多个视频

 <div class="video-box">
      <div class="video">
        <iframe style="width:100%;height:100%;" name="ddddd" id="iframes" scrolling="auto" :src="videoLeftUrl"></iframe>
      </div>
      <div class="video">
        <iframe style="width:100%;height:100%;" name="ddddd" id="iframes" scrolling="auto" :src="videoRightUrl"></iframe>
      </div>
      <div class="video">
        <iframe style="width:100%;height:100%;" name="ddddd" id="iframes" scrolling="auto" :src="videoRtspUrl"></iframe>
      </div>
    </div>

js部分其中的item就是rtsp视频流

    getShareVideoLeftUrl(item) {
      this.videoLeftUrl = `/static/test.html?data=${item}`
    },
    getShareVideoRightUrl(item) {
      this.videoRightUrl = `/static/test.html?data=${item}`
    },
    getShareVideoRtspUrl(item) {
      this.videoRtspUrl = `/static/test.html?data=${item}`
    },

public/static/test.html内容

<html>
	<head>
		<script src="js/webrtcstreamer.js"></script>
		<script>
			// 接受从vue组件中传过来的参数
			let url = location.search; //这一条语句获取了包括问号开始到参数的最后，不包括前面的路径
			let params = url.substr(1); //去掉问号
			let pa = params.split("&");
			let s = new Object();
             //  设置后端服务地址
            let VIDEOURL = "http://172.18.127.7:8000" //服务视频webrtc

			for (let i = 0; i < pa.length; i++) {
				s[pa[i].split("=")[0]] = unescape(pa[i].split("=")[1]);
			}
			console.log(s.data)
			window.onload = function() {
				webRtcServer = new WebRtcStreamer("video", VIDEOURL);
				webRtcServer.connect(s.data);
			}
			window.onbeforeunload = function() {
				webRtcServer.disconnect();
			}
		</script>
	</head>
	<body>
		<h1 value="da3"></h1>
		<video id="video" style="width: 100%;height: 100%;" controls autoplay muted />
	</body>
</html>

其中public/static/js/webrtcstreamer.js文件内容如下

var WebRtcStreamer = (function() {

/** 
 * Interface with WebRTC-streamer API
 * @constructor
 * @param {string} videoElement - id of the video element tag
 * @param {string} srvurl -  url of webrtc-streamer (default is current location)
*/
var WebRtcStreamer = function WebRtcStreamer (videoElement, srvurl) {
	if (typeof videoElement === "string") {
		this.videoElement = document.getElementById(videoElement);
	} else {
		this.videoElement = videoElement;
	}
	this.srvurl           = srvurl || location.protocol+"//"+window.location.hostname+":"+window.location.port;
	this.pc               = null;    

	this.pcOptions        = { "optional": [{"DtlsSrtpKeyAgreement": true} ] };

	this.mediaConstraints = { offerToReceiveAudio: true, offerToReceiveVideo: true };

	this.iceServers = null;
	this.earlyCandidates = [];
}

WebRtcStreamer.prototype._handleHttpErrors = function (response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}

/** 
 * Connect a WebRTC Stream to videoElement 
 * @param {string} videourl - id of WebRTC video stream
 * @param {string} audiourl - id of WebRTC audio stream
 * @param {string} options -  options of WebRTC call
 * @param {string} stream  -  local stream to send
*/
WebRtcStreamer.prototype.connect = function(videourl, audiourl, options, localstream) {
	this.disconnect();
	
	// getIceServers is not already received
	if (!this.iceServers) {
		console.log("Get IceServers");
		
		fetch(this.srvurl + "/api/getIceServers")
			.then(this._handleHttpErrors)
			.then( (response) => (response.json()) )
			.then( (response) =>  this.onReceiveGetIceServers.call(this,response, videourl, audiourl, options, localstream))
			.catch( (error) => this.onError("getIceServers " + error ))
				
	} else {
		this.onReceiveGetIceServers(this.iceServers, videourl, audiourl, options, localstream);
	}
}

/** 
 * Disconnect a WebRTC Stream and clear videoElement source
*/
WebRtcStreamer.prototype.disconnect = function() {		
	if (this.videoElement) {
		this.videoElement.src = "";
	}
	if (this.pc) {
		fetch(this.srvurl + "/api/hangup?peerid="+this.pc.peerid)
			.then(this._handleHttpErrors)
			.catch( (error) => this.onError("hangup " + error ))

		
		try {
			this.pc.close();
		}
		catch (e) {
			console.log ("Failure close peer connection:" + e);
		}
		this.pc = null;
	}
}    

/*
* GetIceServers callback
*/
WebRtcStreamer.prototype.onReceiveGetIceServers = function(iceServers, videourl, audiourl, options, stream) {
	this.iceServers       = iceServers;
	this.pcConfig         = iceServers || {"iceServers": [] };
	try {            
		this.createPeerConnection();

		var callurl = this.srvurl + "/api/call?peerid="+ this.pc.peerid+"&url="+encodeURIComponent(videourl);
		if (audiourl) {
			callurl += "&audiourl="+encodeURIComponent(audiourl);
		}
		if (options) {
			callurl += "&options="+encodeURIComponent(options);
		}
		
		if (stream) {
			this.pc.addStream(stream);
		}

                // clear early candidates
		this.earlyCandidates.length = 0;
		
		// create Offer
		var bind = this;
		this.pc.createOffer(this.mediaConstraints).then(function(sessionDescription) {
			console.log("Create offer:" + JSON.stringify(sessionDescription));
			
			bind.pc.setLocalDescription(sessionDescription
				, function() {
					fetch(callurl, { method: "POST", body: JSON.stringify(sessionDescription) })
						.then(bind._handleHttpErrors)
						.then( (response) => (response.json()) )
						.catch( (error) => bind.onError("call " + error ))
						.then( (response) =>  bind.onReceiveCall.call(bind,response) )
						.catch( (error) => bind.onError("call " + error ))
				
				}
				, function(error) {
					console.log ("setLocalDescription error:" + JSON.stringify(error)); 
				} );
			
		}, function(error) { 
			alert("Create offer error:" + JSON.stringify(error));
		});

	} catch (e) {
		this.disconnect();
		alert("connect error: " + e);
	}	    
}


WebRtcStreamer.prototype.getIceCandidate = function() {
	fetch(this.srvurl + "/api/getIceCandidate?peerid=" + this.pc.peerid)
		.then(this._handleHttpErrors)
		.then( (response) => (response.json()) )
		.then( (response) =>  this.onReceiveCandidate.call(this, response))
		.catch( (error) => bind.onError("getIceCandidate " + error ))
}
					
/*
* create RTCPeerConnection 
*/
WebRtcStreamer.prototype.createPeerConnection = function() {
	console.log("createPeerConnection  config: " + JSON.stringify(this.pcConfig) + " option:"+  JSON.stringify(this.pcOptions));
	this.pc = new RTCPeerConnection(this.pcConfig, this.pcOptions);
	var pc = this.pc;
	pc.peerid = Math.random();		
	
	var bind = this;
	pc.onicecandidate = function(evt) { bind.onIceCandidate.call(bind, evt); };
	pc.onaddstream    = function(evt) { bind.onAddStream.call(bind,evt); };
	pc.oniceconnectionstatechange = function(evt) {  
		console.log("oniceconnectionstatechange  state: " + pc.iceConnectionState);
		if (bind.videoElement) {
			if (pc.iceConnectionState === "connected") {
				bind.videoElement.style.opacity = "1.0";
			}			
			else if (pc.iceConnectionState === "disconnected") {
				bind.videoElement.style.opacity = "0.25";
			}			
			else if ( (pc.iceConnectionState === "failed") || (pc.iceConnectionState === "closed") )  {
				bind.videoElement.style.opacity = "0.5";
			} else if (pc.iceConnectionState === "new") {
				bind.getIceCandidate.call(bind)
			}
		}
	}
	pc.ondatachannel = function(evt) {  
		console.log("remote datachannel created:"+JSON.stringify(evt));
		
		evt.channel.onopen = function () {
			console.log("remote datachannel open");
			this.send("remote channel openned");
		}
		evt.channel.onmessage = function (event) {
			console.log("remote datachannel recv:"+JSON.stringify(event.data));
		}
	}
	pc.onicegatheringstatechange = function() {
		if (pc.iceGatheringState === "complete") {
			const recvs = pc.getReceivers();
		
			recvs.forEach((recv) => {
			  if (recv.track && recv.track.kind === "video") {
				console.log("codecs:" + JSON.stringify(recv.getParameters().codecs))
			  }
			});
		  }
	}

	try {
		var dataChannel = pc.createDataChannel("ClientDataChannel");
		dataChannel.onopen = function() {
			console.log("local datachannel open");
			this.send("local channel openned");
		}
		dataChannel.onmessage = function(evt) {
			console.log("local datachannel recv:"+JSON.stringify(evt.data));
		}
	} catch (e) {
		console.log("Cannor create datachannel error: " + e);
	}	
	
	console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.pcConfig) + "option:"+  JSON.stringify(this.pcOptions) );
	return pc;
}


/*
* RTCPeerConnection IceCandidate callback
*/
WebRtcStreamer.prototype.onIceCandidate = function (event) {
	if (event.candidate) {
		if (this.pc.currentRemoteDescription)  {
			this.addIceCandidate(this.pc.peerid, event.candidate);					
		} else {
			this.earlyCandidates.push(event.candidate);
		}
	} 
	else {
		console.log("End of candidates.");
	}
}


WebRtcStreamer.prototype.addIceCandidate = function(peerid, candidate) {
	fetch(this.srvurl + "/api/addIceCandidate?peerid="+peerid, { method: "POST", body: JSON.stringify(candidate) })
		.then(this._handleHttpErrors)
		.then( (response) => (response.json()) )
		.then( (response) =>  {console.log("addIceCandidate ok:" + response)})
		.catch( (error) => this.onError("addIceCandidate " + error ))
}
				
/*
* RTCPeerConnection AddTrack callback
*/
WebRtcStreamer.prototype.onAddStream = function(event) {
	console.log("Remote track added:" +  JSON.stringify(event));
	
	this.videoElement.srcObject = event.stream;
	var promise = this.videoElement.play();
	if (promise !== undefined) {
	  var bind = this;
	  promise.catch(function(error) {
		console.warn("error:"+error);
		bind.videoElement.setAttribute("controls", true);
	  });
	}
}
		
/*
* AJAX /call callback
*/
WebRtcStreamer.prototype.onReceiveCall = function(dataJson) {
	var bind = this;
	console.log("offer: " + JSON.stringify(dataJson));
	var descr = new RTCSessionDescription(dataJson);
	this.pc.setRemoteDescription(descr
		, function()      { 
			console.log ("setRemoteDescription ok");
			while (bind.earlyCandidates.length) {
				var candidate = bind.earlyCandidates.shift();
				bind.addIceCandidate.call(bind, bind.pc.peerid, candidate);				
			}
		
			bind.getIceCandidate.call(bind)
		}
		, function(error) { 
			console.log ("setRemoteDescription error:" + JSON.stringify(error)); 
		});
}	

/*
* AJAX /getIceCandidate callback
*/
WebRtcStreamer.prototype.onReceiveCandidate = function(dataJson) {
	console.log("candidate: " + JSON.stringify(dataJson));
	if (dataJson) {
		for (var i=0; i<dataJson.length; i++) {
			var candidate = new RTCIceCandidate(dataJson[i]);
			
			console.log("Adding ICE candidate :" + JSON.stringify(candidate) );
			this.pc.addIceCandidate(candidate
				, function()      { console.log ("addIceCandidate OK"); }
				, function(error) { console.log ("addIceCandidate error:" + JSON.stringify(error)); } );
		}
		this.pc.addIceCandidate();
	}
}


/*
* AJAX callback for Error
*/
WebRtcStreamer.prototype.onError = function(status) {
	console.log("onError:" + status);
}

return WebRtcStreamer;
})();

if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
	module.exports = WebRtcStreamer;
else
	window.WebRtcStreamer = WebRtcStreamer;

这里启用需要下载webRTC

  https://github.com/mpromonet/webrtc-streamer/releases

需要注意的是这里启动不要直接双击而是使用cmd命令启动

 

start 应用名 -o 

一定加上-o否则webRTC占cpu太大 容易卡死


解决卡花屏问题:
在html页面中的webRtcServer.connect(s.data,"","rtptransport=tcp");加上"","rtptransport=tcp"就搞定
<html>
	<head>
		<script src="js/webrtcstreamer.js"></script>
		<script>
			// 接受从vue组件中传过来的参数
			let url = location.search; //这一条语句获取了包括问号开始到参数的最后，不包括前面的路径
			let params = url.substr(1); //去掉问号
			let pa = params.split("&");
			let s = new Object();
             //  设置后端服务地址
            let VIDEOURL = "http://172.18.127.7:8000" //服务视频webrtc

			for (let i = 0; i < pa.length; i++) {
				s[pa[i].split("=")[0]] = unescape(pa[i].split("=")[1]);
			}
			console.log(s.data)
			window.onload = function() {
				webRtcServer = new WebRtcStreamer("video", VIDEOURL);
				webRtcServer.connect(s.data,"","rtptransport=tcp");
			}
			window.onbeforeunload = function() {
				webRtcServer.disconnect();
			}
		</script>
	</head>
	<body>
		<h1 value="da3"></h1>
		<video id="video" style="width: 100%;height: 100%;" controls autoplay muted />
	</body>
</html>

祝你今天也快乐
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
实战之如何在VUE中播放RTSP实时推流播放解决方案
可可的博客
06-21 5694
HTTP-FLV 技术的出现，拓宽了视频直播技术的应用范围，使得更多的视频网站和应用程序能够通过 HTTP-FLV 实现低延迟、高性能、高质量的视频直播服务。比如海康威视提供的开发包，优势就是延迟比较低，但要求浏览器需要支持NPAPI插件，而Chrome等高版本浏览器是不支持的，如果使用老版本浏览器也可以暂时解决问题，但是漏洞比较多，商用还是有很大风险，并且不同的厂商的方案也只针对本厂商产品，不能兼容其他厂商的摄像头。是通过 HTTP 协议传输 FLV 视频流的一种技术，是直播领域的一种新型协议。
webrtc-streamer-card:可以从webrtc-streamer（RTSP，H264，H265 ...）流式传输零延迟视频的家庭辅助Lovelace卡
05-23
webrtc-流光卡 可以从webrtc-streamer（RTSP，H264，H265 ...）流式传输零延迟视频的家庭辅助Lovelace卡 您需要一个正在运行的Webrtc-streamer实例，有关更多详细信息和完整选项，请参见官方存储库： : webrtc-streamer基于live555 lib，因此它应该能够处理MPEG，H.265，H.264，H.263 +，DV或JPEG视频以及几种音频编解码器。 可以通过Docker运行最简单的方法docker run -p 8000:8000 -it mpromonet/webrtc-streamer 在您的家庭辅助www目录中克隆或解压缩此存储库。 自定义卡必须作为仪表板资源中的模块添加： resources: - url: /local/webrtc-streamer-card/webrtc-streame
Web网页实现多路播放RTSP视频流（使用WebRTC）
08-03
本demo采用web网页作为客户端，webrtc作为服务端，实现多路rtsp视频流在网页端同时实时预览。 其中包含两个文件夹：webrtc-qmy为客户端；webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release问服务端。具体使用流程，课查看博客：http://t.csdn.cn/CoQGF
vue播放rtsp流
starstarstarl的博客
04-11 2134
vue播放rtsp webrtc-streamer
vue中web端播放rtsp视频流（摄像头监控视频）（海康威视录像机）
Korey__的博客
04-24 1354
链接：https://pan.baidu.com/s/1_KgKM-sOzfrAVs_8LgCG1w?jsmpeg.min.js建议在index.html引入，我只是不放心又引入了一遍，正常在index.html也要引入。新建一个app.js文件，同级目录下npm安装 node-rtsp-stream。我是直接写在项目里了，你们可以单独写在外面。jsmpeg.min.js下载地址。
Centos7配置webrtc-streamer环境
最新发布
qq_40110442的博客
05-30 658
这是因为yum包管理是使用python2.x写的，将python2.x升级到python3.6.8以后，由于python版本语法兼容性导致问题出现。然后再重复执行./webrtc-streamer查看还缺哪些依赖按照以上步骤安装，直到最后出现如下情况：缺少glibc依赖。预编译,分别执行以下指令，如果出现报错，按照QA章节处理，建议执行make之前先把QA章节的依赖先安装一遍。发现python版本没变，这是因为在/usr/bin中有个python软链接文件仍然指向python2。
vue中播放rtsp流
热门推荐
weixin_56924782的博客
07-28 1万+
浅看一下vue播放rtsp流的方法#Rtsp#RTSP#rtsp
vue 视频流播放
weixin_43957384的博客
11-06 3960
vue 视频流播放
VUE+webrtc-streamer 实现实时视频播放（监控设备-rtsp）
蓝胖子的博客
12-08 3653
VUE+webrtc-streamer 实现实时视频播放（监控设备-rtsp）
vue播放rtsp流方案（支持h265）
yunbabac的博客
06-09 5890
前端web播放rtsp流（h265），低延迟
vue项目播放海康,大华等rtsp视频流
bajiutao的博客
05-25 2406
vue项目播放海康,大华等rtsp视频流
vue项目中播放rtmp视频文件流的方法
10-14
在Vue项目中实现RTMP视频文件流的播放，通常会面临H5的`<video>`标签不支持RTMP格式的问题。为了解决这个问题，我们可以借助第三方插件Vue Video Player，它是一个基于Video.js的Vue组件，能够处理包括RTMP在内的...
RTSP-> WebRTC服务器，生成CPU使用情况报告-Golang开发
05-26
rtsp-bench是一台WebRTC服务器，它从RTSP提要中提取，然后通过WebRTC重新分发。 它生成带有CPU使用率和已连接PeerConnection计数的report.csv。 生成使用情况报告的RTSP Bench RTSP服务器，包括Web / CLI客户端！ rtsp-bench是一台WebRTC服务器，它从RTSP提要中提取，然后通过WebRTC重新分发。 它生成带有CPU使用率和已连接PeerConnection计数的report.csv。 此存储库包含一个CLI WebRTC客户端，它将连接并执行负载测试。 这是通过托管在：8080 / doSignaling上的REST API来完成的。 您也可以通过Web UI观看视频/负载测试：8080 /，它通过相同的R连接
前端播放rtsp流附件
07-18
使用这附件可以在前端播放流媒体（rtsp）， 怎么使用在博客上有。
Vue项目开发常见问题和解决方案总结
10-14
本文将对一些常见的Vue项目开发问题及其解决方案进行总结，旨在帮助开发者更高效地利用Vue进行开发。 首先，一个常见的问题是Vue CLI打包后的静态资源路径不正确。在Vue CLI 2.x版本中，可以通过修改`config/index....
webrtc实现h5播放rtsp流
04-25
webrtc实现h5播放rtsp流
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
10-14
Vue-Video-Player 是一个基于 Video.js 的 Vue 组件，它提供了丰富的视频播放功能，包括对实时流媒体的支持。在本文中，我们将深入探讨如何使用 Vue-Video-Player 实现监控设备的实时视频播放，特别是通过 RTMP 流。...
动态修改object中的param属性值
unit666的博客
04-09 2417
要在JavaScript中获取<object>的<param>对应的值，方法为 <script type="text/javascript"> var value1 =document.getElementById("vlc").getElementsByTagName("param")[0].value; </script> 其中...
vue实现rtsp视频直播流
baidu_41803888的博客
03-18 1万+
实现摄像头的直播功能其实有许多方案，像是安装vlc插件、rtsp转rtmp然后使用videojs通过flash播放rtmp**（由于chrome已经不使用flash所以放弃使用videojs，并且videojs针对部分摄像机（比如：海康）不是很友好，作者大大也很久没有维护的原因，部分rtsp、rtmp流的视频直播是无法找到媒体的兼容源）** 以及hls .m3u8等方式 然而现今的浏览器对于vlc插件几乎都不再支持了，flash在2020年也将被chrome停止支持，而.m3u8的方案用来做直播的话似乎延迟
vue webrtc播放rtsp视频流
07-27
在Vue中播放RTSP视频流需要使用WebRTC技术和相应的库。以下是一些步骤以及可能使用的库的示例： 1. 安装webrtc-adapter库：这个库可以帮助你在不同浏览器中使用WebRTC。你可以使用npm来安装它： ```bash npm install webrtc-adapter ``` 2. 在Vue组件中引入webrtc-adapter库： ```js import 'webrtc-adapter'; ``` 3. 使用RTCPeerConnection建立与RTSP服务器的连接。你可以使用库来简化这个过程，比如RTSP-Client： ```bash npm install rtsp-client ``` 4. 在Vue组件中使用RTCPeerConnection和RTSP-Client库来播放RTSP视频流： ```js import RTSPClient from 'rtsp-client'; export default { mounted() { const videoElement = this.$refs.video; // 获取video元素的引用 const client = new RTSPClient(); client.connect('rtsp://your_rtsp_url').then((stream) => { videoElement.srcObject = stream; // 将视频流赋值给video元素的srcObject属性 videoElement.play(); // 开始播放视频 }).catch((error) => { console.error('Error connecting to RTSP server:', error); }); } } ``` 5. 在Vue模板中添加一个video元素用于显示视频流： ```html <template> <div> <video ref="video" controls></video> </div> </template> ``` 请注意，这只是一个简单的示例，具体实现可能因为RTSP服务器的不同而有所变化。你可能需要根据实际情况进行调整。 希望这可以帮助到你！如果你有任何其他问题，请随时问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值