PM/bmh
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0218 改变日期函数处理

Browse Source
This commit is contained in:
pm 2025-02-18 21:58:52 +08:00
parent 743f30cbb9
commit f1968de5d9
3 changed files with 124 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/components/TaskModal.vue
View File

@ -8,7 +8,7 @@
<div class="search-area"> <div class="search-area">
<div class="search-item"> <div class="search-item">
<label for="year">年度:</label> <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>
<div class="search-item"> <div class="search-item">
<label for="taskName">任务名称:</label> <label for="taskName">任务名称:</label>
@ -90,13 +90,13 @@ export default {
selectedTasks: this.tasks selectedTasks: this.tasks
}; };
console.log('Confirmed:', data); console.log('Confirmed:', data);
try { try {
webrtc.webrtc.emitCommand("TaskSelected", data); webrtc.webrtc.emitCommand("TaskSelected", data);
} catch (error) { } catch (error) {
console.error('Error in emitCommand:', error); console.error('Error in emitCommand:', error);
} }
this.closeModal(); this.closeModal();
}, },
initData() { initData() {
@ -113,12 +113,10 @@ export default {
const taskNameMatch = !this.taskName || task.paramModel.includes(this.taskName); const taskNameMatch = !this.taskName || task.paramModel.includes(this.taskName);
return yearMatch && taskNameMatch; return yearMatch && taskNameMatch;
}); });
try { try {
const data = { const data = {
command: "SearchTask", command: "LoadScenario"
year: this.year,
taskName: this.taskName
} }
webrtc.webrtc.emitUIInter(data); webrtc.webrtc.emitUIInter(data);
} catch (error) { } catch (error) {
@ -129,13 +127,25 @@ export default {
this.year = new Date().getFullYear(); this.year = new Date().getFullYear();
this.taskName = ''; this.taskName = '';
this.tasks = [...this.originalTasks]; this.tasks = [...this.originalTasks];
try { try {
webrtc.webrtc.emitCommand("ResetTask", {}); webrtc.webrtc.emitCommand("ResetTask", {});
} catch (error) { } catch (error) {
console.error('Error in emitCommand:', 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() { created() {
this.initData(); this.initData();
@ -216,7 +226,8 @@ h2 {
width: 100px; width: 100px;
} }
input, select { input,
select {
background-color: #1e2c42; background-color: #1e2c42;
border: 1px solid #3a4b66; border: 1px solid #3a4b66;
color: white; color: white;
@ -238,7 +249,8 @@ table {
background-color: #1e2c42; background-color: #1e2c42;
} }
th, td { th,
td {
border: 1px solid #3a4b66; border: 1px solid #3a4b66;
padding: 4px; padding: 4px;
text-align: center; text-align: center;
@ -289,7 +301,8 @@ button {
line-height: 16px; line-height: 16px;
} }
.search-btn, .reset-btn { .search-btn,
.reset-btn {
padding: 2px 8px; padding: 2px 8px;
height: 20px; height: 20px;
line-height: 16px; line-height: 16px;

183
web/src/webrtc.js
View File

@ -32,7 +32,7 @@ let freezeFrameOverlay = null;
let shouldShowPlayOverlay = true; let shouldShowPlayOverlay = true;
// A freeze frame is a still JPEG image shown instead of the video. // A freeze frame is a still JPEG image shown instead of the video.
let freezeFrame = { let freezeFrame = {
receiving: false, receiving: false,
size: 0, size: 0,
jpeg: undefined, jpeg: undefined,
height: 0, height: 0,
@ -42,7 +42,7 @@ let freezeFrame = {
// Optionally detect if the user is not interacting (AFK) and disconnect them. // Optionally detect if the user is not interacting (AFK) and disconnect them.
let afk = { 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. 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. closeTimeout: 10, // The time after the warning when we disconnect the user.
@ -85,7 +85,7 @@ function updateStatus() {
let controller = controllers[j]; let controller = controllers[j];
let currentState = controller.currentState; let currentState = controller.currentState;
let prevState = controller.prevState; let prevState = controller.prevState;
// Iterate over buttons // Iterate over buttons
for (let i = 0; i < currentState.buttons.length; i++) { for (let i = 0; i < currentState.buttons.length; i++) {
let currButton = currentState.buttons[i]; let currButton = currentState.buttons[i];
let prevButton = prevState.buttons[i]; let prevButton = prevState.buttons[i];
@ -173,7 +173,7 @@ function emitControllerAxisMove(controllerIndex, axisIndex, analogValue) {
function gamepadConnectHandler(e) { function gamepadConnectHandler(e) {
console.log("Gamepad connect handler"); console.log("Gamepad connect handler");
gamepad = e.gamepad; gamepad = e.gamepad;
controllers[gamepad.index] = {}; controllers[gamepad.index] = {};
controllers[gamepad.index].currentState = gamepad; controllers[gamepad.index].currentState = gamepad;
controllers[gamepad.index].prevState = gamepad; controllers[gamepad.index].prevState = gamepad;
console.log("gamepad: " + gamepad.id + " connected"); console.log("gamepad: " + gamepad.id + " connected");
@ -307,7 +307,7 @@ function sendStartLatencyTest() {
return; return;
} }
let onTestStarted = function(StartTimeMs) { let onTestStarted = function (StartTimeMs) {
let descriptor = { let descriptor = {
StartTime: StartTimeMs StartTime: StartTimeMs
}; };
@ -372,8 +372,8 @@ function showTextOverlay(text) {
function playVideoStream() { function playVideoStream() {
if (webRtcPlayerObj && webRtcPlayerObj.video) { if (webRtcPlayerObj && webRtcPlayerObj.video) {
webRtcPlayerObj.video.muted=true; webRtcPlayerObj.video.muted = true;
webRtcPlayerObj.video.play().catch(function(onRejectedReason){ webRtcPlayerObj.video.play().catch(function (onRejectedReason) {
console.error(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.") console.log("Browser does not support autoplaying video without interaction - to resolve this we are going to show the play button overlay.")
showPlayOverlay(); showPlayOverlay();
@ -424,7 +424,7 @@ function showAfkOverlay() {
document.exitPointerLock(); document.exitPointerLock();
} }
afk.countdownTimer = setInterval(function() { afk.countdownTimer = setInterval(function () {
afk.countdown--; afk.countdown--;
if (afk.countdown == 0) { if (afk.countdown == 0) {
// The user failed to click so disconnect them. // The user failed to click so disconnect them.
@ -507,15 +507,15 @@ function setupWebRtcPlayer(htmlElement, config) {
htmlElement.appendChild(webRtcPlayerObj.video); htmlElement.appendChild(webRtcPlayerObj.video);
htmlElement.appendChild(freezeFrameOverlay); htmlElement.appendChild(freezeFrameOverlay);
webRtcPlayerObj.onWebRtcOffer = function(offer) { webRtcPlayerObj.onWebRtcOffer = function (offer) {
if (ws && ws.readyState === WS_OPEN_STATE) { if (ws && ws.readyState === WS_OPEN_STATE) {
let offerStr = JSON.stringify(offer); let offerStr = JSON.stringify(offer);
// console.log(`-> SS: offer:\n${offerStr}`); // console.log(`-> SS: offer:\n${offerStr}`);
ws.send(offerStr); ws.send(offerStr);
} }
}; };
webRtcPlayerObj.onWebRtcCandidate = function(candidate) { webRtcPlayerObj.onWebRtcCandidate = function (candidate) {
if (ws && ws.readyState === WS_OPEN_STATE) { if (ws && ws.readyState === WS_OPEN_STATE) {
//console.log(`-> SS: iceCandidate\n${JSON.stringify(candidate, undefined, 4)}`); //console.log(`-> SS: iceCandidate\n${JSON.stringify(candidate, undefined, 4)}`);
ws.send(JSON.stringify({ 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 (ws && ws.readyState === WS_OPEN_STATE) {
if (shouldShowPlayOverlay) { if (shouldShowPlayOverlay) {
showPlayOverlay(); showPlayOverlay();
@ -538,7 +538,7 @@ function setupWebRtcPlayer(htmlElement, config) {
} }
}; };
webRtcPlayerObj.onDataChannelConnected = function() { webRtcPlayerObj.onDataChannelConnected = function () {
if (ws && ws.readyState === WS_OPEN_STATE) { if (ws && ws.readyState === WS_OPEN_STATE) {
showTextOverlay('WebRTC connected, waiting for video'); 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 base64 = btoa(freezeFrame.jpeg.reduce((data, byte) => data + String.fromCharCode(byte), ''));
let freezeFrameImage = document.getElementById("freezeFrameOverlay").childNodes[0]; let freezeFrameImage = document.getElementById("freezeFrameOverlay").childNodes[0];
freezeFrameImage.src = 'data:image/jpeg;base64,' + base64; freezeFrameImage.src = 'data:image/jpeg;base64,' + base64;
freezeFrameImage.onload = function() { freezeFrameImage.onload = function () {
freezeFrame.height = freezeFrameImage.naturalHeight; freezeFrame.height = freezeFrameImage.naturalHeight;
freezeFrame.width = freezeFrameImage.naturalWidth; freezeFrame.width = freezeFrameImage.naturalWidth;
resizeFreezeFrameOverlay(); resizeFreezeFrameOverlay();
@ -602,18 +602,18 @@ function setupWebRtcPlayer(htmlElement, config) {
if (freezeFrame.jpeg.length === freezeFrame.size) { if (freezeFrame.jpeg.length === freezeFrame.size) {
freezeFrame.receiving = false; freezeFrame.receiving = false;
freezeFrame.valid = true; freezeFrame.valid = true;
// console.log(`received complete freeze frame ${freezeFrame.size}`); // console.log(`received complete freeze frame ${freezeFrame.size}`);
showFreezeFrame(); showFreezeFrame();
} }
// We received more data than the freeze frame payload message indicate (this is an error) // We received more data than the freeze frame payload message indicate (this is an error)
else if (freezeFrame.jpeg.length > freezeFrame.size) { 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.jpeg = undefined;
freezeFrame.receiving = false; freezeFrame.receiving = false;
} }
} }
webRtcPlayerObj.onDataChannelMessage = function(data) { webRtcPlayerObj.onDataChannelMessage = function (data) {
let view = new Uint8Array(data); let view = new Uint8Array(data);
if (view[0] === ToClientMessageType.QualityControlOwnership) { if (view[0] === ToClientMessageType.QualityControlOwnership) {
@ -632,7 +632,7 @@ function setupWebRtcPlayer(htmlElement, config) {
} }
} else if (view[0] === ToClientMessageType.Command) { } else if (view[0] === ToClientMessageType.Command) {
let commandAsString = new TextDecoder("utf-16").decode(data.slice(1)); let commandAsString = new TextDecoder("utf-16").decode(data.slice(1));
// console.log(commandAsString); // console.log(commandAsString);
let command = JSON.parse(commandAsString); let command = JSON.parse(commandAsString);
if (command.command === 'onScreenKeyboard') { if (command.command === 'onScreenKeyboard') {
showOnScreenKeyboard(command); showOnScreenKeyboard(command);
@ -691,7 +691,7 @@ function setupWebRtcPlayer(htmlElement, config) {
return webRtcPlayerObj.video; return webRtcPlayerObj.video;
} }
let receivedBytesMeasurement=undefined; let receivedBytesMeasurement = undefined;
let receivedBytes = undefined; let receivedBytes = undefined;
function onWebRtcAnswer(webRTCData) { function onWebRtcAnswer(webRTCData) {
webRtcPlayerObj.receiveAnswer(webRTCData); webRtcPlayerObj.receiveAnswer(webRTCData);
@ -735,12 +735,12 @@ function onWebRtcAnswer(webRTCData) {
let qualityStatus = document.getElementById("qualityStatus"); let qualityStatus = document.getElementById("qualityStatus");
// "blinks" quality status element for 1 sec by making it transparent, speed = number of blinks // "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 iter = speed;
let opacity = 1; // [0..1] let opacity = 1; // [0..1]
let tickId = setInterval( let tickId = setInterval(
function() { function () {
// opacity -= 0.1; // 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 // // 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)}`; // qualityStatus.style = `opacity: ${Math.abs((opacity - 0.5) * 2)}`;
@ -775,10 +775,9 @@ function onWebRtcAnswer(webRTCData) {
// qualityStatus.className = `${color}Status`; // qualityStatus.className = `${color}Status`;
statsText += `<div>Duration: ${timeFormat.format(runTimeHours)}:${timeFormat.format(runTimeMinutes)}:${timeFormat.format(runTimeSeconds)}</div>`; statsText += `<div>Duration: ${timeFormat.format(runTimeHours)}:${timeFormat.format(runTimeMinutes)}:${timeFormat.format(runTimeSeconds)}</div>`;
statsText += `<div>Video Resolution: ${ statsText += `<div>Video Resolution: ${aggregatedStats.hasOwnProperty('frameWidth') && aggregatedStats.frameWidth && aggregatedStats.hasOwnProperty('frameHeight') && aggregatedStats.frameHeight ?
aggregatedStats.hasOwnProperty('frameWidth') && aggregatedStats.frameWidth && aggregatedStats.hasOwnProperty('frameHeight') && aggregatedStats.frameHeight ? aggregatedStats.frameWidth + 'x' + aggregatedStats.frameHeight : 'Chrome only'
aggregatedStats.frameWidth + 'x' + aggregatedStats.frameHeight : 'Chrome only' }</div>`;
}</div>`;
statsText += `<div>Received (${receivedBytesMeasurement}): ${numberFormat.format(receivedBytes)}</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>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>`; 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) { if (!timings.BrowserReceiptTimeMs) {
return; return;
@ -896,7 +895,7 @@ function resizePlayerStyleToFillWindow(playerElement) {
let playerAspectRatio = playerElement.clientHeight / playerElement.clientWidth; let playerAspectRatio = playerElement.clientHeight / playerElement.clientWidth;
// We want to keep the video ratio correct for the video stream // We want to keep the video ratio correct for the video stream
let videoAspectRatio = videoElement.videoHeight / videoElement.videoWidth; let videoAspectRatio = videoElement.videoHeight / videoElement.videoWidth;
if (isNaN(videoAspectRatio)) { if (isNaN(videoAspectRatio)) {
//Video is not initialised yet so set playerElement to size of window //Video is not initialised yet so set playerElement to size of window
styleWidth = window.innerWidth; styleWidth = window.innerWidth;
@ -942,7 +941,7 @@ function resizePlayerStyleToActualSize(playerElement) {
function resizePlayerStyleToArbitrarySize(playerElement) { function resizePlayerStyleToArbitrarySize(playerElement) {
let videoElement = playerElement.getElementsByTagName("VIDEO"); let videoElement = playerElement.getElementsByTagName("VIDEO");
console.log("resizePlayerStyleToArbitrarySize "); 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 //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; 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'; freezeFrameOverlay.style.display = 'none';
freezeFrame.valid = false; freezeFrame.valid = false;
freezeFrameOverlay.classList.remove("freezeframeBackground"); freezeFrameOverlay.classList.remove("freezeframeBackground");
if (webRtcPlayerObj) { if (webRtcPlayerObj) {
webRtcPlayerObj.setVideoEnabled(true); webRtcPlayerObj.setVideoEnabled(true);
} }
@ -1034,7 +1033,7 @@ function resizePlayerStyle(event) {
if (!playerElement) if (!playerElement)
return; return;
console.log("resizePlayerStyle"); console.log("resizePlayerStyle");
updateVideoStreamSize(); updateVideoStreamSize();
if (playerElement.classList.contains('fixed-size')) { if (playerElement.classList.contains('fixed-size')) {
@ -1046,7 +1045,7 @@ console.log("resizePlayerStyle");
let checkBox = document.getElementById('enlarge-display-to-fill-window-tgl'); let checkBox = document.getElementById('enlarge-display-to-fill-window-tgl');
let windowSmallerThanPlayer = window.innerWidth < playerElement.videoWidth || window.innerHeight < playerElement.videoHeight; let windowSmallerThanPlayer = window.innerWidth < playerElement.videoWidth || window.innerHeight < playerElement.videoHeight;
console.log(playerElement); console.log(playerElement);
console.log(playerElement.videoWidth+" "+playerElement.videoHeight); console.log(playerElement.videoWidth + " " + playerElement.videoHeight);
if (checkBox !== null) { if (checkBox !== null) {
if (checkBox.checked || windowSmallerThanPlayer) { if (checkBox.checked || windowSmallerThanPlayer) {
resizePlayerStyleToFillWindow(playerElement); resizePlayerStyleToFillWindow(playerElement);
@ -1082,7 +1081,7 @@ function updateVideoStreamSize() {
let descriptor = { let descriptor = {
Console: 'setres ' + playerElement.clientWidth + 'x' + playerElement.clientHeight Console: 'setres ' + playerElement.clientWidth + 'x' + playerElement.clientHeight
}; };
console.log("updateVideoStreamSize:"+playerElement.clientWidth+"======="+playerElement.clientHeight); console.log("updateVideoStreamSize:" + playerElement.clientWidth + "=======" + playerElement.clientHeight);
emitUIInteraction(descriptor); emitUIInteraction(descriptor);
console.log(descriptor); console.log(descriptor);
lastTimeResized = new Date().getTime(); lastTimeResized = new Date().getTime();
@ -1099,7 +1098,7 @@ let _orientationChangeTimeout;
function onOrientationChange(event) { function onOrientationChange(event) {
clearTimeout(_orientationChangeTimeout); clearTimeout(_orientationChangeTimeout);
_orientationChangeTimeout = setTimeout(function() { _orientationChangeTimeout = setTimeout(function () {
resizePlayerStyle(); resizePlayerStyle();
}, 500); }, 500);
} }
@ -1210,7 +1209,7 @@ function requestQualityControl() {
let playerElementClientRect = undefined; let playerElementClientRect = undefined;
let normalizeAndQuantizeUnsigned = undefined; let normalizeAndQuantizeUnsigned = undefined;
let normalizeAndQuantizeSigned = undefined; let normalizeAndQuantizeSigned = undefined;
let unquantizeAndDenormalizeUnsigned=undefined; let unquantizeAndDenormalizeUnsigned = undefined;
function setupNormalizeAndQuantize() { function setupNormalizeAndQuantize() {
let playerElement = document.getElementById('web_rtc_player'); let playerElement = document.getElementById('web_rtc_player');
@ -1315,7 +1314,7 @@ function setupNormalizeAndQuantize() {
function emitMouseMove(x, y, deltaX, deltaY) { function emitMouseMove(x, y, deltaX, deltaY) {
if (print_inputs) { 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 coord = normalizeAndQuantizeUnsigned(x, y);
let delta = normalizeAndQuantizeSigned(deltaX, deltaY); let delta = normalizeAndQuantizeSigned(deltaX, deltaY);
@ -1330,7 +1329,7 @@ function emitMouseMove(x, y, deltaX, deltaY) {
function emitMouseDown(button, x, y) { function emitMouseDown(button, x, y) {
if (print_inputs) { 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 coord = normalizeAndQuantizeUnsigned(x, y);
let Data = new DataView(new ArrayBuffer(6)); let Data = new DataView(new ArrayBuffer(6));
@ -1343,7 +1342,7 @@ function emitMouseDown(button, x, y) {
function emitMouseUp(button, x, y) { function emitMouseUp(button, x, y) {
if (print_inputs) { 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 coord = normalizeAndQuantizeUnsigned(x, y);
let Data = new DataView(new ArrayBuffer(6)); let Data = new DataView(new ArrayBuffer(6));
@ -1356,7 +1355,7 @@ function emitMouseUp(button, x, y) {
function emitMouseWheel(delta, x, y) { function emitMouseWheel(delta, x, y) {
if (print_inputs) { 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 coord = normalizeAndQuantizeUnsigned(x, y);
let Data = new DataView(new ArrayBuffer(7)); let Data = new DataView(new ArrayBuffer(7));
@ -1448,7 +1447,7 @@ function createOnScreenKeyboardHelpers(htmlElement) {
// Hide the 'edit text' button. // Hide the 'edit text' button.
editTextButton.classList.add('hiddenState'); editTextButton.classList.add('hiddenState');
editTextButton.addEventListener('click', function() { editTextButton.addEventListener('click', function () {
// Show the on-screen keyboard. // Show the on-screen keyboard.
hiddenInput.focus(); hiddenInput.focus();
}); });
@ -1472,9 +1471,9 @@ function showOnScreenKeyboard(command) {
} }
function registerMouseEnterAndLeaveEvents(playerElement) { function registerMouseEnterAndLeaveEvents(playerElement) {
playerElement.onmouseenter = function(e) { playerElement.onmouseenter = function (e) {
if (print_inputs) { if (print_inputs) {
// console.log('mouse enter'); // console.log('mouse enter');
} }
let Data = new DataView(new ArrayBuffer(1)); let Data = new DataView(new ArrayBuffer(1));
Data.setUint8(0, MessageType.MouseEnter); Data.setUint8(0, MessageType.MouseEnter);
@ -1482,9 +1481,9 @@ function registerMouseEnterAndLeaveEvents(playerElement) {
playerElement.pressMouseButtons(e); playerElement.pressMouseButtons(e);
}; };
playerElement.onmouseleave = function(e) { playerElement.onmouseleave = function (e) {
if (print_inputs) { if (print_inputs) {
// console.log('mouse leave'); // console.log('mouse leave');
} }
let Data = new DataView(new ArrayBuffer(1)); let Data = new DataView(new ArrayBuffer(1));
Data.setUint8(0, MessageType.MouseLeave); Data.setUint8(0, MessageType.MouseLeave);
@ -1503,7 +1502,7 @@ function registerLockedMouseEvents(playerElement) {
playerElement.requestPointerLock = playerElement.requestPointerLock || playerElement.mozRequestPointerLock; playerElement.requestPointerLock = playerElement.requestPointerLock || playerElement.mozRequestPointerLock;
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock; document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
playerElement.onclick = function() { playerElement.onclick = function () {
playerElement.requestPointerLock(); playerElement.requestPointerLock();
}; };
@ -1540,23 +1539,23 @@ function registerLockedMouseEvents(playerElement) {
emitMouseMove(x, y, e.movementX, e.movementY); emitMouseMove(x, y, e.movementX, e.movementY);
} }
playerElement.onmousedown = function(e) { playerElement.onmousedown = function (e) {
emitMouseDown(e.button, x, y); emitMouseDown(e.button, x, y);
}; };
playerElement.onmouseup = function(e) { playerElement.onmouseup = function (e) {
emitMouseUp(e.button, x, y); emitMouseUp(e.button, x, y);
}; };
playerElement.onmousewheel = function(e) { playerElement.onmousewheel = function (e) {
emitMouseWheel(e.wheelDelta, x, y); emitMouseWheel(e.wheelDelta, x, y);
}; };
playerElement.pressMouseButtons = function(e) { playerElement.pressMouseButtons = function (e) {
pressMouseButtons(e.buttons, x, y); pressMouseButtons(e.buttons, x, y);
}; };
playerElement.releaseMouseButtons = function(e) { playerElement.releaseMouseButtons = function (e) {
releaseMouseButtons(e.buttons, x, y); releaseMouseButtons(e.buttons, x, y);
}; };
} }
@ -1568,17 +1567,17 @@ function registerHoveringMouseEvents(playerElement) {
styleCursor = 'none'; // We will rely on UE4 client's software cursor. styleCursor = 'none'; // We will rely on UE4 client's software cursor.
//styleCursor = 'default'; // Showing cursor //styleCursor = 'default'; // Showing cursor
playerElement.onmousemove = function(e) { playerElement.onmousemove = function (e) {
emitMouseMove(e.offsetX, e.offsetY, e.movementX, e.movementY); emitMouseMove(e.offsetX, e.offsetY, e.movementX, e.movementY);
e.preventDefault(); e.preventDefault();
}; };
playerElement.onmousedown = function(e) { playerElement.onmousedown = function (e) {
emitMouseDown(e.button, e.offsetX, e.offsetY); emitMouseDown(e.button, e.offsetX, e.offsetY);
e.preventDefault(); e.preventDefault();
}; };
playerElement.onmouseup = function(e) { playerElement.onmouseup = function (e) {
emitMouseUp(e.button, e.offsetX, e.offsetY); emitMouseUp(e.button, e.offsetX, e.offsetY);
e.preventDefault(); e.preventDefault();
}; };
@ -1588,28 +1587,28 @@ function registerHoveringMouseEvents(playerElement) {
// get at least one mouse up corresponding to a mouse down event. Otherwise // get at least one mouse up corresponding to a mouse down event. Otherwise
// the mouse can get stuck. // the mouse can get stuck.
// https://github.com/facebook/react/issues/5531 // https://github.com/facebook/react/issues/5531
playerElement.oncontextmenu = function(e) { playerElement.oncontextmenu = function (e) {
emitMouseUp(e.button, e.offsetX, e.offsetY); emitMouseUp(e.button, e.offsetX, e.offsetY);
e.preventDefault(); e.preventDefault();
}; };
if ('onmousewheel' in playerElement) { if ('onmousewheel' in playerElement) {
playerElement.onmousewheel = function(e) { playerElement.onmousewheel = function (e) {
emitMouseWheel(e.wheelDelta, e.offsetX, e.offsetY); emitMouseWheel(e.wheelDelta, e.offsetX, e.offsetY);
e.preventDefault(); e.preventDefault();
}; };
} else { } else {
playerElement.addEventListener('DOMMouseScroll', function(e) { playerElement.addEventListener('DOMMouseScroll', function (e) {
emitMouseWheel(e.detail * -120, e.offsetX, e.offsetY); emitMouseWheel(e.detail * -120, e.offsetX, e.offsetY);
e.preventDefault(); e.preventDefault();
}, false); }, false);
} }
playerElement.pressMouseButtons = function(e) { playerElement.pressMouseButtons = function (e) {
pressMouseButtons(e.buttons, e.offsetX, e.offsetY); pressMouseButtons(e.buttons, e.offsetX, e.offsetY);
}; };
playerElement.releaseMouseButtons = function(e) { playerElement.releaseMouseButtons = function (e) {
releaseMouseButtons(e.buttons, e.offsetX, e.offsetY); 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 data.setUint8(byte, coord.inRange ? 1 : 0, true); // mark the touch as in the player or not
byte += 1; byte += 1;
} }
sendInputData(data.buffer); sendInputData(data.buffer);
} }
@ -1666,7 +1665,7 @@ function registerTouchEvents(playerElement) {
let finger = undefined; let finger = undefined;
playerElement.ontouchstart = function(e) { playerElement.ontouchstart = function (e) {
if (finger === undefined) { if (finger === undefined) {
let firstTouch = e.changedTouches[0]; let firstTouch = e.changedTouches[0];
finger = { finger = {
@ -1683,7 +1682,7 @@ function registerTouchEvents(playerElement) {
e.preventDefault(); e.preventDefault();
}; };
playerElement.ontouchend = function(e) { playerElement.ontouchend = function (e) {
for (let t = 0; t < e.changedTouches.length; t++) { for (let t = 0; t < e.changedTouches.length; t++) {
let touch = e.changedTouches[t]; let touch = e.changedTouches[t];
if (touch.identifier === finger.id) { if (touch.identifier === finger.id) {
@ -1699,7 +1698,7 @@ function registerTouchEvents(playerElement) {
e.preventDefault(); e.preventDefault();
}; };
playerElement.ontouchmove = function(e) { playerElement.ontouchmove = function (e) {
for (let t = 0; t < e.touches.length; t++) { for (let t = 0; t < e.touches.length; t++) {
let touch = e.touches[t]; let touch = e.touches[t];
if (touch.identifier === finger.id) { if (touch.identifier === finger.id) {
@ -1714,22 +1713,22 @@ function registerTouchEvents(playerElement) {
e.preventDefault(); e.preventDefault();
}; };
} else { } else {
playerElement.ontouchstart = function(e) { playerElement.ontouchstart = function (e) {
// Assign a unique identifier to each touch. // Assign a unique identifier to each touch.
for (let t = 0; t < e.changedTouches.length; t++) { for (let t = 0; t < e.changedTouches.length; t++) {
rememberTouch(e.changedTouches[t]); rememberTouch(e.changedTouches[t]);
} }
if (print_inputs) { if (print_inputs) {
// console.log('touch start'); // console.log('touch start');
} }
emitTouchData(MessageType.TouchStart, e.changedTouches); emitTouchData(MessageType.TouchStart, e.changedTouches);
e.preventDefault(); e.preventDefault();
}; };
playerElement.ontouchend = function(e) { playerElement.ontouchend = function (e) {
if (print_inputs) { if (print_inputs) {
// console.log('touch end'); // console.log('touch end');
} }
emitTouchData(MessageType.TouchEnd, e.changedTouches); emitTouchData(MessageType.TouchEnd, e.changedTouches);
@ -1740,9 +1739,9 @@ function registerTouchEvents(playerElement) {
e.preventDefault(); e.preventDefault();
}; };
playerElement.ontouchmove = function(e) { playerElement.ontouchmove = function (e) {
if (print_inputs) { if (print_inputs) {
// console.log('touch move'); // console.log('touch move');
} }
emitTouchData(MessageType.TouchMove, e.touches); emitTouchData(MessageType.TouchMove, e.touches);
e.preventDefault(); e.preventDefault();
@ -1778,9 +1777,9 @@ function getKeyCode(e) {
} }
function registerKeyboardEvents() { function registerKeyboardEvents() {
document.onkeydown = function(e) { document.onkeydown = function (e) {
if (print_inputs) { 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); sendInputData(new Uint8Array([MessageType.KeyDown, getKeyCode(e), e.repeat]).buffer);
// Backspace is not considered a keypress in JavaScript but we need it // 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) { if (print_inputs) {
// console.log(`key up ${e.keyCode}`); // console.log(`key up ${e.keyCode}`);
} }
sendInputData(new Uint8Array([MessageType.KeyUp, getKeyCode(e)]).buffer); sendInputData(new Uint8Array([MessageType.KeyUp, getKeyCode(e)]).buffer);
if (inputOptions.suppressBrowserKeys && isKeyCodeBrowserKey(e.keyCode)) { if (inputOptions.suppressBrowserKeys && isKeyCodeBrowserKey(e.keyCode)) {
@ -1805,9 +1804,9 @@ function registerKeyboardEvents() {
} }
}; };
document.onkeypress = function(e) { document.onkeypress = function (e) {
if (print_inputs) { if (print_inputs) {
// console.log(`key press ${e.charCode}`); // console.log(`key press ${e.charCode}`);
} }
let data = new DataView(new ArrayBuffer(3)); let data = new DataView(new ArrayBuffer(3));
data.setUint8(0, MessageType.KeyPress); data.setUint8(0, MessageType.KeyPress);
@ -1816,7 +1815,7 @@ function registerKeyboardEvents() {
}; };
} }
function onExpandOverlay_Click( /* e */ ) { function onExpandOverlay_Click( /* e */) {
let overlay = document.getElementById('overlay'); let overlay = document.getElementById('overlay');
overlay.classList.toggle("overlay-shown"); overlay.classList.toggle("overlay-shown");
} }
@ -1845,7 +1844,7 @@ function start() {
connect(); connect();
} }
updateKickButton(0); updateKickButton(0);
} }
@ -1866,12 +1865,12 @@ function connect() {
} }
// ws = new WebSocket("ws://localhost/"); // ws = new WebSocket("ws://localhost/");
// ws = new WebSocket(window.location.href.replace('http://', 'ws://').replace('https://', 'wss://')); // 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}`); console.log(`Creating a websocket connection to: ${connectionUrl}`);
ws = new WebSocket(connectionUrl); ws = new WebSocket(connectionUrl);
ws.attemptStreamReconnection = true; ws.attemptStreamReconnection = true;
ws.onmessage = function(event) { ws.onmessage = function (event) {
//console.log(`<- SS: ${event.data}`); //console.log(`<- SS: ${event.data}`);
let msg = JSON.parse(event.data); let msg = JSON.parse(event.data);
if (msg.type === 'config') { if (msg.type === 'config') {
@ -1883,15 +1882,15 @@ function connect() {
} else if (msg.type === 'iceCandidate') { } else if (msg.type === 'iceCandidate') {
onWebRtcIce(msg.candidate); onWebRtcIce(msg.candidate);
} else { } 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)}`); 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}`); console.log(`WS closed: ${JSON.stringify(event.code)} - ${event.reason}`);
ws = undefined; ws = undefined;
is_reconnection = true; is_reconnection = true;
@ -1936,15 +1935,17 @@ function load() {
start(); start();
} }
let webrtc = let webrtc =
{ {
load:load, load: load,
webRtcPlayer:webRtcPlayerObj, webRtcPlayer: webRtcPlayerObj,
playVideo:playVideoStream, playVideo: playVideoStream,
resizePlayer:resizePlayerStyle, resizePlayer: resizePlayerStyle,
emitUIInter:emitUIInteraction emitUIInter: emitUIInteraction,
emitCommand: emitCommand
} }
export default export default
{ {
webrtc webrtc
} }

13
web/vue.config.js
View File

@ -1,18 +1,21 @@
module.exports= module.exports =
{ {
configureWebpack: {
devtool: "source-map",
},
css: css:
{ {
loaderOptions: loaderOptions:
{ {
css:{}, css: {},
postcss: postcss:
{ {
plugins:[ plugins: [
require('postcss-px2rem')({ require('postcss-px2rem')({
remUnit:100 remUnit: 100
}) })
] ]
} }
} }
} }
} }