推广一下 WebRTC+Electron 搭建的开源远程桌面（累计 100+⭐）

[billdlive]

BilldDesk

基于 WebRTC + Vue3 + Electron + Nodejs 搭建的远程桌面

简介

BilldDesk 远程桌面控制，目前实现了类似 ToDesk 、向日葵等远程桌面的功能。

生态

名称	仓库	star & fork	线上地址
远程桌面网页端	billd-desk		https://desk.hsslive.cn
远程桌面客户端	billd-desk-electron
远程桌面移动端	billd-desk-flutter
远程桌面服务端	billd-desk-server

功能

• Web 端控制桌面客户端
• Web 端查看 Web 端
• 桌面客户端控制桌面客户端
• 桌面客户端查看 Web 端
• 连接鉴权
• 支持 Macos 系统
• 支持 Windows 系统
• 支持 Linux 系统
• 文件传输
• 移动客户端
• 后台管理

目前暂不实现以下功能：

• ❌ Web 端控制 Web 端
• ❌ 桌面客户端控制 Web 端
• ❌ Docker 部署

预览

控制端发起远程控制

控制端正在控制被控端

被控端

接口文档

线上接口：https://desk-api.hsslive.cn

接口文档：todo

本地启动

• 安装依赖（建议使用 node 版本：v18.19.0 ）

pnpm i

更新 billd 相关依赖：

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

• 运行

npm run dev

• 打包 windows 、macos 、linux 包

npm run build

• 打包 windows 包

npm run build:win

• 打包 macos 包

npm run build:mac

• 打包 linux 包

npm run build:linux

性能测试

主要测试各个端之间远程时候的延迟。

TODO

视频教程

b 站合集：BilldDesk 开源远程桌面控制

WebRTC 课程：https://www.hsslive.cn/article/151

常见问题

rebuild

npm config set registry https://registry.npmmirror.com

./node_modules/.bin/electron-rebuild

rebuild 时 cpu-feature 报错

直接删了 node_modules 的 cpu-feature

pnpm 安装 electron 时卡在 postinstall

1. 直接 ctrl+c 退出 npm 安装
2. 进入 node_modules/electron/install.js ，将

   downloadArtifact({
     version,
     artifactName: 'electron',
     force: process.env.force_no_cache === 'true',
     cacheRoot: process.env.electron_config_cache,
     checksums:
       process.env.electron_use_remote_checksums ??
       process.env.npm_config_electron_use_remote_checksums
         ? undefined
         : require('./checksums.json'),
     platform,
     arch,
   })
     .then(extractFile)
     .catch((err) => {
       console.error(err.stack);
       process.exit(1);
     });
   

   修改为：

   downloadArtifact({
     version,
     artifactName: 'electron',
     force: process.env.force_no_cache === 'true',
     cacheRoot: process.env.electron_config_cache,
     checksums:
       process.env.electron_use_remote_checksums ??
       process.env.npm_config_electron_use_remote_checksums
         ? undefined
         : require('./checksums.json'),
     platform,
     arch,
     mirrorOptions: {
       mirror: 'https://npmmirror.com/mirrors/electron/',
       platform,
       arch,
     },
   })
     .then(extractFile)
     .catch((err) => {
       console.error(err.stack);
       process.exit(1);
     });
   

3. 在 node_modules/electron 目录下执行 node install

兼容性

• Windows
• Macos
• Linux

[ilylx2008]

牛逼，需要服务端中转吗？

[xdeng]

在不理想的情况下 WebRTC 支持中转方式的。

[Robertwhite]

请问一下，一台电脑控制另一台电脑的原理是啥？是操作系统留有统一的 API 吗？

[oneisall8955]

牛逼

[billdlive]

@ilylx2008 需要 turn 服务器

[billdlive]

@xdeng 是的

[billdlive]

@Robertwhite 看 readme

[wsyss]

能不能远程协助安卓手机？不用直接操作，可以涂鸦标记指引就 OK

[billdlive]

@wsyss 正在做

[wsyss]

@billdlive #9 star 一下，中转服务是自建吗？顺便期待使用教程

[billdlive]

@wsyss 完全自建，使用教程在 b 站，https://www.bilibili.com/video/BV1X61uYiEbP

[Robertwhite]

@Robertwhite google 了下，原来只是把鼠标键盘操作实时同步到另一端就行了，之前还在想是怎么接管的😂，实时同步画面估计技术角度更难点