Electron远程桌面应用不同屏幕鼠标精度偏移问题求助

问题根源 #

你的鼠标偏移、精度不足问题核心在于坐标基准错误：Sender端用整个窗口尺寸作为映射基准，但实际操作区域是远程视频的显示容器，且WebRTC视频流可能存在缩放黑边、分辨率动态变化的情况，导致原始映射逻辑完全脱离实际有效操作区域。

Sender端：修正坐标捕获与发送逻辑 #

必须基于视频显示容器的实际渲染尺寸和视频流的原始分辨率计算归一化坐标，排除黑边干扰，确保发送的是有效视频区域内的相对位置。

// Sender端：绑定视频容器的鼠标事件
const videoContainer = document.getElementById('remote-video-container');
const videoElement = videoContainer.querySelector('video');

videoContainer.addEventListener('mousemove', (e) => {
  // 1. 获取容器的实际渲染区域（去除border、padding）
  const containerRect = videoContainer.getBoundingClientRect();
  // 计算鼠标在容器内的相对坐标
  const containerX = e.clientX - containerRect.left;
  const containerY = e.clientY - containerRect.top;

  // 2. 获取视频流的原始分辨率
  const videoWidth = videoElement.videoWidth;
  const videoHeight = videoElement.videoHeight;
  if (!videoWidth || !videoHeight) return; // 视频未加载时跳过

  // 3. 处理容器与视频的比例差异，过滤黑边区域
  const containerRatio = containerRect.width / containerRect.height;
  const videoRatio = videoWidth / videoHeight;

  let normalizedX, normalizedY;

  if (containerRatio > videoRatio) {
    // 容器比视频宽，左右存在黑边，计算有效视频区域的偏移和宽度
    const effectiveVideoWidth = containerRect.height * videoRatio;
    const xOffset = (containerRect.width - effectiveVideoWidth) / 2;
    normalizedX = (containerX - xOffset) / effectiveVideoWidth;
    normalizedY = containerY / containerRect.height;
  } else {
    // 容器比视频高，上下存在黑边，计算有效视频区域的偏移和高度
    const effectiveVideoHeight = containerRect.width / videoRatio;
    const yOffset = (containerRect.height - effectiveVideoHeight) / 2;
    normalizedX = containerX / containerRect.width;
    normalizedY = (containerY - yOffset) / effectiveVideoHeight;
  }

  // 4. 过滤超出有效视频区域的坐标（比如点击黑边），并发送归一化坐标（0~1范围）
  if (normalizedX >= 0 && normalizedX <= 1 && normalizedY >= 0 && normalizedY <= 1) {
    socket.emit('mouse-move', {
      normalizedX: Number(normalizedX.toFixed(6)), // 保留6位小数保证精度
      normalizedY: Number(normalizedY.toFixed(6))
    });
  }
});

Receiver端：简化坐标映射逻辑 #

直接用Sender发送的归一化坐标乘以被控端屏幕的实际尺寸即可，无需额外比例计算，同时用取整保证鼠标位置精度。

// Receiver端：接收坐标并映射到被控端屏幕
const { screen } = require('electron');
const robot = require('robotjs'); // 或其他鼠标控制库

socket.on('mouse-move', (data) => {
  const { normalizedX, normalizedY } = data;
  // 获取被控端主屏幕的实际分辨率
  const mainScreen = screen.getPrimaryDisplay();
  const screenWidth = mainScreen.bounds.width;
  const screenHeight = mainScreen.bounds.height;

  // 计算实际屏幕坐标，取整消除浮点精度问题
  const targetX = Math.round(normalizedX * screenWidth);
  const targetY = Math.round(normalizedY * screenHeight);

  // 移动鼠标
  robot.moveMouse(targetX, targetY);
});

额外优化建议 #

• 节流鼠标事件：用节流函数（如_.throttle）限制mousemove事件的发送频率（比如100ms/次），减少网络开销和坐标抖动
• 监听视频分辨率变化：给videoElement绑定resize事件，实时更新视频分辨率参数
• 多屏幕支持：如果被控端有多个屏幕，Sender端可增加屏幕选择功能，发送时携带目标屏幕索引，Receiver端对应映射到目标屏幕的尺寸

内容的提问来源于stack exchange，提问作者BUGS OF 18