RocketChat · jeanfbrito · Jul 10, 2026 · Jul 8, 2026 · Jul 10, 2026 · Jul 10, 2026
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -267,6 +267,40 @@ export default [
       },
     ],
   },
+  {
+    external: [
+      ...builtinModules,
+      ...Object.keys(appManifest.dependencies),
+      ...Object.keys(appManifest.devDependencies),
+    ].filter((moduleName) => moduleName !== '@bugsnag/js'),
+    input: 'src/screenSharing/screen-picker-window.tsx',
+    preserveEntrySignatures: 'strict',
+    plugins: [
+      json(),
+      replace({
+        'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
+        'preventAssignment': true,
+      }),
+      babel({
+        babelHelpers: 'bundled',
+        extensions,
+      }),
+      nodeResolve({
+        browser: true,
+        extensions,
+      }),
+      commonjs(),
+      run(),
+    ],
+    output: [
+      {
+        dir: 'app',
+        format: 'cjs',
+        sourcemap: 'inline',
+        interop: 'auto',
+      },
+    ],
+  },
   {
     external: [
       ...builtinModules,

diff --git a/src/public/screen-picker-window.html b/src/public/screen-picker-window.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+    />
+    <title>Screen Sharing - Rocket.Chat</title>
+    <link rel="stylesheet" href="./main.css" />
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        background-color: #2f343d;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+          'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+          'Helvetica Neue', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      #root {
+        width: 100%;
+        height: 100vh;
+      }
+    </style>
+    <link rel="stylesheet" href="./icons/rocketchat.css" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./screen-picker-window.js"></script>
+  </body>
+</html>
diff --git a/src/screenSharing/ScreenSharingRequestTracker.ts b/src/screenSharing/ScreenSharingRequestTracker.ts
@@ -5,17 +5,38 @@ import type { DisplayMediaCallback } from './screenPicker/types';
 
 const DEFAULT_TIMEOUT = 60000;
 
+type CreateRequestOptions = {
+  isStillValid?: () => boolean;
+  onDone?: () => void;
+};
+
+type ScreenSharingRequestHandle = {
+  cancel: () => void;
+};
+
+type QueueEntry = {
+  requestId: string;
+  cb: DisplayMediaCallback;
+  sendOpenPicker: () => void;
+  options?: CreateRequestOptions;
+  settled: boolean;
+};
+
 export class ScreenSharingRequestTracker {
   private activeListener:
     | ((event: Event, sourceId: string | null) => void)
     | null = null;
 
   private activeRequestId: string | null = null;
 
+  private activeEntry: QueueEntry | null = null;
+
   private timeout: NodeJS.Timeout | null = null;
 
   private isPending = false;
 
+  private queue: QueueEntry[] = [];
+
   constructor(
     private readonly responseChannel: string,
     private readonly label: string,
@@ -33,8 +54,27 @@ export class ScreenSharingRequestTracker {
       this.timeout = null;
     }
 
+    const active = this.activeEntry;
     this.activeRequestId = null;
+    this.activeEntry = null;
     this.isPending = false;
+
+    if (active && !active.settled) {
+      active.settled = true;
+      active.cb(null);
+      active.options?.onDone?.();
+    }
+
+    const drained = this.queue;
+    this.queue = [];
+    drained.forEach((entry) => {
+      if (entry.settled) {
+        return;
+      }
+      entry.settled = true;
+      entry.cb(null);
+      entry.options?.onDone?.();
+    });
   }
 
   private removeListenerOnly(): void {
@@ -51,43 +91,68 @@ export class ScreenSharingRequestTracker {
 
   private markComplete(): void {
     this.activeRequestId = null;
+    this.activeEntry = null;
     this.isPending = false;
   }
 
   get pending(): boolean {
     return this.isPending;
   }
 
-  createRequest(cb: DisplayMediaCallback, sendOpenPicker: () => void): void {
-    if (this.isPending) {
-      console.warn(`${this.label}: request already pending, ignoring`);
-      cb({ video: false } as any);
+  private finishActive(entry: QueueEntry): void {
+    this.markComplete();
+    entry.settled = true;
+    entry.options?.onDone?.();
+    this.processNext();
+  }
+
+  private cancelActiveEntry(entry: QueueEntry): void {
+    this.removeListenerOnly();
+    this.markComplete();
+    entry.settled = true;
+    entry.cb(null);
+    entry.options?.onDone?.();
+  }
+
+  private processNext(): void {
+    const entry = this.queue.shift();
+    if (!entry) {
       return;
     }
 
-    this.cleanup();
+    if (entry.options?.isStillValid && !entry.options.isStillValid()) {
+      entry.settled = true;
+      entry.cb(null);
+      entry.options?.onDone?.();
+      this.processNext();
+      return;
+    }
 
-    const requestId = `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+    this.startRequest(entry);
+  }
+
+  private startRequest(entry: QueueEntry): void {
+    this.removeListenerOnly();
+
+    const { requestId } = entry;
     this.activeRequestId = requestId;
+    this.activeEntry = entry;
     this.isPending = true;
 
-    let callbackInvoked = false;
-
     const listener = async (_event: Event, sourceId: string | null) => {
       if (this.activeRequestId !== requestId) {
         return;
       }
 
-      if (callbackInvoked) {
+      if (entry.settled) {
         return;
       }
-      callbackInvoked = true;
 
       this.removeListenerOnly();
-      this.markComplete();
 
       if (!sourceId) {
-        cb({ video: false } as any);
+        entry.cb(null);
+        this.finishActive(entry);
         return;
       }
 
@@ -96,21 +161,32 @@ export class ScreenSharingRequestTracker {
           types: ['window', 'screen'],
         });
 
+        if (entry.settled) {
+          return;
+        }
+
         const selectedSource = sources.find((s) => s.id === sourceId);
 
         if (!selectedSource) {
           console.warn(
             `${this.label}: selected source no longer available:`,
             sourceId
           );
-          cb({ video: false } as any);
+          entry.cb(null);
+          this.finishActive(entry);
           return;
         }
 
-        cb({ video: selectedSource });
+        entry.cb({ video: selectedSource });
+        this.finishActive(entry);
       } catch (error) {
+        if (entry.settled) {
+          return;
+        }
+
         console.error(`${this.label}: error validating source:`, error);
-        cb({ video: false } as any);
+        entry.cb(null);
+        this.finishActive(entry);
       }
     };
 
@@ -121,18 +197,78 @@ export class ScreenSharingRequestTracker {
         return;
       }
 
-      if (callbackInvoked) {
+      if (entry.settled) {
         return;
       }
-      callbackInvoked = true;
 
       console.warn(`${this.label}: request timed out, cleaning up`);
       this.removeListenerOnly();
-      this.markComplete();
-      cb({ video: false } as any);
+      entry.cb(null);
+      this.finishActive(entry);
     }, this.timeoutMs);
 
     ipcMain.once(this.responseChannel, listener);
-    sendOpenPicker();
+    entry.sendOpenPicker();
+  }
+
+  createRequest(
+    cb: DisplayMediaCallback,
+    sendOpenPicker: () => void,
+    options?: CreateRequestOptions
+  ): ScreenSharingRequestHandle {
+    const requestId = `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+    const entry: QueueEntry = {
+      requestId,
+      cb,
+      sendOpenPicker,
+      options,
+      settled: false,
+    };
+
+    if (this.isPending) {
+      this.queue.push(entry);
+    } else {
+      this.cleanup();
+      this.startRequest(entry);
+    }
+
+    return {
+      cancel: () => {
+        if (entry.settled) {
+          return;
+        }
+
+        if (this.activeEntry === entry) {
+          this.cancelActiveEntry(entry);
+          this.processNext();
+          return;
+        }
+
+        const index = this.queue.indexOf(entry);
+        if (index !== -1) {
+          this.queue.splice(index, 1);
+          entry.settled = true;
+          entry.cb(null);
+          entry.options?.onDone?.();
+        }
+      },
+    };
+  }
+
+  cancelAll(): void {
+    if (this.activeEntry && !this.activeEntry.settled) {
+      this.cancelActiveEntry(this.activeEntry);
+    }
+
+    const drained = this.queue;
+    this.queue = [];
+    drained.forEach((entry) => {
+      if (entry.settled) {
+        return;
+      }
+      entry.settled = true;
+      entry.cb(null);
+      entry.options?.onDone?.();
+    });
   }
 }