From f1968de5d9232fb7a0671511982f5d746ef55d0d Mon Sep 17 00:00:00 2001 From: pm <362371171@qq.com> Date: Tue, 18 Feb 2025 21:58:52 +0800 Subject: [PATCH] =?UTF-8?q?0218=20=E6=94=B9=E5=8F=98=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E5=87=BD=E6=95=B0=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/TaskModal.vue | 35 ++++-- web/src/webrtc.js | 183 ++++++++++++++++--------------- web/vue.config.js | 13 ++- 3 files changed, 124 insertions(+), 107 deletions(-) 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 @@
- +
@@ -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 += `
Duration: ${timeFormat.format(runTimeHours)}:${timeFormat.format(runTimeMinutes)}:${timeFormat.format(runTimeSeconds)}
`; - statsText += `
Video Resolution: ${ - aggregatedStats.hasOwnProperty('frameWidth') && aggregatedStats.frameWidth && aggregatedStats.hasOwnProperty('frameHeight') && aggregatedStats.frameHeight ? - aggregatedStats.frameWidth + 'x' + aggregatedStats.frameHeight : 'Chrome only' - }
`; + statsText += `
Video Resolution: ${aggregatedStats.hasOwnProperty('frameWidth') && aggregatedStats.frameWidth && aggregatedStats.hasOwnProperty('frameHeight') && aggregatedStats.frameHeight ? + aggregatedStats.frameWidth + 'x' + aggregatedStats.frameHeight : 'Chrome only' + }
`; statsText += `
Received (${receivedBytesMeasurement}): ${numberFormat.format(receivedBytes)}
`; statsText += `
Frames Decoded: ${aggregatedStats.hasOwnProperty('framesDecoded') ? numberFormat.format(aggregatedStats.framesDecoded) : 'Chrome only'}
`; statsText += `
Packets Lost: ${aggregatedStats.hasOwnProperty('packetsLost') ? numberFormat.format(aggregatedStats.packetsLost) : 'Chrome only'}
`; @@ -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 +}