Progressive Web App Remote Control
Budget: €250 – €750 EUR
We publish a WebApp for our customers, they regularly need assistance with its use and configuration.
Until now to support our customers we use software such as TeamViewer or AnyDesk, but users are stupid with computers, smartphones and tablets, and installing these applications is a challenge.
The objective is to set up a Screen Sharing and Remote Control system natively integrated into the WebApp.
We cannot use Screen Capture API because this API does not support mobile browsers https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API#browser_compatibility and asks permission from the user, we We want access to be transparent.
After a lot of research we think that the best approach is to use MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver, here is the blog article that talks about it https: //web.dev/articles/streaming-screenshare?hl=en#method_1_mutation_observers_websocket
You must write a standalone Typescript project, this project will be composed of the remote.js and master.js component
Remote.js will expose a startCapture and stopCapture function, data transmission must be done in WebRTC and PeerJS
Master.js will display a canvas containing the remote screen on which it will be possible to interact.
Useful links :
- WebRTC https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
- PeerJS https://peerjs.com/
- PeerJs & WebRTC demo https://webrtc-remote-control.vercel.app/counter-vanilla/master.html
- Blog article for Remote Control with Screen Capture API https://er-ragul.medium.com/build-your-own-remote-desktop-application-using-javascript-python-webrtc-2636bdce1129 + https://er -ragul.medium.com/build-your-own-remote-desktop-application-using-javascript-python-webrtc-c77b32c0249e
Until now to support our customers we use software such as TeamViewer or AnyDesk, but users are stupid with computers, smartphones and tablets, and installing these applications is a challenge.
The objective is to set up a Screen Sharing and Remote Control system natively integrated into the WebApp.
We cannot use Screen Capture API because this API does not support mobile browsers https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API#browser_compatibility and asks permission from the user, we We want access to be transparent.
After a lot of research we think that the best approach is to use MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver, here is the blog article that talks about it https: //web.dev/articles/streaming-screenshare?hl=en#method_1_mutation_observers_websocket
You must write a standalone Typescript project, this project will be composed of the remote.js and master.js component
Remote.js will expose a startCapture and stopCapture function, data transmission must be done in WebRTC and PeerJS
Master.js will display a canvas containing the remote screen on which it will be possible to interact.
Useful links :
- WebRTC https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
- PeerJS https://peerjs.com/
- PeerJs & WebRTC demo https://webrtc-remote-control.vercel.app/counter-vanilla/master.html
- Blog article for Remote Control with Screen Capture API https://er-ragul.medium.com/build-your-own-remote-desktop-application-using-javascript-python-webrtc-2636bdce1129 + https://er -ragul.medium.com/build-your-own-remote-desktop-application-using-javascript-python-webrtc-c77b32c0249e