Improve screencast performance: lower defaults, fps cap, drop mousemove flood

Co-authored-by: Cursor <cursoragent@cursor.com>

static/viewer.js

@@ -8,11 +8,16 @@
   const overlayMsg = document.getElementById("overlay-msg");
 
   let ws = null;
-  let viewportWidth = 1280;
-  let viewportHeight = 720;
+  let viewportWidth = 1024;
+  let viewportHeight = 576;
   let scaleX = 1;
   let scaleY = 1;
   let pingTimer = null;
+  let pendingFrame = null;
+  let frameScheduled = false;
+  let frameCount = 0;
+  let lastFpsTime = performance.now();
+  const frameImage = new Image();
 
   const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
   const wsUrl = `${wsProtocol}//${window.location.host}/ws/${sessionId}`;
@@ -39,21 +44,45 @@
     }
   }
 
-  function drawFrame(blob) {
-    const img = new Image();
-    const url = URL.createObjectURL(blob);
-    img.onload = () => {
-      if (canvas.width !== img.width || canvas.height !== img.height) {
-        canvas.width = img.width;
-        canvas.height = img.height;
-        viewportWidth = img.width;
-        viewportHeight = img.height;
-        updateScale();
+  function drawDecodedFrame() {
+    if (canvas.width !== frameImage.width || canvas.height !== frameImage.height) {
+      canvas.width = frameImage.width;
+      canvas.height = frameImage.height;
+      viewportWidth = frameImage.width;
+      viewportHeight = frameImage.height;
+      updateScale();
+    }
+    ctx.drawImage(frameImage, 0, 0);
+    frameCount += 1;
+    const now = performance.now();
+    if (now - lastFpsTime >= 2000) {
+      const fps = Math.round((frameCount * 1000) / (now - lastFpsTime));
+      setStatus(`已连接 · ${fps} fps`);
+      frameCount = 0;
+      lastFpsTime = now;
+    }
+  }
+
+  function scheduleFrame(arrayBuffer) {
+    pendingFrame = arrayBuffer;
+    if (frameScheduled) {
+      return;
+    }
+    frameScheduled = true;
+    requestAnimationFrame(() => {
+      frameScheduled = false;
+      if (!pendingFrame) {
+        return;
       }
-      ctx.drawImage(img, 0, 0);
-      URL.revokeObjectURL(url);
-    };
-    img.src = url;
+      const blob = new Blob([pendingFrame], { type: "image/jpeg" });
+      pendingFrame = null;
+      const url = URL.createObjectURL(blob);
+      frameImage.onload = () => {
+        URL.revokeObjectURL(url);
+        drawDecodedFrame();
+      };
+      frameImage.src = url;
+    });
   }
 
   function updateScale() {
@@ -73,7 +102,7 @@
 
     ws.onmessage = (event) => {
       if (event.data instanceof ArrayBuffer) {
-        drawFrame(new Blob([event.data], { type: "image/jpeg" }));
+        scheduleFrame(event.data);
         return;
       }
 
@@ -124,11 +153,6 @@
     send({ action: "wheel", deltaX: e.deltaX, deltaY: e.deltaY });
   }, { passive: false });
 
-  canvas.addEventListener("mousemove", (e) => {
-    const { x, y } = mapCoords(e.clientX, e.clientY);
-    send({ action: "mousemove", x, y });
-  });
-
   const specialKeys = new Set([
     "Enter", "Backspace", "Delete", "Tab", "Escape",
     "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight",