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

    播放多个视频

    1.  <div class="video-box">
    2.       <div class="video">
    3.         <iframe style="width:100%;height:100%;" name="ddddd" id="iframes" scrolling="auto" :src="videoLeftUrl">iframe>
    4.       div>
    5.       <div class="video">
    6.         <iframe style="width:100%;height:100%;" name="ddddd" id="iframes" scrolling="auto" :src="videoRightUrl">iframe>
    7.       div>
    8.       <div class="video">
    9.         <iframe style="width:100%;height:100%;" name="ddddd" id="iframes" scrolling="auto" :src="videoRtspUrl">iframe>
    10.       div>
    11.     div>

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

    1.     getShareVideoLeftUrl(item) {
    2.       this.videoLeftUrl = `/static/test.html?data=${item}`
    3.     },
    4.     getShareVideoRightUrl(item) {
    5.       this.videoRightUrl = `/static/test.html?data=${item}`
    6.     },
    7.     getShareVideoRtspUrl(item) {
    8.       this.videoRtspUrl = `/static/test.html?data=${item}`
    9.     },

    public/static/test.html内容

    1. <html>
    2. 	<head>
    3. 		<script src="js/webrtcstreamer.js">script>
    4. 		<script>
    5. 			// 接受从vue组件中传过来的参数
    6. 			let url = location.search; //这一条语句获取了包括问号开始到参数的最后，不包括前面的路径
    7. 			let params = url.substr(1); //去掉问号
    8. 			let pa = params.split("&");
    9. 			let s = new Object();
    10.              //  设置后端服务地址
    11.             let VIDEOURL = "http://172.18.127.7:8000" //服务视频webrtc
    12.  
    13. 			for (let i = 0; i < pa.length; i++) {
    14. 				s[pa[i].split("=")[0]] = unescape(pa[i].split("=")[1]);
    15. 			}
    16. 			console.log(s.data)
    17. 			window.onload = function() {
    18. 				webRtcServer = new WebRtcStreamer("video", VIDEOURL);
    19. 				webRtcServer.connect(s.data);
    20. 			}
    21. 			window.onbeforeunload = function() {
    22. 				webRtcServer.disconnect();
    23. 			}
    24. 		script>
    25. 	head>
    26. 	<body>
    27. 		<h1 value="da3">h1>
    28. 		<video id="video" style="width: 100%;height: 100%;" controls autoplay muted />
    29. 	body>
    30. html>
    31.

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

    1. var WebRtcStreamer = (function() {
    2.  
    3. /** 
    4.  * Interface with WebRTC-streamer API
    5.  * @constructor
    6.  * @param {string} videoElement - id of the video element tag
    7.  * @param {string} srvurl -  url of webrtc-streamer (default is current location)
    8. */
    9. var WebRtcStreamer = function WebRtcStreamer (videoElement, srvurl) {
    10. 	if (typeof videoElement === "string") {
    11. 		this.videoElement = document.getElementById(videoElement);
    12. 	} else {
    13. 		this.videoElement = videoElement;
    14. 	}
    15. 	this.srvurl           = srvurl || location.protocol+"//"+window.location.hostname+":"+window.location.port;
    16. 	this.pc               = null;    
    17.  
    18. 	this.pcOptions        = { "optional": [{"DtlsSrtpKeyAgreement": true} ] };
    19.  
    20. 	this.mediaConstraints = { offerToReceiveAudio: true, offerToReceiveVideo: true };
    21.  
    22. 	this.iceServers = null;
    23. 	this.earlyCandidates = [];
    24. }
    25.  
    26. WebRtcStreamer.prototype._handleHttpErrors = function (response) {
    27.     if (!response.ok) {
    28.         throw Error(response.statusText);
    29.     }
    30.     return response;
    31. }
    32.  
    33. /** 
    34.  * Connect a WebRTC Stream to videoElement 
    35.  * @param {string} videourl - id of WebRTC video stream
    36.  * @param {string} audiourl - id of WebRTC audio stream
    37.  * @param {string} options -  options of WebRTC call
    38.  * @param {string} stream  -  local stream to send
    39. */
    40. WebRtcStreamer.prototype.connect = function(videourl, audiourl, options, localstream) {
    41. 	this.disconnect();
    42. 	
    43. 	// getIceServers is not already received
    44. 	if (!this.iceServers) {
    45. 		console.log("Get IceServers");
    46. 		
    47. 		fetch(this.srvurl + "/api/getIceServers")
    48. 			.then(this._handleHttpErrors)
    49. 			.then( (response) => (response.json()) )
    50. 			.then( (response) =>  this.onReceiveGetIceServers.call(this,response, videourl, audiourl, options, localstream))
    51. 			.catch( (error) => this.onError("getIceServers " + error ))
    52. 				
    53. 	} else {
    54. 		this.onReceiveGetIceServers(this.iceServers, videourl, audiourl, options, localstream);
    55. 	}
    56. }
    57.  
    58. /** 
    59.  * Disconnect a WebRTC Stream and clear videoElement source
    60. */
    61. WebRtcStreamer.prototype.disconnect = function() {		
    62. 	if (this.videoElement) {
    63. 		this.videoElement.src = "";
    64. 	}
    65. 	if (this.pc) {
    66. 		fetch(this.srvurl + "/api/hangup?peerid="+this.pc.peerid)
    67. 			.then(this._handleHttpErrors)
    68. 			.catch( (error) => this.onError("hangup " + error ))
    69.  
    70. 		
    71. 		try {
    72. 			this.pc.close();
    73. 		}
    74. 		catch (e) {
    75. 			console.log ("Failure close peer connection:" + e);
    76. 		}
    77. 		this.pc = null;
    78. 	}
    79. }    
    80.  
    81. /*
    82. * GetIceServers callback
    83. */
    84. WebRtcStreamer.prototype.onReceiveGetIceServers = function(iceServers, videourl, audiourl, options, stream) {
    85. 	this.iceServers       = iceServers;
    86. 	this.pcConfig         = iceServers || {"iceServers": [] };
    87. 	try {            
    88. 		this.createPeerConnection();
    89.  
    90. 		var callurl = this.srvurl + "/api/call?peerid="+ this.pc.peerid+"&url="+encodeURIComponent(videourl);
    91. 		if (audiourl) {
    92. 			callurl += "&audiourl="+encodeURIComponent(audiourl);
    93. 		}
    94. 		if (options) {
    95. 			callurl += "&options="+encodeURIComponent(options);
    96. 		}
    97. 		
    98. 		if (stream) {
    99. 			this.pc.addStream(stream);
    100. 		}
    101.  
    102.                 // clear early candidates
    103. 		this.earlyCandidates.length = 0;
    104. 		
    105. 		// create Offer
    106. 		var bind = this;
    107. 		this.pc.createOffer(this.mediaConstraints).then(function(sessionDescription) {
    108. 			console.log("Create offer:" + JSON.stringify(sessionDescription));
    109. 			
    110. 			bind.pc.setLocalDescription(sessionDescription
    111. 				, function() {
    112. 					fetch(callurl, { method: "POST", body: JSON.stringify(sessionDescription) })
    113. 						.then(bind._handleHttpErrors)
    114. 						.then( (response) => (response.json()) )
    115. 						.catch( (error) => bind.onError("call " + error ))
    116. 						.then( (response) =>  bind.onReceiveCall.call(bind,response) )
    117. 						.catch( (error) => bind.onError("call " + error ))
    118. 				
    119. 				}
    120. 				, function(error) {
    121. 					console.log ("setLocalDescription error:" + JSON.stringify(error)); 
    122. 				} );
    123. 			
    124. 		}, function(error) { 
    125. 			alert("Create offer error:" + JSON.stringify(error));
    126. 		});
    127.  
    128. 	} catch (e) {
    129. 		this.disconnect();
    130. 		alert("connect error: " + e);
    131. 	}	    
    132. }
    133.  
    134.  
    135. WebRtcStreamer.prototype.getIceCandidate = function() {
    136. 	fetch(this.srvurl + "/api/getIceCandidate?peerid=" + this.pc.peerid)
    137. 		.then(this._handleHttpErrors)
    138. 		.then( (response) => (response.json()) )
    139. 		.then( (response) =>  this.onReceiveCandidate.call(this, response))
    140. 		.catch( (error) => bind.onError("getIceCandidate " + error ))
    141. }
    142. 					
    143. /*
    144. * create RTCPeerConnection 
    145. */
    146. WebRtcStreamer.prototype.createPeerConnection = function() {
    147. 	console.log("createPeerConnection  config: " + JSON.stringify(this.pcConfig) + " option:"+  JSON.stringify(this.pcOptions));
    148. 	this.pc = new RTCPeerConnection(this.pcConfig, this.pcOptions);
    149. 	var pc = this.pc;
    150. 	pc.peerid = Math.random();		
    151. 	
    152. 	var bind = this;
    153. 	pc.onicecandidate = function(evt) { bind.onIceCandidate.call(bind, evt); };
    154. 	pc.onaddstream    = function(evt) { bind.onAddStream.call(bind,evt); };
    155. 	pc.oniceconnectionstatechange = function(evt) {  
    156. 		console.log("oniceconnectionstatechange  state: " + pc.iceConnectionState);
    157. 		if (bind.videoElement) {
    158. 			if (pc.iceConnectionState === "connected") {
    159. 				bind.videoElement.style.opacity = "1.0";
    160. 			}			
    161. 			else if (pc.iceConnectionState === "disconnected") {
    162. 				bind.videoElement.style.opacity = "0.25";
    163. 			}			
    164. 			else if ( (pc.iceConnectionState === "failed") || (pc.iceConnectionState === "closed") )  {
    165. 				bind.videoElement.style.opacity = "0.5";
    166. 			} else if (pc.iceConnectionState === "new") {
    167. 				bind.getIceCandidate.call(bind)
    168. 			}
    169. 		}
    170. 	}
    171. 	pc.ondatachannel = function(evt) {  
    172. 		console.log("remote datachannel created:"+JSON.stringify(evt));
    173. 		
    174. 		evt.channel.onopen = function () {
    175. 			console.log("remote datachannel open");
    176. 			this.send("remote channel openned");
    177. 		}
    178. 		evt.channel.onmessage = function (event) {
    179. 			console.log("remote datachannel recv:"+JSON.stringify(event.data));
    180. 		}
    181. 	}
    182. 	pc.onicegatheringstatechange = function() {
    183. 		if (pc.iceGatheringState === "complete") {
    184. 			const recvs = pc.getReceivers();
    185. 		
    186. 			recvs.forEach((recv) => {
    187. 			  if (recv.track && recv.track.kind === "video") {
    188. 				console.log("codecs:" + JSON.stringify(recv.getParameters().codecs))
    189. 			  }
    190. 			});
    191. 		  }
    192. 	}
    193.  
    194. 	try {
    195. 		var dataChannel = pc.createDataChannel("ClientDataChannel");
    196. 		dataChannel.onopen = function() {
    197. 			console.log("local datachannel open");
    198. 			this.send("local channel openned");
    199. 		}
    200. 		dataChannel.onmessage = function(evt) {
    201. 			console.log("local datachannel recv:"+JSON.stringify(evt.data));
    202. 		}
    203. 	} catch (e) {
    204. 		console.log("Cannor create datachannel error: " + e);
    205. 	}	
    206. 	
    207. 	console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.pcConfig) + "option:"+  JSON.stringify(this.pcOptions) );
    208. 	return pc;
    209. }
    210.  
    211.  
    212. /*
    213. * RTCPeerConnection IceCandidate callback
    214. */
    215. WebRtcStreamer.prototype.onIceCandidate = function (event) {
    216. 	if (event.candidate) {
    217. 		if (this.pc.currentRemoteDescription)  {
    218. 			this.addIceCandidate(this.pc.peerid, event.candidate);					
    219. 		} else {
    220. 			this.earlyCandidates.push(event.candidate);
    221. 		}
    222. 	} 
    223. 	else {
    224. 		console.log("End of candidates.");
    225. 	}
    226. }
    227.  
    228.  
    229. WebRtcStreamer.prototype.addIceCandidate = function(peerid, candidate) {
    230. 	fetch(this.srvurl + "/api/addIceCandidate?peerid="+peerid, { method: "POST", body: JSON.stringify(candidate) })
    231. 		.then(this._handleHttpErrors)
    232. 		.then( (response) => (response.json()) )
    233. 		.then( (response) =>  {console.log("addIceCandidate ok:" + response)})
    234. 		.catch( (error) => this.onError("addIceCandidate " + error ))
    235. }
    236. 				
    237. /*
    238. * RTCPeerConnection AddTrack callback
    239. */
    240. WebRtcStreamer.prototype.onAddStream = function(event) {
    241. 	console.log("Remote track added:" +  JSON.stringify(event));
    242. 	
    243. 	this.videoElement.srcObject = event.stream;
    244. 	var promise = this.videoElement.play();
    245. 	if (promise !== undefined) {
    246. 	  var bind = this;
    247. 	  promise.catch(function(error) {
    248. 		console.warn("error:"+error);
    249. 		bind.videoElement.setAttribute("controls", true);
    250. 	  });
    251. 	}
    252. }
    253. 		
    254. /*
    255. * AJAX /call callback
    256. */
    257. WebRtcStreamer.prototype.onReceiveCall = function(dataJson) {
    258. 	var bind = this;
    259. 	console.log("offer: " + JSON.stringify(dataJson));
    260. 	var descr = new RTCSessionDescription(dataJson);
    261. 	this.pc.setRemoteDescription(descr
    262. 		, function()      { 
    263. 			console.log ("setRemoteDescription ok");
    264. 			while (bind.earlyCandidates.length) {
    265. 				var candidate = bind.earlyCandidates.shift();
    266. 				bind.addIceCandidate.call(bind, bind.pc.peerid, candidate);				
    267. 			}
    268. 		
    269. 			bind.getIceCandidate.call(bind)
    270. 		}
    271. 		, function(error) { 
    272. 			console.log ("setRemoteDescription error:" + JSON.stringify(error)); 
    273. 		});
    274. }	
    275.  
    276. /*
    277. * AJAX /getIceCandidate callback
    278. */
    279. WebRtcStreamer.prototype.onReceiveCandidate = function(dataJson) {
    280. 	console.log("candidate: " + JSON.stringify(dataJson));
    281. 	if (dataJson) {
    282. 		for (var i=0; ilength; i++) {
    283. 			var candidate = new RTCIceCandidate(dataJson[i]);
    284. 			
    285. 			console.log("Adding ICE candidate :" + JSON.stringify(candidate) );
    286. 			this.pc.addIceCandidate(candidate
    287. 				, function()      { console.log ("addIceCandidate OK"); }
    288. 				, function(error) { console.log ("addIceCandidate error:" + JSON.stringify(error)); } );
    289. 		}
    290. 		this.pc.addIceCandidate();
    291. 	}
    292. }
    293.  
    294.  
    295. /*
    296. * AJAX callback for Error
    297. */
    298. WebRtcStreamer.prototype.onError = function(status) {
    299. 	console.log("onError:" + status);
    300. }
    301.  
    302. return WebRtcStreamer;
    303. })();
    304.  
    305. if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
    306. 	module.exports = WebRtcStreamer;
    307. else
    308. 	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"就搞定
    1. <html>
    2. 	<head>
    3. 		<script src="js/webrtcstreamer.js">script>
    4. 		<script>
    5. 			// 接受从vue组件中传过来的参数
    6. 			let url = location.search; //这一条语句获取了包括问号开始到参数的最后，不包括前面的路径
    7. 			let params = url.substr(1); //去掉问号
    8. 			let pa = params.split("&");
    9. 			let s = new Object();
    10.              //  设置后端服务地址
    11.             let VIDEOURL = "http://172.18.127.7:8000" //服务视频webrtc
    12.  
    13. 			for (let i = 0; i < pa.length; i++) {
    14. 				s[pa[i].split("=")[0]] = unescape(pa[i].split("=")[1]);
    15. 			}
    16. 			console.log(s.data)
    17. 			window.onload = function() {
    18. 				webRtcServer = new WebRtcStreamer("video", VIDEOURL);
    19. 				webRtcServer.connect(s.data,"","rtptransport=tcp");
    20. 			}
    21. 			window.onbeforeunload = function() {
    22. 				webRtcServer.disconnect();
    23. 			}
    24. 		script>
    25. 	head>
    26. 	<body>
    27. 		<h1 value="da3">h1>
    28. 		<video id="video" style="width: 100%;height: 100%;" controls autoplay muted />
    29. 	body>
    30. html>
    31.

  • 相关阅读:
    【leetcode常见面试题】1. 两数之和
    简单好用的CHM文件阅读器 CHM Viewer Star最新 for mac
    perl对目录的操作
    linux本地yum源配置
    Centos 8 安装 nginx
    为什么IDEA不推荐你使用@Autowired ？
    [SWPUCTF 2023 秋季新生赛]——Web方向 详细Writeup
    WordPress初学者入门教程-附录一搜索引擎优化(SEO)
    AIGC|从革新内容创作到社会共识建立，迎接全新技术维度
    DSPE-PEG-Silane，磷脂-聚乙二醇-硅烷，修饰二氧化硅颗粒用科研试剂
  • 原文地址：https://blog.csdn.net/killerdoubie/article/details/133884070