Send touch edges on low latency RTC input

Author: DjDeveloperr

client/src/app/AppShell.tsx

@@ -849,7 +849,7 @@ export function AppShell({
       sendControl(
         selectedSimulator.udid,
         { type: "touch", ...coords, phase },
-        { realtime: phase === "moved" },
+        { realtime: true },
       );
     },
     onTouchPreview: showTouchIndicator,

client/src/features/input/usePointerInput.ts

@@ -33,6 +33,7 @@ export function usePointerInput({
   onTouchPreview,
 }: UsePointerInputOptions) {
   const activePointerRef = useRef<number | null>(null);
+  const sentMoveThisFrameRef = useRef(false);
   const moveFrameRef = useRef<number>(0);
   const panningRef = useRef<{
     startX: number;
@@ -52,17 +53,34 @@ export function usePointerInput({
   }, []);
 
   function queueMove(coords: Point) {
+    if (!sentMoveThisFrameRef.current) {
+      sentMoveThisFrameRef.current = true;
+      onTouch("moved", coords);
+      if (!moveFrameRef.current) {
+        moveFrameRef.current = requestAnimationFrame(() => {
+          moveFrameRef.current = 0;
+          sentMoveThisFrameRef.current = false;
+          const nextCoords = queuedMoveRef.current;
+          queuedMoveRef.current = null;
+          if (nextCoords) {
+            queueMove(nextCoords);
+          }
+        });
+      }
+      return;
+    }
     queuedMoveRef.current = coords;
     if (moveFrameRef.current) {
       return;
     }
 
     moveFrameRef.current = requestAnimationFrame(() => {
       moveFrameRef.current = 0;
+      sentMoveThisFrameRef.current = false;
       const nextCoords = queuedMoveRef.current;
       queuedMoveRef.current = null;
       if (nextCoords) {
-        onTouch("moved", nextCoords);
+        queueMove(nextCoords);
       }
     });
   }
@@ -73,6 +91,7 @@ export function usePointerInput({
       moveFrameRef.current = 0;
     }
     queuedMoveRef.current = null;
+    sentMoveThisFrameRef.current = false;
   }
 
   function startPanning(event: React.PointerEvent<HTMLElement>) {

client/src/features/stream/streamWorkerClient.ts

@@ -162,7 +162,7 @@ class WebRtcStreamClient implements StreamClientBackend {
       const realtimeInputChannel = peerConnection.createDataChannel(
         WEBRTC_REALTIME_INPUT_CHANNEL_LABEL,
         {
-          maxRetransmits: 0,
+          maxRetransmits: 1,
           ordered: false,
         },
       );