首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >BilldDesk:基于Vue3+WebRTC+Electron的跨平台远程桌面控制方案

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

原创
作者头像
qife122
发布2025-09-08 18:56:41
发布2025-09-08 18:56:41
25300
代码可运行
举报
运行总次数:0
代码可运行

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版本打包

代码语言:bash
复制
npm run build:web

全平台打包(Windows、macOS、Linux)

代码语言:bash
复制
npm run build

特定平台打包

代码语言:bash
复制
npm run build:win    # Windows包
npm run build:mac    # macOS包
npm run build:linux  # Linux包

核心代码示例

ESLint配置
代码语言:javascript
代码运行次数:0
运行
复制
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远程桌面配置
代码语言:typescript
复制
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主进程代码
代码语言:typescript
复制
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应用初始化
代码语言:typescript
复制
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');

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • BilldDesk
    • 功能特性
    • 安装指南
      • 环境要求
      • 安装步骤
    • 使用说明
      • 基础使用
      • 核心代码示例
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档