eedatek-electron-screenrecord 2.0.9

package/lib/demo.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/demo.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable no-console */
+const electron_1 = require("electron");
+const _1 = __importDefault(require("."));
+const padStart_1 = __importDefault(require("./padStart"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const console_1 = require("console");
+let mediaStream; // 视频流
+let audioStream; // 声音流
+let mediaRecorder; // 媒体录制器对象
+let recordedChunks; // 存储录制的音频数据
+let sreenSources; //所有屏幕
+let worker;
+electron_1.app.whenReady().then(() => {
+    const screenshots = new _1.default({ singleWindow: false, logger: console_1.log });
+    electron_1.globalShortcut.register('ctrl+shift+a', () => {
+        screenshots.startCapture();
+    });
+    screenshots.on('windowCreated', ($win) => {
+        $win.on('focus', () => {
+            electron_1.globalShortcut.register('esc', () => {
+                screenshots.endCapture();
+            });
+        });
+        //$win.webContents.openDevTools();
+        // const defaultSession = session.defaultSession;
+        // defaultSession.setDisplayMediaRequestHandler((request, callback) => {
+        //   desktopCapturer.getSources({types: ['screen']}).then((sources) => {
+        //       // Grant access to the first screen found.
+        //       callback({video: sources[0]});
+        //   });
+        // });
+        // defaultSession.setPermissionRequestHandler((webContents, permission, callback) => {
+        //   if (permission === 'media') {
+        //     console.log('33333333333')
+        //     return callback(true)
+        //   }
+        //   return callback(true)
+        // })
+        $win.on('blur', () => {
+            electron_1.globalShortcut.unregister('esc');
+        });
+    });
+    // 防止不能关闭
+    electron_1.globalShortcut.register('ctrl+shift+q', () => {
+        electron_1.app.quit();
+    });
+    // 录屏结束
+    screenshots.on('stop', async (e, data) => {
+        e.preventDefault();
+        screenshots.endCapture();
+        if (data) {
+            const time = new Date();
+            const year = time.getFullYear();
+            const month = (0, padStart_1.default)(time.getMonth() + 1, 2, '0');
+            const date = (0, padStart_1.default)(time.getDate(), 2, '0');
+            const hours = (0, padStart_1.default)(time.getHours(), 2, '0');
+            const minutes = (0, padStart_1.default)(time.getMinutes(), 2, '0');
+            const seconds = (0, padStart_1.default)(time.getSeconds(), 2, '0');
+            const milliseconds = (0, padStart_1.default)(time.getMilliseconds(), 3, '0');
+            const { canceled, filePath } = await electron_1.dialog.showSaveDialog(mainWin, {
+                defaultPath: `${year}${month}${date}${hours}${minutes}${seconds}${milliseconds}.webm`,
+            });
+            if (canceled || !filePath) {
+                return;
+            }
+            await fs_extra_1.default.writeFile(filePath, Buffer.from(data));
+        }
+    });
+    const mainWin = new electron_1.BrowserWindow({
+        show: true,
+    });
+    mainWin.removeMenu();
+    mainWin.loadURL('https://www.j2l3x.com/');
+});
+electron_1.app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        electron_1.app.quit();
+    }
+});

package/lib/event.d.ts

@@ -0,0 +1,4 @@
+export default class Event {
+    defaultPrevented: boolean;
+    preventDefault(): void;
+}

package/lib/event.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class Event {
+    defaultPrevented = false;
+    preventDefault() {
+        this.defaultPrevented = true;
+    }
+}
+exports.default = Event;

package/lib/getDisplay.d.ts

@@ -0,0 +1,7 @@
+import { Rectangle } from 'electron';
+export interface Display extends Rectangle {
+    id: number;
+    scaleFactor: number;
+}
+declare const _default: () => Display;
+export default _default;

package/lib/getDisplay.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const electron_1 = require("electron");
+exports.default = () => {
+    const point = electron_1.screen.getCursorScreenPoint();
+    const { id, bounds, scaleFactor } = electron_1.screen.getDisplayNearestPoint(point);
+    // https://github.com/nashaofu/screenshots/issues/98
+    return {
+        id,
+        x: Math.floor(bounds.x),
+        y: Math.floor(bounds.y),
+        width: Math.floor(bounds.width),
+        height: Math.floor(bounds.height),
+        scaleFactor,
+    };
+};

