is1di/x0gp
1
0
Fork 0
mirror of https://github.com/IS1DI/x0gp.git synced 2026-07-16 20:47:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement WebRTC signaling and UDP-based video streaming and control service

Browse Source
This commit is contained in:
is1di
2026-07-16 14:55:14 +04:00
parent 53288ea670
commit 41eaf49bb2
11 changed files with 614 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/web/webrtc_demo.html
+118 -2
View File
@@ -408,6 +408,35 @@
<div id="keyS" class="key-btn">S</div>
<div id="keyD" class="key-btn">D</div>
</div>
<div class="control-extra" style="display: flex; gap: 10px; margin-top: 15px; justify-content: space-around; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 12px; width: 100%;">
<div class="gear-indicator" style="text-align: center;">
<div style="font-size: 0.8rem; color: #8a8d9a;">GEAR</div>
<div style="display: flex; align-items: center; gap: 5px; margin-top: 4px;">
<button id="btnGearDown" class="btn" style="padding: 2px 8px; font-size: 0.8rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; border-radius: 4px; cursor: pointer;">-</button>
<b id="lblGear" style="font-size: 1.3rem; min-width: 15px; display: inline-block;">N</b>
<button id="btnGearUp" class="btn" style="padding: 2px 8px; font-size: 0.8rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; border-radius: 4px; cursor: pointer;">+</button>
</div>
<div style="font-size: 0.7rem; color: #6b7280; margin-top: 2px;">(Z / X)</div>
</div>
<div class="sys-toggle" style="text-align: center;">
<div style="font-size: 0.8rem; color: #8a8d9a;">DRS</div>
<button id="btnDrs" class="btn" style="padding: 2px 6px; font-size: 0.8rem; margin-top: 4px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; border-radius: 4px; cursor: pointer;">Toggle</button>
<div id="lblDrs" class="val" style="font-weight: bold; font-size: 0.95rem; margin-top: 4px; color: #ef4444;">OFF</div>
<div style="font-size: 0.7rem; color: #6b7280; margin-top: 2px;">(Q)</div>
</div>
<div class="sys-toggle" style="text-align: center;">
<div style="font-size: 0.8rem; color: #8a8d9a;">PIT LIMIT</div>
<button id="btnPit" class="btn" style="padding: 2px 6px; font-size: 0.8rem; margin-top: 4px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; border-radius: 4px; cursor: pointer;">Toggle</button>
<div id="lblPit" class="val" style="font-weight: bold; font-size: 0.95rem; margin-top: 4px; color: #ef4444;">OFF</div>
<div style="font-size: 0.7rem; color: #6b7280; margin-top: 2px;">(E)</div>
</div>
</div>
<div style="margin-top: 15px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 12px; width: 100%;">
<span style="font-size: 0.8rem; color: #8a8d9a;">Пакет управления (JSON):</span>
<pre id="ctrlJson" style="font-family: monospace; font-size: 0.75rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.05); padding: 8px; border-radius: 4px; color: #00ff66; margin: 6px 0 0 0; overflow-x: auto; max-height: 250px; text-align: left; line-height: 1.2;">{}</pre>
</div>
</div>
</div>
@@ -489,6 +518,10 @@
let currentSteer = 0; // -1 to 1
let currentThrottle = 0; // 0 to 1
let currentBrake = 0; // 0 to 1
let currentGear = 0; // 0: N, -1: R, 1: D
let drs = false;
let pitLimiter = false;
let buttons = 0;
let pingsReceived = 0;
let latencyStart = 0;
@@ -513,6 +546,22 @@
activeKeys[key] = true;
updateKeyVisuals();
}
if (key === 'q') {
drs = !drs;
updateKeyVisuals();
}
if (key === 'e') {
pitLimiter = !pitLimiter;
updateKeyVisuals();
}
if (key === 'z') {
currentGear = Math.max(-1, currentGear - 1);
updateKeyVisuals();
}
if (key === 'x') {
currentGear = Math.min(1, currentGear + 1);
updateKeyVisuals();
}
});
window.addEventListener('keyup', (e) => {
@@ -542,10 +591,76 @@
if (activeKeys.a) currentSteer = -1.0;
if (activeKeys.d) currentSteer = 1.0;
buttons = 0;
if (drs) buttons |= 1;
if (pitLimiter) buttons |= 2;
// Update UI Gear/DRS/Pit if elements exist
const lblGear = document.getElementById('lblGear');
if (lblGear) {
let gName = 'N';
if (currentGear === -1) gName = 'R';
if (currentGear === 1) gName = 'D';
lblGear.innerText = gName;
}
const lblDrs = document.getElementById('lblDrs');
if (lblDrs) {
lblDrs.innerText = drs ? 'ON' : 'OFF';
lblDrs.style.color = drs ? '#00ff66' : '#ef4444';
}
const lblPit = document.getElementById('lblPit');
if (lblPit) {
lblPit.innerText = pitLimiter ? 'ON' : 'OFF';
lblPit.style.color = pitLimiter ? '#00ff66' : '#ef4444';
}
const ctrlJson = document.getElementById('ctrlJson');
if (ctrlJson) {
const steerByte = Math.round((currentSteer + 1.0) * 100);
const throttleByte = Math.round(currentThrottle * 100);
const brakeByte = Math.round(currentBrake * 100);
const gearByte = currentGear === -1 ? 0 : (currentGear === 1 ? 2 : 1);
ctrlJson.innerText = JSON.stringify({
sent_json: {
steering: currentSteer,
throttle: currentThrottle,
brake: currentBrake,
gear: currentGear,
buttons: buttons
},
binary_packet_bytes: {
byte0_steer: `0x${steerByte.toString(16).toUpperCase().padStart(2, '0')} (${steerByte})`,
byte1_throttle: `0x${throttleByte.toString(16).toUpperCase().padStart(2, '0')} (${throttleByte}%)`,
byte2_brake: `0x${brakeByte.toString(16).toUpperCase().padStart(2, '0')} (${brakeByte}%)`,
byte3_gear: `0x${gearByte.toString(16).toUpperCase().padStart(2, '0')} (${gearByte === 0 ? 'R' : (gearByte === 2 ? 'D' : 'N')})`,
byte4_flags: `0x${buttons.toString(16).toUpperCase().padStart(2, '0')} (DRS=${drs ? 1 : 0}, Pit=${pitLimiter ? 1 : 0})`
}
}, null, 2);
}
// Log control changes to UI console
log(`Controls updated: throttle=${currentThrottle}, steering=${currentSteer}, brake=${currentBrake}`, 'out');
log(`Controls updated: throttle=${currentThrottle}, steering=${currentSteer}, brake=${currentBrake}, gear=${currentGear}, buttons=${buttons}`, 'out');
}
// Click listeners for the custom controls
document.getElementById('btnGearDown').addEventListener('click', () => {
currentGear = Math.max(-1, currentGear - 1);
updateKeyVisuals();
});
document.getElementById('btnGearUp').addEventListener('click', () => {
currentGear = Math.min(1, currentGear + 1);
updateKeyVisuals();
});
document.getElementById('btnDrs').addEventListener('click', () => {
drs = !drs;
updateKeyVisuals();
});
document.getElementById('btnPit').addEventListener('click', () => {
pitLimiter = !pitLimiter;
updateKeyVisuals();
});
connectBtn.addEventListener('click', () => {
if (pc) {
disconnectCockpit();
@@ -742,7 +857,8 @@
throttle: currentThrottle,
steering: currentSteer,
brake: currentBrake,
gear: 1,
gear: currentGear,
buttons: buttons,
timestamp: Date.now()
};
dataChannel.send(JSON.stringify(payload));