BilldDesk：基于Vue3+WebRTC+Electron的跨平台远程桌面控制方案

BilldDesk

BilldDesk是一个基于Vue3、WebRTC和Electron技术栈构建的跨平台远程桌面控制解决方案。该项目旨在提供类似ToDesk、向日葵等远程桌面软件的功能，支持Windows、macOS和Android多平台。

功能特性

• 跨平台支持：支持Windows、macOS和Android三大平台
• WebRTC技术：基于WebRTC实现实时音视频传输，保证低延迟
• Electron框架：使用Electron构建桌面客户端，提供原生体验
• Vue3前端：采用Vue3组合式API开发，代码结构清晰
• 远程控制：实现远程桌面查看和控制功能
• 多对一控制：支持多个用户同时控制一个客户端
• 安全连接：提供连接验证和权限管理机制

安装指南

环境要求

• Node.js v18.19.0（建议18版本）
• pnpm v9.1.3（建议9版本）

安装步骤

1. 克隆项目代码

git clone <项目地址>

2. 安装依赖

pnpm i

3. 更新billd相关依赖（可选）

pnpm i billd-deploy@latest billd-utils@latest billd-scss@latest billd-html-webpack-plugin@latest

4. 配置项目文件 在src/spec-config.ts中填写相应的配置信息

5. 运行开发环境

npm run dev

使用说明

基础使用

项目提供了多种构建和运行方式：

Web版本打包

npm run build:web

全平台打包（Windows、macOS、Linux）

npm run build

特定平台打包

npm run build:win    # Windows包
npm run build:mac    # macOS包
npm run build:linux  # Linux包

核心代码示例

ESLint配置

import js from '@eslint/js';
import pluginTypeScript from '@typescript-eslint/eslint-plugin';
import * as parserTypeScript from '@typescript-eslint/parser';
import configPrettier from 'eslint-config-prettier';
import { defineFlatConfig } from 'eslint-define-config';
import importPlugin from 'eslint-plugin-import';
import pluginPrettier from 'eslint-plugin-prettier';
import pluginVue from 'eslint-plugin-vue';
import * as parserVue from 'vue-eslint-parser';

export default defineFlatConfig([
  {
    ...js.configs.recommended,
    ...importPlugin.flatConfigs.recommended,
    ignores: ['node_modules', 'dist', 'components.d.ts'],
    languageOptions: { globals: {} },
    plugins: { prettier: pluginPrettier, import: importPlugin },
    rules: {
      ...configPrettier.rules,
      ...pluginPrettier.configs.recommended.rules,
      'no-unused-vars': 0,
      'no-shadow': 0,
      'no-console': 0,
      'no-var': 2,
      camelcase: ['error', { properties: 'never' }],
    }
  }
]);

WebRTC远程桌面配置

export const useWebRtcRemoteDesk = () => {
  const webRtcRemoteDesk = {
    newWebRtc: (data: {
      sender: string;
      receiver: string;
      videoEl: HTMLVideoElement;
      deskUserUuid: string;
      remoteDeskUserUuid: string;
    }) => {
      return new WebRTCClass({
        isSRS: false,
        roomId: roomId.value,
        videoEl: data.videoEl,
        sender: data.sender,
        receiver: data.receiver,
        deskUserUuid: data.deskUserUuid,
        remoteDeskUserUuid: data.remoteDeskUserUuid,
      });
    },
    
    sendOffer: async ({ sender, receiver }: { sender: string; receiver: string }) => {
      const rtc = networkStore.rtcMap.get(receiver);
      if (rtc) {
        anchorStream.value?.getTracks().forEach((track) => {
          if (anchorStream.value) {
            rtc.peerConnection?.addTrack(track, anchorStream.value);
          }
        });
        const offerSdp = await rtc.createOffer();
        await rtc.setLocalDescription(offerSdp!);
        // 发送offer信令
      }
    }
  };
  return { webRtcRemoteDesk };
};

Electron主进程代码

import { app, BrowserWindow, desktopCapturer, ipcMain } from 'electron';

const windowMap = new Map<number, BrowserWindow>();

async function createWindow({ windowId, width, height, route }: {
  windowId: number;
  width: number;
  height: number;
  route: string;
}) {
  const workAreaSize = screen.getPrimaryDisplay().workAreaSize;
  const win = new BrowserWindow({
    width: width || workAreaSize.width,
    height: height || workAreaSize.height,
    webPreferences: { nodeIntegration: true, contextIsolation: false }
  });
  
  windowMap.set(windowId, win);
  await win.loadURL(process.env.VITE_DEV_SERVER_URL + route);
  return win;
}

Vue3应用初始化

import { createApp } from 'vue';
import { i18n } from '@/hooks/use-i18n';
import router from '@/router/index';
import store from '@/store/index';
import App from './App.vue';

const app = createApp(App);
app.use(store);
app.use(router);
app.use(i18n);
app.mount('#app');

该项目通过整合现代前端技术和原生桌面开发框架，提供了一个功能完整的远程桌面控制解决方案。