package/lib/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = require('.').default;

package/lib/index.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="node" />
+import { Debugger } from "debug";
+import { BrowserWindow } from "electron";
+import Events from "events";
+import { Bounds } from "./preload";
+export type LoggerFn = (...args: unknown[]) => void;
+export type Logger = Debugger | LoggerFn;
+export interface Lang {
+    magnifier_position_label?: string;
+    operation_ok_title?: string;
+    operation_cancel_title?: string;
+    operation_save_title?: string;
+    operation_redo_title?: string;
+    operation_undo_title?: string;
+    operation_mosaic_title?: string;
+    operation_text_title?: string;
+    operation_brush_title?: string;
+    operation_arrow_title?: string;
+    operation_ellipse_title?: string;
+    operation_rectangle_title?: string;
+}
+export interface ScreenRecordOpts {
+    lang?: Lang;
+    logger?: Logger;
+    singleWindow?: boolean;
+}
+export { Bounds };
+export default class ScreenRecord extends Events {
+    $win: BrowserWindow | null;
+    private logger;
+    private singleWindow;
+    private isReadyState;
+    private buttonBounds;
+    private isRecording;
+    private mouseMoveListener;
+    constructor(opts?: ScreenRecordOpts);
+    updateButtonBounds(bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }): void;
+    private startMouseTracking;
+    private stopMouseTracking;
+    private isMouseInButtonArea;
+    /**
+     * 开始录屏
+     */
+    startCapture(): Promise<void>;
+    /**
+     * 结束录屏
+     */
+    endCapture(): Promise<void>;
+    /**
+     * 设置语言
+     */
+    setLang(lang: Partial<Lang>): Promise<void>;
+    private reset;
+    /**
+     * 初始化窗口
+     */
+    private createWindow;
+    private capture;
+    /**
+     * 绑定ipc时间处理
+     */
+    private listenIpc;
+}

package/lib/index.js

