Mouse Precision Algorithm Have A Gap On Different Screens For Remote Desktop App Made Made By Electron

Question

Hey I Made My Electron Js Application Its A Combination Of WebRTC Socket IO For Reciver App ( This App Installed on remote pc it send back video stream) Sender APP ( This App also made in electron js but uses react js framework )

So Sender App record mouse moment on video source of reciver app so it look like we are hovering on screeen issue is that i am facing gap from my mouse and remote pc mouse means its not precise

type here

I found many algorith nothing helps here my github repo for sender Github Repo for reciver app for remote screen

here is repo for sender which can send remote cordinates repo of sender

Here is litttle explaination

Sender App Code ( Electron , react )

  //Mouse ClickL Event
  const handleMouseClick = ({
    clientX,
    clientY,
  }) =>{
    //scr element
// const screlement = document.getElementById('remscreen');
// const clientWidth = screlement.offsetWidth;
// const clientHeight = screlement.offsetHeight;

      socket.emit("mouseclickl" , {
        clientX,
        clientY,
        // clientWidth,
        // clientHeight,
        clientWidth: window.innerWidth,
        clientHeight: window.innerHeight,
        room,
      })
  }

  return (
    <>
      <div id="bg" onMouseLeave={() => {}}>
        <div
          className="controlpin"
          id="controlpin"
          ref={controllerPinRef}
          onClick={() => {
            controllerPanel.current.style.visibility = "visible";
            controllerPinRef.current.style.visibility = "hidden";
            controllerPanel.current.style.zIndex = "10";
            controllerPinRef.current.style.zIndex = "8";
          }}
        >
          {" "}
        </div>

        <div
          className="controller"
          id="controller"
          ref={controllerPanel}
          onMouseEnter={() => {
            setIsMouseOnPanel(true);
          }}
          onMouseLeave={() => {}}
        >
          <input
            type="text"
            id="roomInput"
            ref={inputRoom}
            onChange={handleRoomInputChange}
          />
          <button onClick={joinRoom} id="connect_user">
            Connect User{" "}
          </button>
          {/* <input type="text" id='input' ref={inputValue} onChange={(e)=>{ setMessage(e.target.value)}} placeholder='enter message ' /> */}
          {/* <button onClick={sendMessage} >Send Message</button> */}
          <div className="samplethressdiv">
            <input
              type="text"
              id="samplethres"
              onChange={handlesamplethress}
              placeholder="sampling thresold"
            />
            <label htmlFor="samplethres">Sampling Thresold</label>
          </div>
          <div className="disablemousecdiv">
            <input
              type="checkbox"
              id="myCheckbox"
              label="Disable Client Mouse"
              checked={isMouseHide}
              onChange={handleChange}
            />
            <label htmlFor="myCheckbox">Disable Client Mouse</label>
          </div>
          <div className="changeCtrlPos">
            <button
              onClick={() => {
                document.getElementById("controlpin").style.cssText =
                  "right: 1200px";
              }}
            >
              Left
            </button>
            <button
              onClick={() => {
                document.getElementById("controlpin").style.cssText =
                  "left: 1200px";
              }}
            >
              Right
            </button>
          </div>
          <div className="toggerdiv">
            <button
              className="toggerdiv_button"
              onClick={() => {
                if (enableToggler == false) {
                  setEnableToggler(true);
                } else {
                  setEnableToggler(false);
                }
              }}
            >
              Mouse Toggler
            </button>
          </div>
          <div>
            <button onClick={getImage}>Capture Screenshot</button>
          </div>
          <button
            className="closepenlbtn"
            onClick={() => {
              controllerPanel.current.style.visibility = "hidden";
              controllerPinRef.current.style.visibility = "visible";
            }}
          >
            {" "}
            close panel
          </button>
        </div>

        <div
          className="remscreendiv"
          onMouseMove={handleMouseMove}
          onMouseDown={handleMouseDown}
          onMouseUp={handleMouseUp}
          onClick={handleMouseClick}
          onContextMenu={(event) => {
            if (event.button === 2) {
              event.preventDefault();
              socket.emit("mouseclickr", { room });
              console.log("You right-clicked on the element!");
            }
          }}
        >
          <video id="remscreen" ref={remoteVideoRef} />
        </div>

        <video id="myscreen" ref={currentUserVideoRef} />
        <img src={image} alt="screenshot" />
        <h1> Width : {clientWidth}</h1>
        <h1> Height : {clientHeight}</h1>
      </div>
    </>
  );
}

export default App

Here Is Receiver

// //mouse codinates
socket.on("mouse_cord", (data) => {
  const { screen } = require("electron");
  // const primaryDisplay = screen.getPrimaryDisplay();
  // const { width, height } = primaryDisplay.workAreaSize;

     const primaryDisplay = screen.getPrimaryDisplay();
     const screenWidth = primaryDisplay.bounds.width;
     const screenHeight = primaryDisplay.bounds.height;

  // Calculate scaling factors
  const ratioX = screenWidth / data.clientWidth;
  const ratioY = screenHeight / data.clientHeight;
  const scaledX = data.clientX * ratioX;
  const scaledY = data.clientY * ratioY;

  keepMouseOut(data.isMouseHide);

  //  console.log("Mouse is at x:" + mouse.x + " y:" + mouse.y);
  console.log("Hey its client width " + data.clientWidth);
  console.log("Hey its client height " + data.clientHeight);

  // robot.moveMouse(hostX, hostY);
  // console.log(`Current screen width: ${width}`);
  // console.log(`Current screen height: ${height}`);

  // mouse cord active handelling mode
  if (data.enableToggler == true) {
  const { screen } = require("electron");
  // const primaryDisplay = screen.getPrimaryDisplay();
  // const { width, height } = primaryDisplay.workAreaSize;

  const primaryDisplay = screen.getPrimaryDisplay();
  const screenWidth = primaryDisplay.bounds.width;
  const screenHeight = primaryDisplay.bounds.height;

    // Calculate scaling factors
    const ratioX = screenWidth / data.clientWidth;
    const ratioY = screenHeight / data.clientHeight;
    const scaledX = data.clientX * ratioX;
    const scaledY = data.clientY * ratioY;

  console.log("Mouse Cord Data Starts Here")
  console.log("===============================================================")
  console.log("Client Width : " +  data.clientWidth);
  console.log("Client Height : " + data.clientHeight);
  console.log("");
  console.log("============== Client ScreenData ==================");
  console.log("Screen Width : " + screenWidth );
  console.log("Screen Height : " +  screenHeight)
console.log("");
console.log("============== Scaled Count ==================");
console.log("scaled count X :" + scaledX);
console.log("scaled count Y :" + scaledY);



    robot.setMouseDelay(0);
    robot.moveMouse(scaledX, scaledY);
    var mouse = robot.getMousePos();
    robot.moveMouseSmooth(mouse.x, mouse.y);
    console.log("system mouse x" + mouse.x);
    console.log("system mouse y" + mouse.y);
  } else {
    console.log(data.enableToggler + " : toggler ");
  }
});

I know code can bad practise , but issue is relevant

First Of All I Am Making Remote Desktop Connection From Those Apps I Have Application Which Launched On Pc I Want To Control And In Problem Statement I call it reciver because it recives mouse cordinates from sender app

Now Sender Send Mouse Cordinates Captured On Div In React Js It send I Used Common Foud Algorith for pointer alignment for both screen

Issue Is : My Algorith Is Not Working Welll There Gap Between Reciver Device And Sender (controller ) help me fix that

Keep In Mind Both Apps Are Electron Forge , React JS