DeskViewer is a cross platform remote desktop controlling application that allows users to access and control a remote computer from anywhere in the world
DeskViewer is a desktop app where once you enter the remote device's connection id you will start receiving the screen video and audio of the remote device on your computer. And once you start moving your mouse or pressing keystrokes on your keyboard, the changes will automatically be reflected in the remote's computer
Since the build size for .exe, .app and linux executable file exceeds over 200Mb, I have not uploaded the executable files in this repository. However, I have shared a video demo of this project in the link below. Additionally, I have also explained how you can easily generate an executable file of this project for windows, mac and linux!
Here is a short video on how to use DeskViewer
- Screen Sharing - User can share his screen video and audio to a remote user
- Screen Control - Remote user can in return control the keyboard and mouse of connected user
 |
 |
|
 |
 |
- Electron - For building the desktop application
- PeerJs - For transmitting screen video in realtime
- Socket.io - For emitting mouse and keyboard events
- RobotJs - For triggering mouse movement and keystrokes on remote device
- NodeJs - For creating a custom P2P server along with websockets
- React - For reusing design components
- Redux Toolkit - For handling react states
- TailwindCSS - For designing use interface
To implementing P2P connection for sharing screen, you can use the default peer server provided by the peerjs library. However, sometimes I have noticed that the peer server does not respond correctly and cause websocket connection to fail. Therefore I have implemented a custom peer server along with websocket connections in the backend.
If you want to run this project on your computer, you need to first setup the backend and the desktop application. To do so, follow the below instructions:
- Open VSCode editor and in terminal, write the following commands:
git clone https://github.com/ishantchauhan710/DeskViewer.git
cd DeskViewer
ls
- First we need to setup the server. So in terminal, write:
cd server
npm install
npm start
-
This will start the node server. You should see Server started in your terminal
-
Now we need to setup the desktop app. So, open a new terminal, navigate to app folder and write:
npm install
npm start
- This will run the react code. But remember that you won't be able to run this code in a browser since DeskViewer is a desktop app and not a web app
- To run the electron desktop app, create 2 new terminals in the app folder and in both of them, write:
npx electronmon .
- Now you should see 2 desktop apps being launched :)
You may get bugs related to robotjs installation or node-gyp related issues on windows. To prevent them, make sure that
- You have installed Visual Studio Build Tools for 'Desktop development with C++', 'MSBuild', 'Windows 10 SDK'. You can get them from: https://visualstudio.microsoft.com/visual-cpp-build-tools/
- You have installed Python v2.7.3 as v3.x.x is not supported: https://robotjs.io/docs/building
- Also check for missing python packages by writing following commands in app folder: ' python -m ensurepip --upgrade', 'python -m pip install --upgrade setuptools'.
- Delete package-lock.json in app folder, write 'npm cache clean --force'
- Open powershell as windows administrator and type: 'Set-ExecutionPolicy RemoteSigned -Scope CurrentUser', 'Get-ExecutionPolicy -List'
- After installing packages, in app folder's terminal, write 'npx electron-rebuild -f -w robojs'
- If that fails, try downgrading your nodejs version or refer to robotjs's github issues section
- To generate an executable file depending upon your platform, open electron.js file and there, comment the following line
win.loadURL("http://localhost:3000")
- Then uncomment the following line
win.loadURL(`file://${path.join(__dirname, "../build/index.html")}`)
- Open terminal in the app folder and write:
npm run build
npx electron-packager .
- This will build a .exe/.app/linux executable file depending on your operating system. To generate an executable file for some other platform, use the command below:
npx electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
- I have commented the robot.js functions in electron.js file inside the app folder. This is because if you uncomment them and run 2 instances of this app on a same computer, you won't be able to control your mouse
- I have only tested this application on linux, if you want to create an executable file for windows or mac systems, you need to make few more changes in the electron configuration files. You can refer to electron-packager for that
- Currently the app uses getDisplayMedia() to share the audio of device however if you want to transmit the audio of user using microphone, you can make use of the getUserMedia() method
For any queries, you can mail me at developerishant710@gmail.com