@@ -0,0 +1,429 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const debug_1 = __importDefault(require("debug"));
+const electron_1 = require("electron");
+const events_1 = __importDefault(require("events"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const event_1 = __importDefault(require("./event"));
+const getDisplay_1 = __importDefault(require("./getDisplay"));
+const padStart_1 = __importDefault(require("./padStart"));
+const path_1 = __importDefault(require("path"));
+class ScreenRecord extends events_1.default {
+    // 截图窗口对象
+    $win = null;
+    logger;
+    singleWindow;
+    isReadyState = false;
+    buttonBounds;
+    isRecording = false;
+    mouseMoveListener = null;
+    constructor(opts) {
+        super();
+        this.logger = opts?.logger || (0, debug_1.default)("electron-screenshots");
+        this.singleWindow = opts?.singleWindow || false;
+        this.listenIpc();
+        this.buttonBounds = { x: 0, y: 0, width: 100, height: 100 };
+    }
+    //更新开始、结束录屏按钮区域
+    updateButtonBounds(bounds) {
+        this.logger(`updateButtonBounds x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`);
+        this.buttonBounds = bounds;
+    }
+    startMouseTracking() {
+        if (this.mouseMoveListener)
+            return;
+        // 监听全局鼠标移动
+        this.mouseMoveListener = (event) => {
+            if (!this.isRecording)
+                return;
+            const mousePos = electron_1.screen.getCursorScreenPoint();
+            const winBounds = this.$win?.getBounds();
+            // 计算鼠标是否在按钮区域内
+            const isInButtonArea = this.isMouseInButtonArea(mousePos, winBounds);
+            if (isInButtonArea) {
+                // 鼠标在按钮区域，启用鼠标事件
+                this.$win?.setIgnoreMouseEvents(false);
+            }
+            else {
+                // 鼠标不在按钮区域，忽略鼠标事件
+                this.$win?.setIgnoreMouseEvents(true, { forward: true });
+            }
+        };
+        // 高频监听鼠标移动
+        setInterval(this.mouseMoveListener, 50); // 每50ms检查一次
+    }
+    stopMouseTracking() {
+        if (this.mouseMoveListener) {
+            clearInterval(this.mouseMoveListener);
+            this.mouseMoveListener = null;
+        }
+    }
+    isMouseInButtonArea(mousePos, winBounds) {
+        // 计算按钮在屏幕上的绝对位置
+        const buttonScreenPos = {
+            x: winBounds.x + this.buttonBounds.x,
+            y: winBounds.y + this.buttonBounds.y,
+            width: this.buttonBounds.width,
+            height: this.buttonBounds.height,
+        };
+        return (mousePos.x >= buttonScreenPos.x &&
+            mousePos.x <= buttonScreenPos.x + buttonScreenPos.width &&
+            mousePos.y >= buttonScreenPos.y &&
+            mousePos.y <= buttonScreenPos.y + buttonScreenPos.height);
+    }
+    /**
+     * 开始录屏
+     */
+    async startCapture() {
+        this.logger("startCapture");
+        const display = (0, getDisplay_1.default)();
+        //全屏的截图base64
+        const [imageUrl] = await Promise.all([this.capture(display)]);
+        await this.createWindow(display, imageUrl);
+    }
+    // /**
+    //  * 发送提示消息
+    //  */
+    //   public async sendTip(message: string): Promise<void> {
+    //     this.logger('sendtip');
+    //     this.$view.webContents.send('SCREENRECORD:tip', message);
+    //   }
+    /**
+     * 结束录屏
+     */
+    async endCapture() {
+        this.logger("endCapture");
+        await this.reset();
+        if (!this.$win) {
+            return;
+        }
+        // 先清除 Kiosk 模式，然后取消全屏才有效
+        this.$win.setKiosk(false);
+        this.$win.blur();
+        this.$win.blurWebView();
+        this.$win.unmaximize();
+        // this.$win.removeBrowserView(this.$view);
+        if (this.singleWindow) {
+            this.$win.hide();
+        }
+        else {
+            this.$win.destroy();
+        }
+    }
+    /**
+     * 设置语言
+     */
+    async setLang(lang) {
+        this.logger("setLang", lang);
+        // await this.isReady;
+        // this.$view.webContents.send('SCREENRECORD:setLang', lang);
+    }
+    async reset() {
+        // 重置选择区域
+        this.$win?.webContents.send("SCREENRECORD:reset");
+        // 保证 UI 有足够的时间渲染
+        await Promise.race([
+            new Promise((resolve) => {
+                setTimeout(() => resolve(), 500);
+            }),
+            new Promise((resolve) => {
+                electron_1.ipcMain.once("SCREENRECORD:reset", () => resolve());
+            }),
+        ]);
+    }
+    /**
+     * 初始化窗口
+     */
+    async createWindow(display, imageUrl) {
+        // 重置截图区域
+        await this.reset();
+        // 复用未销毁的窗口
+        if (!this.$win || this.$win?.isDestroyed?.()) {
+            const windowTypes = {
+                darwin: "panel",
+                // linux 必须设置为 undefined，否则会在部分系统上不能触发focus 事件
+                // https://github.com/nashaofu/screenshots/issues/203#issuecomment-1518923486
+                linux: undefined,
+                win32: "toolbar",
+            };
+            this.$win = new electron_1.BrowserWindow({
+                title: "screenrecord",
+                x: display.x,
+                y: display.y,
+                width: display.width,
+                height: display.height,
+                useContentSize: true,
+                type: windowTypes[process.platform],
+                frame: false,
+                show: false,
+                autoHideMenuBar: true,
+                transparent: true,
+                resizable: false,
+                movable: false,
+                minimizable: false,
+                maximizable: false,
+                // focusable 必须设置为 true, 否则窗口不能及时响应esc按键，输入框也不能输入
+                focusable: true,
+                skipTaskbar: true,
+                alwaysOnTop: true,
+                /**
+                 * linux 下必须设置为false，否则不能全屏显示在最上层
+                 * mac 下设置为false，否则可能会导致程序坞不恢复问题，且与 kiosk 模式冲突
+                 */
+                fullscreen: false,
+                // mac fullscreenable 设置为 true 会导致应用崩溃
+                fullscreenable: false,
+                kiosk: true,
+                backgroundColor: "#00000000",
+                titleBarStyle: "hidden",
+                hasShadow: false,
+                paintWhenInitiallyHidden: false,
+                // mac 特有的属性
+                roundedCorners: false,
+                enableLargerThanScreen: false,
+                acceptFirstMouse: true,
+                webPreferences: {
+                    preload: require.resolve("./preload.js"),
+                },
+            });
+            this.emit("windowCreated", this.$win);
+            this.$win.on("show", () => {
+                this.$win?.focus();
+                this.$win?.setKiosk(true);
+                setTimeout(() => {
+                    this.$win?.webContents.send("SCREENRECORD:capture", display, imageUrl, process.platform === "linux");
+                }, 400);
+            });
+            // this.$win.on('minimize',(e:MouseEvent)=>{
+            //   console.log('触发了最小化');
+            //   e.preventDefault();
+            // })
+            this.$win.on("closed", () => {
+                this.emit("windowClosed", this.$win);
+                this.$win = null;
+                // this.stopMouseTracking();
+            });
+        }
+        this.$win
+            .loadURL(`file://${require.resolve("eedatek-react-screenrecord/electron/electron.html")}`)
+            .catch((reason) => {
+            console.log(`clipScreen window failed to load: ${reason}`);
+        });
+        // 适定平台
+        if (process.platform === "darwin") {
+            this.$win.setWindowButtonVisibility(false);
+        }
+        if (process.platform !== "win32") {
+            this.$win.setVisibleOnAllWorkspaces(true, {
+                visibleOnFullScreen: true,
+                skipTransformProcessType: true,
+            });
+        }
+        this.$win.blur();
+        this.$win.setBounds(display);
+        this.$win.setAlwaysOnTop(true, "screen-saver");
+        this.$win.show();
+    }
+    async capture(display) {
+        this.logger("SCREENRECORD:capture");
+        try {
+            const sources = await electron_1.desktopCapturer.getSources({
+                types: ["screen"],
+                thumbnailSize: {
+                    width: display.width * display.scaleFactor,
+                    height: display.height * display.scaleFactor,
+                },
+            });
+            let source;
+            // Linux系统上，screen.getDisplayNearestPoint 返回的 Display 对象的 id
+            // 和这里 source 对象上的 display_id(Linux上，这个值是空字符串) 或 id 的中间部分，都不一致
+            // 但是，如果只有一个显示器的话，其实不用判断，直接返回就行
+            if (sources.length === 1) {
+                [source] = sources;
+            }
+            else {
+                source = sources.find((item) => item.display_id === display.id.toString() ||
+                    item.id.startsWith(`screen:${display.id}:`));
+            }
+            if (!source) {
+                this.logger("SCREENRECORD:capture Can't find screen source. sources: %o, display: %o", sources, display);
+                throw new Error("Can't find screen source");
+            }
+            return source.thumbnail.toDataURL();
+            // const { Screenshots: NodeScreenshots } = await import('node-screenshots');
+            // const capturer = NodeScreenshots.fromPoint(
+            //   display.x + display.width / 2,
+            //   display.y + display.height / 2,
+            // );
+            // this.logger(
+            //   'SCREENRECORD:capture NodeScreenshots.fromPoint arguments %o',
+            //   display,
+            // );
+            // this.logger(
+            //   'SCREENRECORD:capture NodeScreenshots.fromPoint return %o',
+            //   capturer
+            //     ? {
+            //       id: capturer.id,
+            //       x: capturer.x,
+            //       y: capturer.y,
+            //       width: capturer.width,
+            //       height: capturer.height,
+            //       rotation: capturer.rotation,
+            //       scaleFactor: capturer.scaleFactor,
+            //       isPrimary: capturer.isPrimary,
+            //     }
+            //     : null,
+            // );
+            // if (!capturer) {
+            //   throw new Error(`NodeScreenshots.fromDisplay(${display.id}) get null`);
+            // }
+            // const image = await capturer.capture();
+            // return `data:image/png;base64,${image.toString('base64')}`;
+        }
+        catch (err) {
+            this.logger("SCREENRECORD:capture NodeScreenshots capture() error %o", err);
+            const sources = await electron_1.desktopCapturer.getSources({
+                types: ["screen"],
+                thumbnailSize: {
+                    width: display.width,
+                    height: display.height,
+                },
+            });
+            let source;
+            // Linux系统上，screen.getDisplayNearestPoint 返回的 Display 对象的 id
+            // 和这里 source 对象上的 display_id(Linux上，这个值是空字符串) 或 id 的中间部分，都不一致
+            // 但是，如果只有一个显示器的话，其实不用判断，直接返回就行
+            if (sources.length === 1) {
+                [source] = sources;
+            }
+            else {
+                source = sources.find((item) => item.display_id === display.id.toString() ||
+                    item.id.startsWith(`screen:${display.id}:`));
+            }
+            if (!source) {
+                this.logger("SCREENRECORD:capture Can't find screen source. sources: %o, display: %o", sources, display);
+                throw new Error("Can't find screen source");
+            }
+            return source.thumbnail.toDataURL();
+        }
+    }
+    /**
+     * 绑定ipc时间处理
+     */
+    listenIpc() {
+        electron_1.ipcMain.on("SCREENRECORD:ready", () => {
+            this.logger("SCREENRECORD:ready");
+            this.isReadyState = true;
+        });
+        /**
+         * OK事件 开始录屏
+         */
+        electron_1.ipcMain.on("SCREENRECORD:ok", () => {
+            this.logger("callback SCREENRECORD:ok");
+            this.$win?.setIgnoreMouseEvents(true, { forward: true });
+            // if(process.platform === "linux"){
+            //   this.isRecording= true;
+            //   this.startMouseTracking();
+            // }
+        });
+        /**
+         * error事件 录屏前端相关错误信息
+         */
+        electron_1.ipcMain.on("SCREENRECORD:error", (e, ex) => {
+            this.logger("callback SCREENRECORD:error");
+            this.logger(ex);
+        });
+        /**
+         * CANCEL事件
+         */
+        electron_1.ipcMain.on("SCREENRECORD:cancel", () => {
+            this.isRecording = false;
+            this.logger("callback SCREENRECORD:cancel");
+            this.$win?.setIgnoreMouseEvents(false);
+            // if(process.platform === "linux"){
+            //   this.stopMouseTracking();
+            // }
+        });
+        electron_1.ipcMain.on("SCREENRECORD:stop", async (e, data) => {
+            this.isRecording = false;
+            const event = new event_1.default();
+            this.emit("stop", event, data);
+            if (event.defaultPrevented || !this.$win) {
+                return;
+            }
+            this.endCapture();
+            if (data) {
+                const time = new Date();
+                const year = time.getFullYear();
+                const month = (0, padStart_1.default)(time.getMonth() + 1, 2, "0");
+                const date = (0, padStart_1.default)(time.getDate(), 2, "0");
+                const hours = (0, padStart_1.default)(time.getHours(), 2, "0");
+                const minutes = (0, padStart_1.default)(time.getMinutes(), 2, "0");
+                const seconds = (0, padStart_1.default)(time.getSeconds(), 2, "0");
+                const milliseconds = (0, padStart_1.default)(time.getMilliseconds(), 3, "0");
+                const { canceled, filePath } = await electron_1.dialog.showSaveDialog(this.$win, {
+                    defaultPath: `${year}${month}${date}${hours}${minutes}${seconds}${milliseconds}.webm`,
+                });
+                if (canceled || !filePath) {
+                    return;
+                }
+                await fs_extra_1.default.writeFile(filePath, Buffer.from(data));
+            }
+        });
+        electron_1.ipcMain.handle("SCREENRECORD:get-worker-js", async () => {
+            const workerjs = getWorkerJs();
+            return workerjs;
+        });
+        electron_1.ipcMain.on("SCREENRECORD:update-button-round", (e, data) => {
+            this.updateButtonBounds(data);
+        });
+        electron_1.ipcMain.handle("SCREENRECORD:get-desktop-capturer-source", async () => {
+            return [
+                ...(await electron_1.desktopCapturer.getSources({ types: ["screen", "window"] })),
+                ...(await selfWindws()),
+            ];
+        });
+        electron_1.ipcMain.handle("SCREENRECORD:get-display-nearest-point", async () => {
+            if (this.$win) {
+                // 获取主窗口的位置
+                const mainWindowPosition = this.$win.getPosition();
+                // 查找包含主窗口位置的屏幕
+                const currentScreen = electron_1.screen.getDisplayNearestPoint({
+                    x: mainWindowPosition[0],
+                    y: mainWindowPosition[1],
+                });
+                return currentScreen;
+            }
+        });
+    }
+}
+exports.default = ScreenRecord;
+const selfWindws = async () => await Promise.all(electron_1.webContents
+    .getAllWebContents()
+    .filter((item) => {
+    const win = electron_1.BrowserWindow.fromWebContents(item);
+    return win && win.isVisible();
+})
+    .map(async (item) => {
+    const win = electron_1.BrowserWindow.fromWebContents(item);
+    const thumbnail = await win?.capturePage();
+    return {
+        name: win?.getTitle() + (item.devToolsWebContents === null ? "" : "-dev"),
+        id: win?.getMediaSourceId(),
+        thumbnail,
+        display_id: "",
+        appIcon: null,
+    };
+}));
+function getWorkerJs() {
+    const protocol = "file";
+    const hostname = "";
+    const port = "";
+    let pathname = path_1.default.resolve(__dirname, `./worker.js`);
+    const localUrl = new URL(`${protocol}://${hostname}${port}`);
+    localUrl.pathname = pathname;
+    return localUrl.href;
+}

package/lib/padStart.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 如果string字符串长度小于 length 则在左侧填充字符
+ * 如果超出length长度则截断超出的部分。
+ * @param {unknown} string
+ * @param {string} chars
+ * @param {number} length
+ */
+export default function padStart(string: unknown, length?: number, chars?: string): string;

package/lib/padStart.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * 如果string字符串长度小于 length 则在左侧填充字符
+ * 如果超出length长度则截断超出的部分。
+ * @param {unknown} string
+ * @param {string} chars
+ * @param {number} length
+ */
+function padStart(string, length = 0, chars = ' ') {
+    let str = String(string);
+    while (str.length < length) {
+        str = `${chars}${str}`;
+    }
+    return str;
+}
+exports.default = padStart;

package/lib/preload.d.ts

@@ -0,0 +1,11 @@
+import { Display } from './getDisplay';
+export interface Bounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ScreenshotsData {
+    bounds: Bounds;
+    display: Display;
+}

package/lib/preload.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable no-console */
+const electron_1 = require("electron");
+const map = new Map();
+electron_1.contextBridge.exposeInMainWorld('screenshots', {
+    ready: () => {
+        console.log('contextBridge ready');
+        electron_1.ipcRenderer.send('SCREENRECORD:ready');
+    },
+    reset: () => {
+        console.log('contextBridge reset');
+        electron_1.ipcRenderer.send('SCREENRECORD:reset');
+    },
+    save: (arrayBuffer, data) => {
+        console.log('contextBridge save', arrayBuffer, data);
+        electron_1.ipcRenderer.send('SCREENRECORD:save', Buffer.from(arrayBuffer), data);
+    },
+    cancel: () => {
+        console.log('contextBridge cancel');
+        electron_1.ipcRenderer.send('SCREENRECORD:cancel');
+    },
+    ok: () => {
+        console.log('contextBridge ok');
+        electron_1.ipcRenderer.send('SCREENRECORD:ok');
+    },
+    error: (data) => {
+        console.log('contextBridge error');
+        electron_1.ipcRenderer.send('SCREENRECORD:error', data);
+    },
+    on: (channel, fn) => {
+        console.log('contextBridge on', fn);
+        const listener = (event, ...args) => {
+            console.log('contextBridge on', channel, fn, ...args);
+            fn(...args);
+        };
+        const listeners = map.get(fn) ?? {};
+        listeners[channel] = listener;
+        map.set(fn, listeners);
+        electron_1.ipcRenderer.on(`SCREENRECORD:${channel}`, listener);
+    },
+    off: (channel, fn) => {
+        console.log('contextBridge off', fn);
+        const listeners = map.get(fn) ?? {};
+        const listener = listeners[channel];
+        delete listeners[channel];
+        if (!listener) {
+            return;
+        }
+        electron_1.ipcRenderer.off(`SCREENRECORD:${channel}`, listener);
+    },
+    stop: (data) => electron_1.ipcRenderer.send('SCREENRECORD:stop', data),
+    invokeGetDesktopCapturerSource: () => {
+        return electron_1.ipcRenderer.invoke('SCREENRECORD:get-desktop-capturer-source');
+    },
+    invokeGetDisplayNearestPoint: () => {
+        return electron_1.ipcRenderer.invoke('SCREENRECORD:get-display-nearest-point');
+    },
+    invokeGetWorker: () => {
+        return electron_1.ipcRenderer.invoke('SCREENRECORD:get-worker-js');
+    },
+    updateButtonBounds: (data) => electron_1.ipcRenderer.send('SCREENRECORD:update-button-round', data)
+});

package/lib/worker.d.ts

@@ -0,0 +1,10 @@
+declare function transform(frame: any, controller: any): void;
+declare function saveImg(videoFrame: any): Promise<void>;
+declare function uploadFile(blob: any): Promise<void>;
+declare let x: number;
+declare let y: number;
+declare let width: number;
+declare let height: number;
+declare let type: string;
+declare let num: number;
+declare let videoFrames: any[];

package/lib/worker.js

@@ -0,0 +1,95 @@
+"use strict";
+/*
+ *  Copyright (c) 2021 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+let x = 0;
+let y = 0;
+let width = 0;
+let height = 0;
+let type = "";
+let num = 0;
+let videoFrames = [];
+function transform(frame, controller) {
+    /* eslint-disable no-undef */
+    const newFrame = new VideoFrame(frame, {
+        visibleRect: {
+            x: x,
+            width: width,
+            y: y,
+            height: height,
+        },
+    });
+    num++;
+    if (type == "gif" && num % 3 == 0) {
+        saveImg(newFrame);
+    }
+    controller.enqueue(newFrame);
+    frame.close();
+}
+async function saveImg(videoFrame) {
+    const canvas = new OffscreenCanvas(videoFrame.displayWidth, videoFrame.displayHeight);
+    const context = canvas.getContext("2d");
+    context.drawImage(videoFrame, 0, 0);
+    canvas.convertToBlob({ type: "image/jpeg" }).then((blob) => {
+        uploadFile(blob);
+    });
+}
+async function uploadFile(blob) {
+    let formData = new FormData();
+    formData.append("type", "cg");
+    formData.append("file", blob);
+    const rsp = await fetch("http://localhost:9190/file/cache", {
+        method: "POST",
+        body: formData,
+    });
+    const res = await rsp.json();
+    if (res.code == 0) {
+        videoFrames.push({
+            url: `http://localhost:9190/file?url=${res.data}`,
+            filePath: res.data,
+            index: num / 3,
+            duration: 100,
+        });
+    }
+}
+onmessage = async (event) => {
+    const { operation, size, status } = event.data;
+    type = event.data.type;
+    num = 0;
+    if (operation === "crop" && status == "start") {
+        const { readable, writable } = event.data;
+        x = size.x;
+        y = size.y;
+        width = size.width;
+        height = size.height;
+        if (x < 0) {
+            width = width + x;
+            x = 0;
+        }
+        else {
+            x = x % 2 == 0 ? x + 2 : x + 1;
+        }
+        if (y < 0) {
+            height = height + y;
+            y = 0;
+        }
+        else {
+            y = y % 2 == 0 ? y + 2 : y + 1;
+        }
+        width = width % 2 == 0 ? width - 6 : width - 5;
+        height = height % 2 == 0 ? height - 6 : height - 5;
+        readable.pipeThrough(new TransformStream({ transform })).pipeTo(writable);
+    }
+    else if (status == "stop") {
+        console.error("=============================");
+        /* eslint-disable no-undef */
+        // self.postMessage([...videoFrames]);
+    }
+    else {
+        console.error("Unknown operation", operation);
+    }
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "eedatek-electron-screenrecord",
+  "version": "2.0.9",
+  "description": "electron 录屏插件",
+  "types": "lib/index.d.ts",
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.js",
+  "files": [
+    "lib/**"
+  ],
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "start": "electron lib/demo.js",
+    "dev": "tsc --sourceMap --watch",
+    "build": "npm run clean && tsc",
+    "lint": "eslint . --ext .js,.ts --fix",
+    "clean": "rimraf lib",
+    "publishpackage": "npm publish --registry https://registry.npmjs.org/ --access public"
+  },
+  "repository": {
+    "type": "git"
+  },
+  "keywords": [
+    "electron",
+    "shortcut",
+    "screenshot",
+    "cropper"
+  ],
+  "author": "mannuannuan",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "debug": "^4.3.4",
+    "eedatek-react-screenrecord": "^2.0.9",
+    "fs-extra": "^11.1.1"
+  },
+  "peerDependencies": {
+    "electron": ">=14"
+  },
+  "devDependencies": {
+    "@types/debug": "^4.1.7",
+    "@types/fs-extra": "^11.0.1",
+    "@types/node": "^18.15.11",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
+    "cross-env": "^7.0.3",
+    "electron": "^23.0.0",
+    "eslint": "^8.37.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-plugin-import": "^2.27.5",
+    "rimraf": "^4.4.1",
+    "typescript": "^5.0.2"
+  }
+}