387 lines
11 KiB
JavaScript
387 lines
11 KiB
JavaScript
|
// ─── Elemente ───
|
|||
|
|
const serverUrlInput = document.getElementById('serverUrl');
|
|||
|
|
const myIdInput = document.getElementById('myId');
|
|||
|
|
const remoteIdInput = document.getElementById('remoteId');
|
|||
|
|
const btnRegister = document.getElementById('btnRegister');
|
|||
|
|
const btnShare = document.getElementById('btnShare');
|
|||
|
|
const btnControl = document.getElementById('btnControl');
|
|||
|
|
const btnStop = document.getElementById('btnStop');
|
|||
|
|
const localVideo = document.getElementById('localVideo');
|
|||
|
|
const remoteVideo = document.getElementById('remoteVideo');
|
|||
|
|
const localPlaceholder = document.getElementById('localPlaceholder');
|
|||
|
|
const remotePlaceholder = document.getElementById('remotePlaceholder');
|
|||
|
|
const statusDot = document.getElementById('statusDot');
|
|||
|
|
const statusText = document.getElementById('statusText');
|
|||
|
|
const peerInfo = document.getElementById('peerInfo');
|
|||
|
|
const remotePanel = document.getElementById('remotePanel');
|
|||
|
|
const logEl = document.getElementById('log');
|
|||
|
|
|
|||
|
|
// ─── State ───
|
|||
|
|
let ws = null;
|
|||
|
|
let peerConnection = null;
|
|||
|
|
let dataChannel = null;
|
|||
|
|
let localStream = null;
|
|||
|
|
let controlActive = false;
|
|||
|
|
let screenWidth = window.screen.width;
|
|||
|
|
let screenHeight = window.screen.height;
|
|||
|
|
|
|||
|
|
myIdInput.value = 'PC-' + Math.random().toString(36).substr(2, 4).toUpperCase();
|
|||
|
|
|
|||
|
|
const ICE_SERVERS = [
|
|||
|
|
{ urls: 'stun:stun.l.google.com:19302' },
|
|||
|
|
{ urls: 'stun:stun1.l.google.com:19302' },
|
|||
|
|
{ urls: 'stun:stun2.l.google.com:19302' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// ─── Logging ───
|
|||
|
|
function log(msg, type = '') {
|
|||
|
|
const div = document.createElement('div');
|
|||
|
|
div.className = type;
|
|||
|
|
div.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
|
|||
|
|
logEl.appendChild(div);
|
|||
|
|
logEl.scrollTop = logEl.scrollHeight;
|
|||
|
|
console.log(msg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── WebSocket Signaling ───
|
|||
|
|
btnRegister.addEventListener('click', () => {
|
|||
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|||
|
|
ws.close();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const url = serverUrlInput.value.trim();
|
|||
|
|
ws = new WebSocket(url);
|
|||
|
|
|
|||
|
|
ws.onopen = () => {
|
|||
|
|
ws.send(JSON.stringify({ type: 'register', peerId: myIdInput.value }));
|
|||
|
|
statusDot.className = 'status-dot online';
|
|||
|
|
statusText.textContent = 'Verbunden als ' + myIdInput.value;
|
|||
|
|
btnRegister.textContent = 'Trennen';
|
|||
|
|
log('Mit Signal-Server verbunden', 'info');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ws.onclose = () => {
|
|||
|
|
statusDot.className = 'status-dot offline';
|
|||
|
|
statusText.textContent = 'Nicht verbunden';
|
|||
|
|
btnRegister.textContent = 'Verbinden';
|
|||
|
|
log('Signal-Server getrennt');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ws.onerror = (err) => {
|
|||
|
|
log('WebSocket-Fehler: ' + err.message, 'error');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ws.onmessage = (event) => {
|
|||
|
|
const msg = JSON.parse(event.data);
|
|||
|
|
handleSignal(msg);
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
async function handleSignal(msg) {
|
|||
|
|
switch (msg.type) {
|
|||
|
|
case 'registered':
|
|||
|
|
log('Registriert als: ' + msg.peerId, 'info');
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
case 'offer':
|
|||
|
|
log('Offer empfangen von ' + msg.from, 'info');
|
|||
|
|
peerInfo.textContent = 'Verbunden mit: ' + msg.from;
|
|||
|
|
await handleOffer(msg);
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
case 'answer':
|
|||
|
|
log('Answer empfangen von ' + msg.from, 'info');
|
|||
|
|
if (peerConnection) {
|
|||
|
|
await peerConnection.setRemoteDescription(new RTCSessionDescription(msg.sdp));
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
case 'ice-candidate':
|
|||
|
|
if (peerConnection && msg.candidate) {
|
|||
|
|
await peerConnection.addIceCandidate(new RTCIceCandidate(msg.candidate));
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
case 'control':
|
|||
|
|
if (window.electronAPI) {
|
|||
|
|
window.electronAPI.sendControl(msg.data);
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── WebRTC ───
|
|||
|
|
function createPeerConnection() {
|
|||
|
|
if (peerConnection) {
|
|||
|
|
peerConnection.close();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
peerConnection = new RTCPeerConnection({ iceServers: ICE_SERVERS });
|
|||
|
|
|
|||
|
|
peerConnection.onicecandidate = (event) => {
|
|||
|
|
if (event.candidate) {
|
|||
|
|
sendSignal({
|
|||
|
|
type: 'ice-candidate',
|
|||
|
|
target: remoteIdInput.value,
|
|||
|
|
candidate: event.candidate,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
peerConnection.ontrack = (event) => {
|
|||
|
|
remoteVideo.srcObject = event.streams[0];
|
|||
|
|
remotePlaceholder.style.display = 'none';
|
|||
|
|
log('Remote-Stream empfangen', 'info');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
peerConnection.ondatachannel = (event) => {
|
|||
|
|
dataChannel = event.channel;
|
|||
|
|
setupDataChannel(dataChannel);
|
|||
|
|
log('DataChannel empfangen (Fernsteuerung bereit)', 'info');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
peerConnection.oniceconnectionstatechange = () => {
|
|||
|
|
log('ICE Status: ' + peerConnection.iceConnectionState);
|
|||
|
|
if (peerConnection.iceConnectionState === 'disconnected' ||
|
|||
|
|
peerConnection.iceConnectionState === 'failed') {
|
|||
|
|
log('Verbindung verloren!', 'error');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return peerConnection;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setupDataChannel(dc) {
|
|||
|
|
dc.onopen = () => log('DataChannel offen – Fernsteuerung aktiv', 'info');
|
|||
|
|
dc.onclose = () => log('DataChannel geschlossen');
|
|||
|
|
dc.onmessage = (event) => {
|
|||
|
|
const data = JSON.parse(event.data);
|
|||
|
|
if (window.electronAPI) {
|
|||
|
|
window.electronAPI.sendControl(data);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function sendSignal(msg) {
|
|||
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|||
|
|
ws.send(JSON.stringify(msg));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Bildschirm teilen ───
|
|||
|
|
btnShare.addEventListener('click', async () => {
|
|||
|
|
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
|||
|
|
log('Zuerst mit Signal-Server verbinden!', 'error');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!remoteIdInput.value.trim()) {
|
|||
|
|
log('Remote-ID eingeben!', 'error');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const sources = await window.electronAPI.getSources();
|
|||
|
|
if (sources.length === 0) {
|
|||
|
|
log('Keine Bildschirmquellen gefunden', 'error');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
localStream = await navigator.mediaDevices.getUserMedia({
|
|||
|
|
audio: false,
|
|||
|
|
video: {
|
|||
|
|
mandatory: {
|
|||
|
|
chromeMediaSource: 'desktop',
|
|||
|
|
chromeMediaSourceId: sources[0].id,
|
|||
|
|
maxWidth: 1920,
|
|||
|
|
maxHeight: 1080,
|
|||
|
|
maxFrameRate: 30,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
localVideo.srcObject = localStream;
|
|||
|
|
localPlaceholder.style.display = 'none';
|
|||
|
|
log('Bildschirm wird erfasst: ' + sources[0].name, 'info');
|
|||
|
|
|
|||
|
|
const pc = createPeerConnection();
|
|||
|
|
|
|||
|
|
dataChannel = pc.createDataChannel('control');
|
|||
|
|
setupDataChannel(dataChannel);
|
|||
|
|
|
|||
|
|
localStream.getTracks().forEach((track) => {
|
|||
|
|
pc.addTrack(track, localStream);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const offer = await pc.createOffer();
|
|||
|
|
await pc.setLocalDescription(offer);
|
|||
|
|
|
|||
|
|
sendSignal({
|
|||
|
|
type: 'offer',
|
|||
|
|
target: remoteIdInput.value,
|
|||
|
|
sdp: offer,
|
|||
|
|
screenWidth,
|
|||
|
|
screenHeight,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
log('Offer gesendet an ' + remoteIdInput.value, 'info');
|
|||
|
|
peerInfo.textContent = 'Verbinde mit: ' + remoteIdInput.value;
|
|||
|
|
} catch (err) {
|
|||
|
|
log('Fehler: ' + err.message, 'error');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
async function handleOffer(msg) {
|
|||
|
|
const pc = createPeerConnection();
|
|||
|
|
|
|||
|
|
await pc.setRemoteDescription(new RTCSessionDescription(msg.sdp));
|
|||
|
|
|
|||
|
|
if (msg.screenWidth) screenWidth = msg.screenWidth;
|
|||
|
|
if (msg.screenHeight) screenHeight = msg.screenHeight;
|
|||
|
|
|
|||
|
|
const answer = await pc.createAnswer();
|
|||
|
|
await pc.setLocalDescription(answer);
|
|||
|
|
|
|||
|
|
sendSignal({
|
|||
|
|
type: 'answer',
|
|||
|
|
target: msg.from,
|
|||
|
|
sdp: answer,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
log('Answer gesendet an ' + msg.from, 'info');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Fernsteuerung (Maus/Tastatur über Remote-Video senden) ───
|
|||
|
|
btnControl.addEventListener('click', () => {
|
|||
|
|
controlActive = !controlActive;
|
|||
|
|
btnControl.textContent = controlActive ? 'Steuerung AN' : 'Fernsteuern';
|
|||
|
|
btnControl.className = controlActive ? 'btn-danger' : 'btn-secondary';
|
|||
|
|
log(controlActive ? 'Fernsteuerung AKTIVIERT' : 'Fernsteuerung DEAKTIVIERT', 'info');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function sendControlData(data) {
|
|||
|
|
if (!controlActive) return;
|
|||
|
|
|
|||
|
|
if (dataChannel && dataChannel.readyState === 'open') {
|
|||
|
|
dataChannel.send(JSON.stringify(data));
|
|||
|
|
} else {
|
|||
|
|
sendSignal({
|
|||
|
|
type: 'control',
|
|||
|
|
target: remoteIdInput.value,
|
|||
|
|
data,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getRelativeCoords(e) {
|
|||
|
|
const rect = remoteVideo.getBoundingClientRect();
|
|||
|
|
const videoWidth = remoteVideo.videoWidth || 1920;
|
|||
|
|
const videoHeight = remoteVideo.videoHeight || 1080;
|
|||
|
|
|
|||
|
|
const scaleX = screenWidth / rect.width;
|
|||
|
|
const scaleY = screenHeight / rect.height;
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
x: (e.clientX - rect.left) * scaleX,
|
|||
|
|
y: (e.clientY - rect.top) * scaleY,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
remotePanel.addEventListener('mousemove', (e) => {
|
|||
|
|
const coords = getRelativeCoords(e);
|
|||
|
|
sendControlData({ action: 'mousemove', ...coords });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
remotePanel.addEventListener('mousedown', (e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const btn = ['left', 'middle', 'right'][e.button] || 'left';
|
|||
|
|
const coords = getRelativeCoords(e);
|
|||
|
|
sendControlData({ action: 'mousedown', button: btn, ...coords });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
remotePanel.addEventListener('mouseup', (e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const btn = ['left', 'middle', 'right'][e.button] || 'left';
|
|||
|
|
sendControlData({ action: 'mouseup', button: btn });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
remotePanel.addEventListener('contextmenu', (e) => e.preventDefault());
|
|||
|
|
|
|||
|
|
remotePanel.addEventListener('wheel', (e) => {
|
|||
|
|
if (!controlActive) return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
sendControlData({
|
|||
|
|
action: 'scroll',
|
|||
|
|
deltaX: Math.sign(e.deltaX) * 3,
|
|||
|
|
deltaY: Math.sign(e.deltaY) * 3,
|
|||
|
|
});
|
|||
|
|
}, { passive: false });
|
|||
|
|
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (!controlActive) return;
|
|||
|
|
if (e.target.tagName === 'INPUT') return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
const modifiers = [];
|
|||
|
|
if (e.ctrlKey) modifiers.push('control');
|
|||
|
|
if (e.shiftKey) modifiers.push('shift');
|
|||
|
|
if (e.altKey) modifiers.push('alt');
|
|||
|
|
|
|||
|
|
sendControlData({
|
|||
|
|
action: 'keydown',
|
|||
|
|
key: mapKey(e.key),
|
|||
|
|
modifiers,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.addEventListener('keyup', (e) => {
|
|||
|
|
if (!controlActive) return;
|
|||
|
|
if (e.target.tagName === 'INPUT') return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
sendControlData({
|
|||
|
|
action: 'keyup',
|
|||
|
|
key: mapKey(e.key),
|
|||
|
|
modifiers: [],
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function mapKey(key) {
|
|||
|
|
const keyMap = {
|
|||
|
|
'Enter': 'enter', 'Backspace': 'backspace', 'Delete': 'delete',
|
|||
|
|
'Tab': 'tab', 'Escape': 'escape', ' ': 'space',
|
|||
|
|
'ArrowUp': 'up', 'ArrowDown': 'down', 'ArrowLeft': 'left', 'ArrowRight': 'right',
|
|||
|
|
'Home': 'home', 'End': 'end', 'PageUp': 'pageup', 'PageDown': 'pagedown',
|
|||
|
|
'Control': 'control', 'Shift': 'shift', 'Alt': 'alt',
|
|||
|
|
'F1': 'f1', 'F2': 'f2', 'F3': 'f3', 'F4': 'f4', 'F5': 'f5',
|
|||
|
|
'F6': 'f6', 'F7': 'f7', 'F8': 'f8', 'F9': 'f9', 'F10': 'f10',
|
|||
|
|
'F11': 'f11', 'F12': 'f12',
|
|||
|
|
};
|
|||
|
|
return keyMap[key] || key.toLowerCase();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Stopp ───
|
|||
|
|
btnStop.addEventListener('click', () => {
|
|||
|
|
if (localStream) {
|
|||
|
|
localStream.getTracks().forEach((t) => t.stop());
|
|||
|
|
localStream = null;
|
|||
|
|
localVideo.srcObject = null;
|
|||
|
|
localPlaceholder.style.display = '';
|
|||
|
|
}
|
|||
|
|
if (peerConnection) {
|
|||
|
|
peerConnection.close();
|
|||
|
|
peerConnection = null;
|
|||
|
|
}
|
|||
|
|
if (dataChannel) {
|
|||
|
|
dataChannel.close();
|
|||
|
|
dataChannel = null;
|
|||
|
|
}
|
|||
|
|
remoteVideo.srcObject = null;
|
|||
|
|
remotePlaceholder.style.display = '';
|
|||
|
|
controlActive = false;
|
|||
|
|
btnControl.textContent = 'Fernsteuern';
|
|||
|
|
btnControl.className = 'btn-secondary';
|
|||
|
|
peerInfo.textContent = '';
|
|||
|
|
log('Alle Streams gestoppt', 'info');
|
|||
|
|
});
|