@2018kguo/jumpseat 0.1.0 → 0.2.0

package/README.md

@@ -5,12 +5,12 @@ computer-use agent's Linux desktop live (H.264 over one websocket, decoded with
 WebCodecs) and take over when it needs you. No dependencies.
 
 ```ts
-import { connect, supportsStream } from "@2018kguo/jumpseat";
+import { connect } from "@2018kguo/jumpseat";
 
-if (!(await supportsStream())) showFallback(); // no WebCodecs H.264 decoder
 const view = connect(element, `wss://host/stream?token=${token}`, {
   connected: () => {},
   dropped: () => {},
+  unsupported: () => {}, // no WebCodecs H.264 decoder in this browser
   status: ({ kind, text }) => {}, // "acting" | "waiting" | "handoff" | "idle"
 });
 view.setControlling(true); // the person's keys, pointer and scrolls reach the desktop

package/dist/jumpseat.d.ts

@@ -3,13 +3,6 @@
  * WebCodecs onto a canvas, and the user's input sent back while they have
  * taken over. The wire format is in docs/reference.md.
  */
-/** The desktop's size until the server says otherwise. */
-export declare const DESKTOP_WIDTH = 1280;
-export declare const DESKTOP_HEIGHT = 800;
-type Size = {
-    height: number;
-    width: number;
-};
 /** What the agent is doing on the desktop, as the VM reports it. */
 export type AgentStatus = {
     kind: "idle" | "acting" | "waiting" | "handoff";
@@ -19,36 +12,16 @@ export type DesktopStream = {
     close(): void;
     setControlling(controlling: boolean): void;
 };
-type Rect = {
-    height: number;
-    left: number;
-    top: number;
-    width: number;
-};
-/**
- * The desktop pixel under a client point, or null outside the picture. The
- * canvas is letterboxed (object-fit: contain), so the picture is the largest
- * box of the desktop's size centered in the element.
- */
-export declare function desktopPoint(rect: Rect, clientX: number, clientY: number, size?: Size): {
-    x: number;
-    y: number;
-} | null;
-/**
- * The key the VM gets for a KeyboardEvent.key. Meta is Control there, so
- * Cmd+A, Cmd+L and Cmd+C on a Mac do what they do at home.
- */
-export declare function desktopKey(event: Pick<KeyboardEvent, "altKey" | "code" | "ctrlKey" | "key" | "metaKey">): string;
-/** Whether this browser can decode the stream (WebCodecs H.264). */
-export declare function canDecodeDesktop(): boolean;
-/** The codec the server sends: H.264 High profile (CABAC, no B-frames). */
-export declare const STREAM_CODEC = "avc1.640029";
 /**
  * Whether this browser decodes the stream: WebCodecs exists and has an H.264
  * decoder (some Linux Chromium builds ship without one).
  */
 export declare function supportsStream(): Promise<boolean>;
-export declare function connectDesktopStream(container: HTMLElement, socketUrl: string, on: {
+/**
+ * Streams the desktop at socketUrl into container, which it fills. A browser
+ * that cannot decode the stream gets on.unsupported (or on.dropped) instead.
+ */
+export declare function connect(container: HTMLElement, socketUrl: string, on: {
     connected: () => void;
     dropped: () => void;
     status?: (status: AgentStatus) => void;
@@ -62,6 +35,3 @@ export declare function connectDesktopStream(container: HTMLElement, socketUrl:
 options?: {
     resize?: boolean;
 }): DesktopStream;
-/** connect(container, url, handlers): the same as connectDesktopStream. */
-export declare const connect: typeof connectDesktopStream;
-export {};

package/dist/jumpseat.js

@@ -59,12 +59,9 @@ var HEARTBEAT_MS = 5000;
 var FIRST_FRAME_MS = 20000;
 var X_BUTTONS = { 0: 1, 1: 2, 2: 3 };
 var POINTER_ARROW = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20'%3E%3Cpath d='M1 1v15l4-4 3 7 3-1-3-7h6z' fill='white' stroke='black'/%3E%3C/svg%3E")`;
-function canDecodeDesktop() {
-  return typeof window !== "undefined" && "VideoDecoder" in window;
-}
 var STREAM_CODEC = "avc1.640029";
 async function supportsStream() {
-  if (!canDecodeDesktop()) {
+  if (typeof VideoDecoder === "undefined") {
     return false;
   }
   try {
@@ -73,7 +70,11 @@ async function supportsStream() {
     return false;
   }
 }
-function connectDesktopStream(container, socketUrl, on, options = {}) {
+function connect(container, socketUrl, on, options = {}) {
+  if (typeof VideoDecoder === "undefined") {
+    setTimeout(on.unsupported ?? on.dropped);
+    return { close() {}, setControlling() {} };
+  }
   const canvas = document.createElement("canvas");
   const size = { height: DESKTOP_HEIGHT, width: DESKTOP_WIDTH };
   canvas.width = size.width;
@@ -109,23 +110,18 @@ function connectDesktopStream(container, socketUrl, on, options = {}) {
   });
   const socket = new WebSocket(socketUrl);
   socket.binaryType = "arraybuffer";
-  async function checkDecoderSupport() {
-    if (!await supportsStream() && !closed) {
-      closed = true;
-      socket.close();
-      (on.unsupported ?? on.dropped)();
-    }
-  }
-  function drop() {
+  function stop(notify) {
     if (!closed) {
       closed = true;
       clearInterval(heartbeat);
       clearTimeout(firstFrame);
       resizer?.disconnect();
       socket.close();
-      on.dropped();
+      notify();
     }
   }
+  const drop = () => stop(on.dropped);
+  supportsStream().then((ok) => ok || stop(on.unsupported ?? on.dropped));
   const sendAlways = (message) => {
     if (socket.readyState === WebSocket.OPEN) {
       socket.send(JSON.stringify(message));
@@ -193,7 +189,6 @@ function connectDesktopStream(container, socketUrl, on, options = {}) {
       if (!key) {
         return;
       }
-      checkDecoderSupport();
       decoder.configure({
         codec: STREAM_CODEC,
         optimizeForLatency: true
@@ -448,15 +443,7 @@ function desktopPerCssPixel(canvas) {
   const rect = canvas.getBoundingClientRect();
   return 1 / Math.min(rect.width / canvas.width, rect.height / canvas.height);
 }
-var connect = connectDesktopStream;
 export {
-  DESKTOP_HEIGHT,
-  DESKTOP_WIDTH,
-  STREAM_CODEC,
-  canDecodeDesktop,
   connect,
-  connectDesktopStream,
-  desktopKey,
-  desktopPoint,
   supportsStream
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@2018kguo/jumpseat",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Watch and take over a computer-use agent's desktop: the browser client for jumpseat (H.264 over a websocket, WebCodecs).",
   "keywords": [
     "computer-use",