4.28

src/components/UeVideo.vue

@@ -3,6 +3,7 @@
     <i id="overlayButton" style="display: none;" ></i>
     <i id="qualityStatus" style="display: none;"></i>
     <div id="stats" style="display: none;" ></div>
+    <div id="connecting">连接中...</div>
   </div>
 </template>
 
@@ -27,10 +28,9 @@ export default {
 
       videoInstance = initLoad({
         context,
-        // serverUrl: 'http://10.1.161.67:8080/',
         serverUrl: 'http://172.16.58.195:8080/',
-        autoConnection: false,
-        showPlayOverlay: true,
+        autoConnection: true,
+        showPlayOverlay: false,
         qualityControl: true,
         inputOptions: {
           controlScheme: 1, // 鼠标：0是锁定，1是滑过
@@ -124,5 +124,14 @@ export default {
     margin-top: 15vh;
   }
 
+  #connecting {
+    position: absolute;
+    top: 49vh;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 16px;
+    color: #ccc;
+  }
+
 }
 </style>

src/webRtcVideo.js

@@ -6,25 +6,20 @@ import webRtcPlayer from './webRtcPlayer'
 
 //添加一些变量
 function parserOptions(options) {
-  /* //vue上下文
-  vueContext = options.context;
+  //vue上下文
+  // vueContext = options.context;
   //服务端的地址，用于连接服务端
   serverUrl = options.serverUrl;
   //是否启动的时候自动连接;
-  autoConnection = options.autoConnection;
+  connect_on_load = options.autoConnection;
   shouldShowPlayOverlay = options.showPlayOverlay;
   //actualSize = options.actualSize;
   //qualityControl = options.qualityControl;
-  matchViewportResolution = options.matchViewportResolution; */
+  // matchViewportResolution = options.matchViewportResolution;
 
-  inputOptions.controlScheme =
-    options.inputOptions?.controlScheme ?? inputOptions.controlScheme;
-  inputOptions.fakeMouseWithTouches =
-    options.inputOptions?.fakeMouseWithTouches ??
-    inputOptions.fakeMouseWithTouches;
-  inputOptions.suppressBrowserKeys =
-    options.inputOptions?.suppressBrowserKeys ??
-    inputOptions.suppressBrowserKeys;
+  inputOptions.controlScheme = options.inputOptions?.controlScheme ?? inputOptions.controlScheme;
+  inputOptions.fakeMouseWithTouches = options.inputOptions?.fakeMouseWithTouches ?? inputOptions.fakeMouseWithTouches;
+  inputOptions.suppressBrowserKeys = options.inputOptions?.suppressBrowserKeys ?? inputOptions.suppressBrowserKeys;
 
   // 禁止操作赋值
   // disableEvents = {
@@ -37,6 +32,7 @@ function parserOptions(options) {
     ...afk,
     ...options.afk,
   };
+	console.log('连接地址：'+serverUrl)
 }
 
 //导出初始化函数
@@ -55,7 +51,7 @@ export const callCommand = emitCommand;
 
 export const callUIInteraction = emitUIInteraction;
 
-
+var serverUrl
 var webRtcPlayerObj = null;
 var print_stats = false;
 var print_inputs = false;
@@ -293,8 +289,6 @@ function showConnectOverlay() {
 	startText.innerHTML = 'Click to start';
 	startText.style.marginTop = '50vh'
 
-
-
 	setOverlay('clickableState', startText, event => {
 		connect();
 		startAfkWarningTimer();
@@ -393,11 +387,13 @@ function resetAfkWarningTimer() {
 function createWebRtcOffer() {
 	if (webRtcPlayerObj) {
 		//console.log('Creating offer');
-		showTextOverlay('Starting connection to server, please wait');
+		// showTextOverlay('Starting connection to server, please wait');
+		console.log('Starting connection to server, please wait')
 		webRtcPlayerObj.createOffer();
 	} else {
 		//console.log('WebRTC player not setup, cannot create offer');
-		showTextOverlay('Unable to setup video');
+		// showTextOverlay('Unable to setup video');
+		console.log('Unable to setup video')
 	}
 }
 
@@ -459,7 +455,8 @@ function setupWebRtcPlayer(htmlElement, config) {
 
 	webRtcPlayerObj.onDataChannelConnected = function () {
 		if (ws && ws.readyState === WS_OPEN_STATE) {
-			showTextOverlay('WebRTC connected, waiting for video');
+			// showTextOverlay('WebRTC connected, waiting for video');
+			console.log('WebRTC connected, waiting for video')
 		}
 	};
 
@@ -1596,7 +1593,7 @@ function start() {
 	}
 
 	if (!connect_on_load || is_reconnection) {
-		showConnectOverlay();
+		// showConnectOverlay();
 		invalidateFreezeFrameOverlay();
 		shouldShowPlayOverlay = true;
 		resizePlayerStyle();
@@ -1614,6 +1611,7 @@ function updateKickButton(playersCount) {
 }
 
 function connect() {
+	document.getElementById('connecting').style.display = 'none'
 	"use strict";
 
 	window.WebSocket = window.WebSocket || window.MozWebSocket;
@@ -1625,10 +1623,7 @@ function connect() {
 
 	// ws = new WebSocket(window.location.href.replace('http://', 'ws://').replace('https://', 'wss://'));
 
-	// ws = new WebSocket('ws://10.1.161.68:8080');
-	ws = new WebSocket('ws://172.16.58.195:8080');
-	// ws = new WebSocket('ws://172.16.58.195:8080');
-	// ws = new WebSocket('ws://10.121.41.21:8080');
+	ws = new WebSocket(serverUrl.replace('http://', 'ws://'));
 
 	ws.onmessage = function (event) {
 		//console.log(`<- SS: ${event.data}`);
@@ -1647,11 +1642,12 @@ function connect() {
 	};
 
 	ws.onerror = function (event) {
-		//console.log(`WS error: ${JSON.stringify(event)}`);
+		console.log(`WS error: ${JSON.stringify(event)}`);
 	};
 
 	ws.onclose = function (event) {
-		//console.log(`WS closed: ${JSON.stringify(event.code)} - ${event.reason}`);
+		document.getElementById('connecting').style.display = 'block'
+		console.log(`WS closed: ${JSON.stringify(event.code)} - ${event.reason}`);
 		ws = undefined;
 		is_reconnection = true;
 
@@ -1663,8 +1659,11 @@ function connect() {
 			webRtcPlayerObj = undefined;
 		}
 
-		showTextOverlay(`Disconnected: ${event.reason}`);
-		var reclickToStart = setTimeout(start, 4000);
+		// showTextOverlay(`Disconnected: ${event.reason}`);
+		setTimeout(() => {
+			connect()
+		}, 2000);
+		// var reclickToStart = setTimeout(start, 4000);
 	};
 }