diff --git a/web/src/components/TaskModal.vue b/web/src/components/TaskModal.vue
index f9a88a0..0fe7f3e 100644
--- a/web/src/components/TaskModal.vue
+++ b/web/src/components/TaskModal.vue
@@ -8,7 +8,7 @@
       <div class="search-area">
         <div class="search-item">
           <label for="year">年度:</label>
-          <input type="number" v-model="year" class="year-input"/>
+          <input type="number" v-model="year" class="year-input" @change="handleChangeYear" />
         </div>
         <div class="search-item">
           <label for="taskName">任务名称:</label>
@@ -90,13 +90,13 @@ export default {
         selectedTasks: this.tasks
       };
       console.log('Confirmed:', data);
-      
+
       try {
         webrtc.webrtc.emitCommand("TaskSelected", data);
       } catch (error) {
         console.error('Error in emitCommand:', error);
       }
-      
+
       this.closeModal();
     },
     initData() {
@@ -113,12 +113,10 @@ export default {
         const taskNameMatch = !this.taskName || task.paramModel.includes(this.taskName);
         return yearMatch && taskNameMatch;
       });
-      
+
       try {
         const data = {
-          command: "SearchTask",
-          year: this.year,
-          taskName: this.taskName
+          command: "LoadScenario"
         }
         webrtc.webrtc.emitUIInter(data);
       } catch (error) {
@@ -129,13 +127,25 @@ export default {
       this.year = new Date().getFullYear();
       this.taskName = '';
       this.tasks = [...this.originalTasks];
-      
+
       try {
         webrtc.webrtc.emitCommand("ResetTask", {});
       } catch (error) {
         console.error('Error in emitCommand:', error);
       }
     },
+    handleChangeYear() {
+      const data = {
+        command: "LoadScenarioTask",
+        year: this.year
+      };
+
+      try {
+        webrtc.webrtc.emitUIInter(data);
+      } catch (error) {
+        console.error('Error in emitCommand:', error);
+      }
+    },
   },
   created() {
     this.initData();
@@ -216,7 +226,8 @@ h2 {
   width: 100px;
 }
 
-input, select {
+input,
+select {
   background-color: #1e2c42;
   border: 1px solid #3a4b66;
   color: white;
@@ -238,7 +249,8 @@ table {
   background-color: #1e2c42;
 }
 
-th, td {
+th,
+td {
   border: 1px solid #3a4b66;
   padding: 4px;
   text-align: center;
@@ -289,7 +301,8 @@ button {
   line-height: 16px;
 }
 
-.search-btn, .reset-btn {
+.search-btn,
+.reset-btn {
   padding: 2px 8px;
   height: 20px;
   line-height: 16px;
diff --git a/web/src/webrtc.js b/web/src/webrtc.js
index d4952cd..9d00f2b 100644
--- a/web/src/webrtc.js
+++ b/web/src/webrtc.js
@@ -32,7 +32,7 @@ let freezeFrameOverlay = null;
 let shouldShowPlayOverlay = true;
 // A freeze frame is a still JPEG image shown instead of the video.
 let freezeFrame = {
-	receiving: false,
+    receiving: false,
     size: 0,
     jpeg: undefined,
     height: 0,
@@ -42,7 +42,7 @@ let freezeFrame = {
 
 // Optionally detect if the user is not interacting (AFK) and disconnect them.
 let afk = {
-	enabled: false,   // Set to true to enable the AFK system.
+    enabled: false,   // Set to true to enable the AFK system.
     warnTimeout: 120,   // The time to elapse before warning the user they are inactive.
     closeTimeout: 10,   // The time after the warning when we disconnect the user.
 
@@ -85,7 +85,7 @@ function updateStatus() {
         let controller = controllers[j];
         let currentState = controller.currentState;
         let prevState = controller.prevState;
-		// Iterate over buttons
+        // Iterate over buttons
         for (let i = 0; i < currentState.buttons.length; i++) {
             let currButton = currentState.buttons[i];
             let prevButton = prevState.buttons[i];
@@ -173,7 +173,7 @@ function emitControllerAxisMove(controllerIndex, axisIndex, analogValue) {
 function gamepadConnectHandler(e) {
     console.log("Gamepad connect handler");
     gamepad = e.gamepad;
-	controllers[gamepad.index] = {};
+    controllers[gamepad.index] = {};
     controllers[gamepad.index].currentState = gamepad;
     controllers[gamepad.index].prevState = gamepad;
     console.log("gamepad: " + gamepad.id + " connected");
@@ -307,7 +307,7 @@ function sendStartLatencyTest() {
         return;
     }
 
-    let onTestStarted = function(StartTimeMs) {
+    let onTestStarted = function (StartTimeMs) {
         let descriptor = {
             StartTime: StartTimeMs
         };
@@ -372,8 +372,8 @@ function showTextOverlay(text) {
 
 function playVideoStream() {
     if (webRtcPlayerObj && webRtcPlayerObj.video) {
-        webRtcPlayerObj.video.muted=true;
-        webRtcPlayerObj.video.play().catch(function(onRejectedReason){
+        webRtcPlayerObj.video.muted = true;
+        webRtcPlayerObj.video.play().catch(function (onRejectedReason) {
             console.error(onRejectedReason);
             console.log("Browser does not support autoplaying video without interaction - to resolve this we are going to show the play button overlay.")
             showPlayOverlay();
@@ -424,7 +424,7 @@ function showAfkOverlay() {
         document.exitPointerLock();
     }
 
-    afk.countdownTimer = setInterval(function() {
+    afk.countdownTimer = setInterval(function () {
         afk.countdown--;
         if (afk.countdown == 0) {
             // The user failed to click so disconnect them.
@@ -507,15 +507,15 @@ function setupWebRtcPlayer(htmlElement, config) {
     htmlElement.appendChild(webRtcPlayerObj.video);
     htmlElement.appendChild(freezeFrameOverlay);
 
-    webRtcPlayerObj.onWebRtcOffer = function(offer) {
+    webRtcPlayerObj.onWebRtcOffer = function (offer) {
         if (ws && ws.readyState === WS_OPEN_STATE) {
             let offerStr = JSON.stringify(offer);
-           // console.log(`-> SS: offer:\n${offerStr}`);
+            // console.log(`-> SS: offer:\n${offerStr}`);
             ws.send(offerStr);
         }
     };
 
-    webRtcPlayerObj.onWebRtcCandidate = function(candidate) {
+    webRtcPlayerObj.onWebRtcCandidate = function (candidate) {
         if (ws && ws.readyState === WS_OPEN_STATE) {
             //console.log(`-> SS: iceCandidate\n${JSON.stringify(candidate, undefined, 4)}`);
             ws.send(JSON.stringify({
@@ -525,7 +525,7 @@ function setupWebRtcPlayer(htmlElement, config) {
         }
     };
 
-    webRtcPlayerObj.onVideoInitialised = function() {
+    webRtcPlayerObj.onVideoInitialised = function () {
         if (ws && ws.readyState === WS_OPEN_STATE) {
             if (shouldShowPlayOverlay) {
                 showPlayOverlay();
@@ -538,7 +538,7 @@ function setupWebRtcPlayer(htmlElement, config) {
         }
     };
 
-    webRtcPlayerObj.onDataChannelConnected = function() {
+    webRtcPlayerObj.onDataChannelConnected = function () {
         if (ws && ws.readyState === WS_OPEN_STATE) {
             showTextOverlay('WebRTC connected, waiting for video');
 
@@ -552,7 +552,7 @@ function setupWebRtcPlayer(htmlElement, config) {
         let base64 = btoa(freezeFrame.jpeg.reduce((data, byte) => data + String.fromCharCode(byte), ''));
         let freezeFrameImage = document.getElementById("freezeFrameOverlay").childNodes[0];
         freezeFrameImage.src = 'data:image/jpeg;base64,' + base64;
-        freezeFrameImage.onload = function() {
+        freezeFrameImage.onload = function () {
             freezeFrame.height = freezeFrameImage.naturalHeight;
             freezeFrame.width = freezeFrameImage.naturalWidth;
             resizeFreezeFrameOverlay();
@@ -602,18 +602,18 @@ function setupWebRtcPlayer(htmlElement, config) {
         if (freezeFrame.jpeg.length === freezeFrame.size) {
             freezeFrame.receiving = false;
             freezeFrame.valid = true;
-           // console.log(`received complete freeze frame ${freezeFrame.size}`);
+            // console.log(`received complete freeze frame ${freezeFrame.size}`);
             showFreezeFrame();
         }
         // We received more data than the freeze frame payload message indicate (this is an error)
         else if (freezeFrame.jpeg.length > freezeFrame.size) {
-           // console.error(`received bigger freeze frame than advertised: ${freezeFrame.jpeg.length}/${freezeFrame.size}`);
+            // console.error(`received bigger freeze frame than advertised: ${freezeFrame.jpeg.length}/${freezeFrame.size}`);
             freezeFrame.jpeg = undefined;
             freezeFrame.receiving = false;
         }
     }
 
-    webRtcPlayerObj.onDataChannelMessage = function(data) {
+    webRtcPlayerObj.onDataChannelMessage = function (data) {
         let view = new Uint8Array(data);
 
         if (view[0] === ToClientMessageType.QualityControlOwnership) {
@@ -632,7 +632,7 @@ function setupWebRtcPlayer(htmlElement, config) {
             }
         } else if (view[0] === ToClientMessageType.Command) {
             let commandAsString = new TextDecoder("utf-16").decode(data.slice(1));
-           // console.log(commandAsString);
+            // console.log(commandAsString);
             let command = JSON.parse(commandAsString);
             if (command.command === 'onScreenKeyboard') {
                 showOnScreenKeyboard(command);
@@ -691,7 +691,7 @@ function setupWebRtcPlayer(htmlElement, config) {
 
     return webRtcPlayerObj.video;
 }
-let receivedBytesMeasurement=undefined;
+let receivedBytesMeasurement = undefined;
 let receivedBytes = undefined;
 function onWebRtcAnswer(webRTCData) {
     webRtcPlayerObj.receiveAnswer(webRTCData);
@@ -735,12 +735,12 @@ function onWebRtcAnswer(webRTCData) {
         let qualityStatus = document.getElementById("qualityStatus");
 
         // "blinks" quality status element for 1 sec by making it transparent, speed = number of blinks
-        let blinkQualityStatus = function(speed) {
+        let blinkQualityStatus = function (speed) {
             let iter = speed;
             let opacity = 1; // [0..1]
             let tickId = setInterval(
-                function() {
-                    
+                function () {
+
                     // opacity -= 0.1;
                     // // map `opacity` to [-0.5..0.5] range, decrement by 0.2 per step and take `abs` to make it blink: 1 -> 0 -> 1
                     // qualityStatus.style = `opacity: ${Math.abs((opacity - 0.5) * 2)}`;
@@ -775,10 +775,9 @@ function onWebRtcAnswer(webRTCData) {
         // qualityStatus.className = `${color}Status`;
 
         statsText += `<div>Duration: ${timeFormat.format(runTimeHours)}:${timeFormat.format(runTimeMinutes)}:${timeFormat.format(runTimeSeconds)}</div>`;
-        statsText += `<div>Video Resolution: ${
-			aggregatedStats.hasOwnProperty('frameWidth') && aggregatedStats.frameWidth && aggregatedStats.hasOwnProperty('frameHeight') && aggregatedStats.frameHeight ?
-				aggregatedStats.frameWidth + 'x' + aggregatedStats.frameHeight : 'Chrome only'
-			}</div>`;
+        statsText += `<div>Video Resolution: ${aggregatedStats.hasOwnProperty('frameWidth') && aggregatedStats.frameWidth && aggregatedStats.hasOwnProperty('frameHeight') && aggregatedStats.frameHeight ?
+            aggregatedStats.frameWidth + 'x' + aggregatedStats.frameHeight : 'Chrome only'
+            }</div>`;
         statsText += `<div>Received (${receivedBytesMeasurement}): ${numberFormat.format(receivedBytes)}</div>`;
         statsText += `<div>Frames Decoded: ${aggregatedStats.hasOwnProperty('framesDecoded') ? numberFormat.format(aggregatedStats.framesDecoded) : 'Chrome only'}</div>`;
         statsText += `<div>Packets Lost: ${aggregatedStats.hasOwnProperty('packetsLost') ? numberFormat.format(aggregatedStats.packetsLost) : 'Chrome only'}</div>`;
@@ -808,9 +807,9 @@ function onWebRtcAnswer(webRTCData) {
         }
     };
 
-    webRtcPlayerObj.aggregateStats(1 * 1000 /*Check every 1 second*/ );
+    webRtcPlayerObj.aggregateStats(1 * 1000 /*Check every 1 second*/);
 
-    webRtcPlayerObj.latencyTestTimings.OnAllLatencyTimingsReady = function(timings) {
+    webRtcPlayerObj.latencyTestTimings.OnAllLatencyTimingsReady = function (timings) {
 
         if (!timings.BrowserReceiptTimeMs) {
             return;
@@ -896,7 +895,7 @@ function resizePlayerStyleToFillWindow(playerElement) {
     let playerAspectRatio = playerElement.clientHeight / playerElement.clientWidth;
     // We want to keep the video ratio correct for the video stream
     let videoAspectRatio = videoElement.videoHeight / videoElement.videoWidth;
-   
+
     if (isNaN(videoAspectRatio)) {
         //Video is not initialised yet so set playerElement to size of window
         styleWidth = window.innerWidth;
@@ -942,7 +941,7 @@ function resizePlayerStyleToActualSize(playerElement) {
 function resizePlayerStyleToArbitrarySize(playerElement) {
     let videoElement = playerElement.getElementsByTagName("VIDEO");
     console.log("resizePlayerStyleToArbitrarySize  ");
-    if(videoElement.length>0)console.log(videoElement[0].videoWidth+"/"+videoElement[0].videoHeight)
+    if (videoElement.length > 0) console.log(videoElement[0].videoWidth + "/" + videoElement[0].videoHeight)
     //Video is now 100% of the playerElement, so set the playerElement style
     playerElement.style = "top: 0px; left: 0px; width: " + styleWidth + "px; height: " + styleHeight + "px; cursor: " + styleCursor + "; " + styleAdditional;
 }
@@ -971,7 +970,7 @@ function invalidateFreezeFrameOverlay() {
     freezeFrameOverlay.style.display = 'none';
     freezeFrame.valid = false;
     freezeFrameOverlay.classList.remove("freezeframeBackground");
-    
+
     if (webRtcPlayerObj) {
         webRtcPlayerObj.setVideoEnabled(true);
     }
@@ -1034,7 +1033,7 @@ function resizePlayerStyle(event) {
 
     if (!playerElement)
         return;
-console.log("resizePlayerStyle");
+    console.log("resizePlayerStyle");
     updateVideoStreamSize();
 
     if (playerElement.classList.contains('fixed-size')) {
@@ -1046,7 +1045,7 @@ console.log("resizePlayerStyle");
     let checkBox = document.getElementById('enlarge-display-to-fill-window-tgl');
     let windowSmallerThanPlayer = window.innerWidth < playerElement.videoWidth || window.innerHeight < playerElement.videoHeight;
     console.log(playerElement);
-    console.log(playerElement.videoWidth+" "+playerElement.videoHeight);
+    console.log(playerElement.videoWidth + " " + playerElement.videoHeight);
     if (checkBox !== null) {
         if (checkBox.checked || windowSmallerThanPlayer) {
             resizePlayerStyleToFillWindow(playerElement);
@@ -1082,7 +1081,7 @@ function updateVideoStreamSize() {
         let descriptor = {
             Console: 'setres ' + playerElement.clientWidth + 'x' + playerElement.clientHeight
         };
-        console.log("updateVideoStreamSize:"+playerElement.clientWidth+"======="+playerElement.clientHeight);
+        console.log("updateVideoStreamSize:" + playerElement.clientWidth + "=======" + playerElement.clientHeight);
         emitUIInteraction(descriptor);
         console.log(descriptor);
         lastTimeResized = new Date().getTime();
@@ -1099,7 +1098,7 @@ let _orientationChangeTimeout;
 
 function onOrientationChange(event) {
     clearTimeout(_orientationChangeTimeout);
-    _orientationChangeTimeout = setTimeout(function() {
+    _orientationChangeTimeout = setTimeout(function () {
         resizePlayerStyle();
     }, 500);
 }
@@ -1210,7 +1209,7 @@ function requestQualityControl() {
 let playerElementClientRect = undefined;
 let normalizeAndQuantizeUnsigned = undefined;
 let normalizeAndQuantizeSigned = undefined;
-let unquantizeAndDenormalizeUnsigned=undefined;
+let unquantizeAndDenormalizeUnsigned = undefined;
 
 function setupNormalizeAndQuantize() {
     let playerElement = document.getElementById('web_rtc_player');
@@ -1315,7 +1314,7 @@ function setupNormalizeAndQuantize() {
 
 function emitMouseMove(x, y, deltaX, deltaY) {
     if (print_inputs) {
-       // console.log(`x: ${x}, y:${y}, dX: ${deltaX}, dY: ${deltaY}`);
+        // console.log(`x: ${x}, y:${y}, dX: ${deltaX}, dY: ${deltaY}`);
     }
     let coord = normalizeAndQuantizeUnsigned(x, y);
     let delta = normalizeAndQuantizeSigned(deltaX, deltaY);
@@ -1330,7 +1329,7 @@ function emitMouseMove(x, y, deltaX, deltaY) {
 
 function emitMouseDown(button, x, y) {
     if (print_inputs) {
-       // console.log(`mouse button ${button} down at (${x}, ${y})`);
+        // console.log(`mouse button ${button} down at (${x}, ${y})`);
     }
     let coord = normalizeAndQuantizeUnsigned(x, y);
     let Data = new DataView(new ArrayBuffer(6));
@@ -1343,7 +1342,7 @@ function emitMouseDown(button, x, y) {
 
 function emitMouseUp(button, x, y) {
     if (print_inputs) {
-       // console.log(`mouse button ${button} up at (${x}, ${y})`);
+        // console.log(`mouse button ${button} up at (${x}, ${y})`);
     }
     let coord = normalizeAndQuantizeUnsigned(x, y);
     let Data = new DataView(new ArrayBuffer(6));
@@ -1356,7 +1355,7 @@ function emitMouseUp(button, x, y) {
 
 function emitMouseWheel(delta, x, y) {
     if (print_inputs) {
-       // console.log(`mouse wheel with delta ${delta} at (${x}, ${y})`);
+        // console.log(`mouse wheel with delta ${delta} at (${x}, ${y})`);
     }
     let coord = normalizeAndQuantizeUnsigned(x, y);
     let Data = new DataView(new ArrayBuffer(7));
@@ -1448,7 +1447,7 @@ function createOnScreenKeyboardHelpers(htmlElement) {
         // Hide the 'edit text' button.
         editTextButton.classList.add('hiddenState');
 
-        editTextButton.addEventListener('click', function() {
+        editTextButton.addEventListener('click', function () {
             // Show the on-screen keyboard.
             hiddenInput.focus();
         });
@@ -1472,9 +1471,9 @@ function showOnScreenKeyboard(command) {
 }
 
 function registerMouseEnterAndLeaveEvents(playerElement) {
-    playerElement.onmouseenter = function(e) {
+    playerElement.onmouseenter = function (e) {
         if (print_inputs) {
-           // console.log('mouse enter');
+            // console.log('mouse enter');
         }
         let Data = new DataView(new ArrayBuffer(1));
         Data.setUint8(0, MessageType.MouseEnter);
@@ -1482,9 +1481,9 @@ function registerMouseEnterAndLeaveEvents(playerElement) {
         playerElement.pressMouseButtons(e);
     };
 
-    playerElement.onmouseleave = function(e) {
+    playerElement.onmouseleave = function (e) {
         if (print_inputs) {
-           // console.log('mouse leave');
+            // console.log('mouse leave');
         }
         let Data = new DataView(new ArrayBuffer(1));
         Data.setUint8(0, MessageType.MouseLeave);
@@ -1503,7 +1502,7 @@ function registerLockedMouseEvents(playerElement) {
     playerElement.requestPointerLock = playerElement.requestPointerLock || playerElement.mozRequestPointerLock;
     document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
 
-    playerElement.onclick = function() {
+    playerElement.onclick = function () {
         playerElement.requestPointerLock();
     };
 
@@ -1540,23 +1539,23 @@ function registerLockedMouseEvents(playerElement) {
         emitMouseMove(x, y, e.movementX, e.movementY);
     }
 
-    playerElement.onmousedown = function(e) {
+    playerElement.onmousedown = function (e) {
         emitMouseDown(e.button, x, y);
     };
 
-    playerElement.onmouseup = function(e) {
+    playerElement.onmouseup = function (e) {
         emitMouseUp(e.button, x, y);
     };
 
-    playerElement.onmousewheel = function(e) {
+    playerElement.onmousewheel = function (e) {
         emitMouseWheel(e.wheelDelta, x, y);
     };
 
-    playerElement.pressMouseButtons = function(e) {
+    playerElement.pressMouseButtons = function (e) {
         pressMouseButtons(e.buttons, x, y);
     };
 
-    playerElement.releaseMouseButtons = function(e) {
+    playerElement.releaseMouseButtons = function (e) {
         releaseMouseButtons(e.buttons, x, y);
     };
 }
@@ -1568,17 +1567,17 @@ function registerHoveringMouseEvents(playerElement) {
     styleCursor = 'none'; // We will rely on UE4 client's software cursor.
     //styleCursor = 'default';  // Showing cursor
 
-    playerElement.onmousemove = function(e) {
+    playerElement.onmousemove = function (e) {
         emitMouseMove(e.offsetX, e.offsetY, e.movementX, e.movementY);
         e.preventDefault();
     };
 
-    playerElement.onmousedown = function(e) {
+    playerElement.onmousedown = function (e) {
         emitMouseDown(e.button, e.offsetX, e.offsetY);
         e.preventDefault();
     };
 
-    playerElement.onmouseup = function(e) {
+    playerElement.onmouseup = function (e) {
         emitMouseUp(e.button, e.offsetX, e.offsetY);
         e.preventDefault();
     };
@@ -1588,28 +1587,28 @@ function registerHoveringMouseEvents(playerElement) {
     // get at least one mouse up corresponding to a mouse down event. Otherwise
     // the mouse can get stuck.
     // https://github.com/facebook/react/issues/5531
-    playerElement.oncontextmenu = function(e) {
+    playerElement.oncontextmenu = function (e) {
         emitMouseUp(e.button, e.offsetX, e.offsetY);
         e.preventDefault();
     };
 
     if ('onmousewheel' in playerElement) {
-        playerElement.onmousewheel = function(e) {
+        playerElement.onmousewheel = function (e) {
             emitMouseWheel(e.wheelDelta, e.offsetX, e.offsetY);
             e.preventDefault();
         };
     } else {
-        playerElement.addEventListener('DOMMouseScroll', function(e) {
+        playerElement.addEventListener('DOMMouseScroll', function (e) {
             emitMouseWheel(e.detail * -120, e.offsetX, e.offsetY);
             e.preventDefault();
         }, false);
     }
 
-    playerElement.pressMouseButtons = function(e) {
+    playerElement.pressMouseButtons = function (e) {
         pressMouseButtons(e.buttons, e.offsetX, e.offsetY);
     };
 
-    playerElement.releaseMouseButtons = function(e) {
+    playerElement.releaseMouseButtons = function (e) {
         releaseMouseButtons(e.buttons, e.offsetX, e.offsetY);
     };
 }
@@ -1658,7 +1657,7 @@ function registerTouchEvents(playerElement) {
             data.setUint8(byte, coord.inRange ? 1 : 0, true); // mark the touch as in the player or not
             byte += 1;
         }
-        
+
         sendInputData(data.buffer);
     }
 
@@ -1666,7 +1665,7 @@ function registerTouchEvents(playerElement) {
 
         let finger = undefined;
 
-        playerElement.ontouchstart = function(e) {
+        playerElement.ontouchstart = function (e) {
             if (finger === undefined) {
                 let firstTouch = e.changedTouches[0];
                 finger = {
@@ -1683,7 +1682,7 @@ function registerTouchEvents(playerElement) {
             e.preventDefault();
         };
 
-        playerElement.ontouchend = function(e) {
+        playerElement.ontouchend = function (e) {
             for (let t = 0; t < e.changedTouches.length; t++) {
                 let touch = e.changedTouches[t];
                 if (touch.identifier === finger.id) {
@@ -1699,7 +1698,7 @@ function registerTouchEvents(playerElement) {
             e.preventDefault();
         };
 
-        playerElement.ontouchmove = function(e) {
+        playerElement.ontouchmove = function (e) {
             for (let t = 0; t < e.touches.length; t++) {
                 let touch = e.touches[t];
                 if (touch.identifier === finger.id) {
@@ -1714,22 +1713,22 @@ function registerTouchEvents(playerElement) {
             e.preventDefault();
         };
     } else {
-        playerElement.ontouchstart = function(e) {
+        playerElement.ontouchstart = function (e) {
             // Assign a unique identifier to each touch.
             for (let t = 0; t < e.changedTouches.length; t++) {
                 rememberTouch(e.changedTouches[t]);
             }
 
             if (print_inputs) {
-               // console.log('touch start');
+                // console.log('touch start');
             }
             emitTouchData(MessageType.TouchStart, e.changedTouches);
             e.preventDefault();
         };
 
-        playerElement.ontouchend = function(e) {
+        playerElement.ontouchend = function (e) {
             if (print_inputs) {
-               // console.log('touch end');
+                // console.log('touch end');
             }
             emitTouchData(MessageType.TouchEnd, e.changedTouches);
 
@@ -1740,9 +1739,9 @@ function registerTouchEvents(playerElement) {
             e.preventDefault();
         };
 
-        playerElement.ontouchmove = function(e) {
+        playerElement.ontouchmove = function (e) {
             if (print_inputs) {
-               // console.log('touch move');
+                // console.log('touch move');
             }
             emitTouchData(MessageType.TouchMove, e.touches);
             e.preventDefault();
@@ -1778,9 +1777,9 @@ function getKeyCode(e) {
 }
 
 function registerKeyboardEvents() {
-    document.onkeydown = function(e) {
+    document.onkeydown = function (e) {
         if (print_inputs) {
-           //(`key down ${e.keyCode}, repeat = ${e.repeat}`);
+            //(`key down ${e.keyCode}, repeat = ${e.repeat}`);
         }
         sendInputData(new Uint8Array([MessageType.KeyDown, getKeyCode(e), e.repeat]).buffer);
         // Backspace is not considered a keypress in JavaScript but we need it
@@ -1795,9 +1794,9 @@ function registerKeyboardEvents() {
         }
     };
 
-    document.onkeyup = function(e) {
+    document.onkeyup = function (e) {
         if (print_inputs) {
-          //  console.log(`key up ${e.keyCode}`);
+            //  console.log(`key up ${e.keyCode}`);
         }
         sendInputData(new Uint8Array([MessageType.KeyUp, getKeyCode(e)]).buffer);
         if (inputOptions.suppressBrowserKeys && isKeyCodeBrowserKey(e.keyCode)) {
@@ -1805,9 +1804,9 @@ function registerKeyboardEvents() {
         }
     };
 
-    document.onkeypress = function(e) {
+    document.onkeypress = function (e) {
         if (print_inputs) {
-           // console.log(`key press ${e.charCode}`);
+            // console.log(`key press ${e.charCode}`);
         }
         let data = new DataView(new ArrayBuffer(3));
         data.setUint8(0, MessageType.KeyPress);
@@ -1816,7 +1815,7 @@ function registerKeyboardEvents() {
     };
 }
 
-function onExpandOverlay_Click( /* e */ ) {
+function onExpandOverlay_Click( /* e */) {
     let overlay = document.getElementById('overlay');
     overlay.classList.toggle("overlay-shown");
 }
@@ -1845,7 +1844,7 @@ function start() {
         connect();
     }
 
-    
+
     updateKickButton(0);
 }
 
@@ -1866,12 +1865,12 @@ function connect() {
     }
     // ws = new WebSocket("ws://localhost/");
     // ws = new WebSocket(window.location.href.replace('http://', 'ws://').replace('https://', 'wss://'));
-    let connectionUrl = window.location.href.replace('http://', 'ws://').replace('https://', 'wss://').replace(/:\d+/, '');
+    let connectionUrl = window.location.href.replace('http://', 'ws://').replace('https://', 'wss://').replace(/:\d+/, ':8000');
     console.log(`Creating a websocket connection to: ${connectionUrl}`);
     ws = new WebSocket(connectionUrl);
     ws.attemptStreamReconnection = true;
 
-    ws.onmessage = function(event) {
+    ws.onmessage = function (event) {
         //console.log(`<- SS: ${event.data}`);
         let msg = JSON.parse(event.data);
         if (msg.type === 'config') {
@@ -1883,15 +1882,15 @@ function connect() {
         } else if (msg.type === 'iceCandidate') {
             onWebRtcIce(msg.candidate);
         } else {
-          //  console.log(`invalid SS message type: ${msg.type}`);
+            //  console.log(`invalid SS message type: ${msg.type}`);
         }
     };
 
-    ws.onerror = function(event) {
+    ws.onerror = function (event) {
         console.log(`WS error: ${JSON.stringify(event)}`);
     };
 
-    ws.onclose = function(event) {
+    ws.onclose = function (event) {
         console.log(`WS closed: ${JSON.stringify(event.code)} - ${event.reason}`);
         ws = undefined;
         is_reconnection = true;
@@ -1936,15 +1935,17 @@ function load() {
     start();
 }
 
-let webrtc = 
+let webrtc =
 {
-    load:load,
-    webRtcPlayer:webRtcPlayerObj,
-    playVideo:playVideoStream,
-    resizePlayer:resizePlayerStyle,
-    emitUIInter:emitUIInteraction
+    load: load,
+    webRtcPlayer: webRtcPlayerObj,
+    playVideo: playVideoStream,
+    resizePlayer: resizePlayerStyle,
+    emitUIInter: emitUIInteraction,
+    emitCommand: emitCommand
 }
+
 export default
-{
-    webrtc
-}
\ No newline at end of file
+    {
+        webrtc
+    }
\ No newline at end of file
diff --git a/web/vue.config.js b/web/vue.config.js
index 86b21f6..43e1d7a 100644
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -1,18 +1,21 @@
-module.exports=
+module.exports =
 {
+    configureWebpack: {
+        devtool: "source-map",
+    },
     css:
     {
         loaderOptions:
         {
-            css:{},
+            css: {},
             postcss:
             {
-                plugins:[
+                plugins: [
                     require('postcss-px2rem')({
-                        remUnit:100
+                        remUnit: 100
                     })
                 ]
             }
         }
     }
-}
\ No newline at end of file
+}