BilldDesk是一个基于Vue3、WebRTC和Electron技术栈构建的跨平台远程桌面控制解决方案。该项目旨在提供类似ToDesk、向日葵等远程桌面软件的功能,支持Windows、macOS和Android多平台。
src/spec-config.ts
中填写相应的配置信息项目提供了多种构建和运行方式:
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包
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' }],
}
}
]);
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 };
};
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;
}
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 删除。