修改推流方案

screenH5/home238wss.html

@@ -357,7 +357,7 @@
 			// var strhost = Number(data.clientType) ===2? "wss://"+ urlss +"/shareWebSocket?clientType=2&username="+data.username+"&userCardId="+data.userCardId+"&ip="+data.ip : Number(data.clientType) ===3?"wss://"+ urlss +"/authVideoWebSocket?clientType=3&username="+data.username+"&userCardId="+data.userCardId :"wss://"+ urlss +"/videoWebSocket?clientType="+ data.clientType +"&cardIp="+data.cardIp  +"&port="+ data.port +"&sn="+data.sn;
 			// var strhost = "wss://" + urlss + "/videoWebSocket?clientType=" + data.clientType + "&cardIp=" + data.cardIp +
 			// 	"&port=" + data.port + "&sn=" + data.sn;
-			var strhost="ws://192.168.11.238:8080";
+			var strhost="ws://127.0.0.1:8080";
 			// var strhost="wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005";
 			var client = new WebSocket(strhost);
              console.log('wsssss==============', client)

screenH5/home66Ws.html

@@ -380,7 +380,7 @@
 
 
 			function onMessage(evt) {
-				console.log("onMessage==============",evt);
+				// console.log("onMessage==============",evt);
 				var messageData = new Uint8Array(evt.data);
 
 				player.decode(messageData);

screenH5/homeNew.html

@@ -225,7 +225,7 @@
 				<div class="swiper-wrapper">
 					<div class="swiper-slide" v-for="(item,index) in homeList" :key="item.id" :class="[index==0 ? 'swiper-slide-active' : '' , index==1 ? 'swiper-slide-next' : '']">
 						<div class="canvas" style="z-index: 1;">
-							<div style="height: 100%;" class="wine">
+							<div style="height: 100%;" class="wine" :id="'wine'+index">
 							</div>
 							<div class="camvas-head" style="z-index: 5555;">
 								<div class="tophead">
@@ -330,10 +330,13 @@
 					message: 'Hello Vue!',
 					homeList: [],
 					urlData: {},
-					rbdData: {}
+					rbdData: {},
+					activeIndexData: ""
 				},
 				mounted() {
-					this.gethomeList();
+					this.$nextTick(function() {
+						this.gethomeList();
+					});
 					var swiper = new Swiper('.swiper-container', {
 						observer: true, //修改swiper自己或子元素时，自动初始化swiper 
 						observeParents: true, //修改swiper的父元素时，自动初始化swiper
@@ -342,19 +345,31 @@
 							prevEl: '.swiper-button-prev',
 						},
 						on: {
-							onSlideChangeStart: function(swiper) {
-								alert(swiper.activeIndex);
+							transitionStart: function() {
+								console.log("下标啊", this.activeIndex)
+								this.activeIndexData = this.activeIndex;
 							},
-							onSlideChangeEnd: function(swiper) {
-								console.log("下标啊", swiper)
+							slideChangeTransitionStart: function() {
+								console.log("下标啊", this.activeIndex)
+								this.activeIndexData = this.activeIndex;
 							},
-							onTransitionStart: function(swiper, activeIndex) {
-								console.log("下标啊", swiper, activeIndex)
+							slideChangeTransitionEnd: function() {
+								console.log("下标啊", this.activeIndex)
+								this.activeIndexData = this.activeIndex;
 							},
-							onSlideChangeEnd: function(swiperHere) {
-								var txt = $('.swiper-slide-active').html();
-								console.log("打印索引值", txt)
-							}
+							// slideChangeStart: function() {
+							// 	alert(this.activeIndext);
+							// },
+							// slideChangeEnd: function() {
+							// 	console.log("下标啊", this)
+							// },
+							// ransitionStart: function(activeIndex) {
+							// 	console.log("下标啊", this, activeIndex)
+							// },
+							// slideChangeEnd: function(swiperHere) {
+							// 	var txt = $('.swiper-slide-active').html();
+							// 	console.log("打印索引值", txt)
+							// }
 						}
 
 					});
@@ -404,12 +419,9 @@
 					},
 					swiperNext(data) {
 						let activeIndex = $('.swiper-slide-active').index() + 1;
-						console.log("下标啊下标", this.homeList[activeIndex]);
-						var domnext = $('.swiper-slide-active').next().children().find(".wine");
-						domnext.attr("id", "wine");
-						// console.log("打印索引值", domnext)
-						var domprev = $('.swiper-slide-next').prev().children().find(".wine");
-						domprev.removeAttr("id");
+						var id = "#wine" + $('.swiper-slide-active').index();
+						var domprev = $(id);
+						console.log("下标id======", id);
 						domprev.empty();
 						let rbdData = {
 							"userCardId": this.homeList[activeIndex].id,
@@ -418,68 +430,75 @@
 						var baseUrl = "http://192.168.31.20";
 						var urlss = 'test.androidscloud.com'
 						let that = this;
-						
-						setTimeout(() => {
-							$.ajax({
-								url: baseUrl + "/api/storage/v1/cardStatus/getRbd",
-								data: JSON.stringify(rbdData),
-								type: 'post',
-								dataType: 'json',
-								async: false,
-								contentType: "application/json;charset=UTF-8",
-								headers: {
-									'token': tokens.substring(6, tokens.length),
-									"Authorization": tokens.substring(6, tokens.length)
-								},
-								success: function(data) {
-									
-									that.urlData = data.data;
-									console.log("挂载安卓卡成功",that.urlData);
-									//                       
-								}
-							})
-							$(".swiper-wrapper .swiper-slide-active .wine").attr('id', 'wine');
-							var player = new Player({
-								size: {
-									width: 768,
-									height: 1024
-								}
-							});
-
-							var secanv = document.getElementById("wine");
-							secanv.appendChild(player.canvas);
-
-							var strhost = "wss://" + urlss + "/videoWebSocket?clientType=1&cardIp=" +
-								that.urlData.exIp +
-								"&port=" + that.urlData.exPort + "&sn=" + that.urlData.sn;
-							var client = new WebSocket(strhost);
-							console.log('wsssss==============', client)
-
-							client.binaryType = 'arraybuffer';
-							// debugger
-							client.onopen = function(evt) {
-								// onOpen(evt) 
-								console.log("开始链接==============", evt);
-							};
-							client.onclose = function(evt) {
-								// onClose(evt) 
-							};
-							client.onmessage = function(evt) {
-								// onMessage(evt)
-								console.log("onMessage==============", evt);
-								var messageData = new Uint8Array(evt.data);
-
-								player.decode(messageData);
-							};
-							client.onerror = function(evt) {
-								// onError(evt) 
-							};
-						}, 5)
+						var player = new Player({
+							size: {
+								width: 768,
+								height: 1024
+							}
+						});
+						var id = 'wine' + activeIndex;
+						var secanv = document.getElementById(id);
+						secanv.appendChild(player.canvas);
+
+
+						// setTimeout(() => {
+						$.ajax({
+							url: baseUrl + "/api/storage/v1/cardStatus/getRbd",
+							data: JSON.stringify(rbdData),
+							type: 'post',
+							dataType: 'json',
+							async: false,
+							contentType: "application/json;charset=UTF-8",
+							headers: {
+								'token': tokens.substring(6, tokens.length),
+								"Authorization": tokens.substring(6, tokens.length)
+							},
+							success: function(data) {
+
+								that.urlData = data.data;
+								console.log("挂载安卓卡成功", that.urlData);
+								//                       
+							}
+						})
+
+
+
+						// var strhost = "wss://" + urlss + "/videoWebSocket?clientType=1&cardIp=" +
+						// 	that.urlData.exIp +
+						// 	"&port=" + that.urlData.exPort + "&sn=" + that.urlData.sn;
+						var strhost = "ws://192.168.11.66:9101";
+						var client = new WebSocket(strhost);
+						console.log('wsssss==============', client)
+
+						client.binaryType = 'arraybuffer';
+						// debugger
+						client.onopen = function(evt) {
+							// onOpen(evt) 
+							console.log("开始链接==============", evt);
+						};
+						client.onclose = function(evt) {
+							// onClose(evt) 
+						};
+						client.onmessage = function(evt) {
+							// onMessage(evt)
+							// console.log("onMessage==============", evt);
+							var messageData = new Uint8Array(evt.data);
+
+							player.decode(messageData);
+						};
+						client.onerror = function(evt) {
+							// onError(evt) 
+						};
+						// }, 1)
+
 
 					},
 					swiperPrev() {
 						let activeIndex = $('.swiper-slide-active').index() - 1;
-						console.log("下标啊下标", this.homeList[activeIndex]);
+						var id = "#wine" + $('.swiper-slide-active').index();
+						var domprev = $(id);
+						console.log("下标id======", id);
+						domprev.empty();
 						let rbdData = {
 							"userCardId": this.homeList[activeIndex].id,
 							"deviceStatus": 1,
@@ -487,65 +506,61 @@
 						var baseUrl = "http://192.168.31.20";
 						var urlss = 'test.androidscloud.com'
 						let that = this;
+						var player = new Player({
+							size: {
+								width: 768,
+								height: 1024
+							}
+						});
+						var id = 'wine' + activeIndex;
+						var secanv = document.getElementById(id);
+						secanv.appendChild(player.canvas);
 
-						var domnext = $('.swiper-slide-prev').next().children().find(".wine");
-						domnext.removeAttr("id");
-						// console.log("打印索引值", domnext)
-						var domprev = $('.swiper-slide-active').prev().children().find(".wine");
-						domprev.attr("id", "wine");
-						domnext.empty();
-						setTimeout(() => {
-							$.ajax({
-								url: baseUrl + "/api/storage/v1/cardStatus/getRbd",
-								data: JSON.stringify(rbdData),
-								type: 'post',
-								dataType: 'json',
-								async: false,
-								contentType: "application/json;charset=UTF-8",
-								headers: {
-									'token': tokens.substring(6, tokens.length),
-									"Authorization": tokens.substring(6, tokens.length)
-								},
-								success: function(data) {
-									that.urlData = data.data;
-									console.log("挂载安卓卡成功",that.urlData);
-									//                       
-								}
-							})
-							$(".swiper-wrapper .swiper-slide-active .wine").attr('id', 'wine');
-							var player = new Player({
-								size: {
-									width: 768,
-									height: 1024
-								}
-							});
-							var secanv = document.getElementById("wine");
-							secanv.appendChild(player.canvas);
-							var strhost = "wss://" + urlss + "/videoWebSocket?clientType=1&cardIp=" +
-								that.urlData.exIp +
-								"&port=" + that.urlData.exPort + "&sn=" + that.urlData.sn;
-							var client = new WebSocket(strhost);
-							console.log('wsssss==============', client)
-
-							client.binaryType = 'arraybuffer';
-							// debugger
-							client.onopen = function(evt) {
-								console.log("开始链接==============", evt);
-							};
-							client.onclose = function(evt) {
-								// onClose(evt) 
-							};
-							client.onmessage = function(evt) {
-								// onMessage(evt)
-								console.log("onMessage==============", evt);
-								var messageData = new Uint8Array(evt.data);
-
-								player.decode(messageData);
-							};
-							client.onerror = function(evt) {
-								// onError(evt) 
-							};
-						}, 5)
+						// setTimeout(() => {
+						$.ajax({
+							url: baseUrl + "/api/storage/v1/cardStatus/getRbd",
+							data: JSON.stringify(rbdData),
+							type: 'post',
+							dataType: 'json',
+							async: false,
+							contentType: "application/json;charset=UTF-8",
+							headers: {
+								'token': tokens.substring(6, tokens.length),
+								"Authorization": tokens.substring(6, tokens.length)
+							},
+							success: function(data) {
+								that.urlData = data.data;
+								console.log("挂载安卓卡成功", that.urlData);
+								//                       
+							}
+						})
+
+						// var strhost = "wss://" + urlss + "/videoWebSocket?clientType=1&cardIp=" +
+						// 	that.urlData.exIp +
+						// 	"&port=" + that.urlData.exPort + "&sn=" + that.urlData.sn;
+						var strhost = "ws://192.168.11.66:9101";
+						var client = new WebSocket(strhost);
+						console.log('wsssss==============', client)
+
+						client.binaryType = 'arraybuffer';
+						// debugger
+						client.onopen = function(evt) {
+							console.log("开始链接==============", evt);
+						};
+						client.onclose = function(evt) {
+							// onClose(evt) 
+						};
+						client.onmessage = function(evt) {
+							// onMessage(evt)
+							// console.log("onMessage==============", evt);
+							var messageData = new Uint8Array(evt.data);
+
+							player.decode(messageData);
+						};
+						client.onerror = function(evt) {
+							// onError(evt) 
+						};
+						// }, 1)
 
 					},
 					gethomeList() {
@@ -622,8 +637,6 @@
 						this.urlData = data;
 						let that = this;
 
-
-
 						$.ajax({
 							url: baseUrl + "/api/user/v1/client/disk/info",
 							data: {},
@@ -645,12 +658,14 @@
 										"deviceStatus": 1,
 									};
 
+									let activeIndex = $('.swiper-slide-active').index();
 
 									// let that = this;
 									setTimeout(() => {
 										$.ajax({
 											url: baseUrl + "/api/storage/v1/cardStatus/getRbd",
 											data: JSON.stringify(rbdData),
+											// data:rbdData,
 											type: 'post',
 											dataType: 'json',
 											contentType: "application/json;charset=UTF-8",
@@ -661,24 +676,28 @@
 											},
 											success: function(data) {
 												that.urlData = data.data;
-												console.log("挂载安卓卡成功",that.urlData);
+												console.log("挂载安卓卡成功", that.urlData);
 												//                       
 											}
 										})
 										console.log("that.urlDatathat.urlDatathat.urlDatathat.urlData", that.urlData);
-										$(".swiper-wrapper .swiper-slide-active .wine").attr('id', 'wine');
 										var player = new Player({
 											size: {
 												width: 768,
 												height: 1024
 											}
 										});
-										var secanv = document.getElementById("wine");
+										var id = 'wine' + activeIndex;
+										console.log("首页=====", id);
+										var secanv = document.getElementById(id);
 										secanv.appendChild(player.canvas);
+										console.log("首页=====", secanv);
+
 										// var strhost = "wss://" + urlss + "/videoWebSocket?clientType=1&cardIp=" +
 										// 	that.urlData.exIp +
 										// 	"&port=" + that.urlData.exPort + "&sn=" + that.urlData.sn;
-										var strhost="ws://192.168.11.66:9101";
+										var strhost = "ws://192.168.11.66:9101";
+										// var strhost="ws://"+that.urlData.exIp+":"+that.urlData.exPort
 										var client = new WebSocket(strhost);
 										console.log('wsssss==============', client)
 
@@ -701,7 +720,7 @@
 										client.onerror = function(evt) {
 											// onError(evt) 
 										};
-									}, 5)
+									}, 1)
 
 
 								} else {