electron

https://www.electronjs.org/
https://github.com/electron/electron



实现远程桌面监控
其实这个应用的功能主要分为两部分,一是实现监控,即在客户端可以看到服务端的桌面,这部分功能是通过定时截图来实现的,比如服务端一秒截几次图,然后通过socketio发送到客户端,客户端通过改变img的src来实现一帧帧的显示最新的图片,这样就能看到动态的桌面了。监控就是这样实现的。



另一个功能是控制,即客户端对监控画面的操作,包括鼠标和键盘的操作都可以在服务端的桌面真正的生效,这部分功能的实现是在electron的应用中监听了所有的鼠标和键盘事件,比如keydown、keyup、keypress,mousedown、mouseup、mousemove、click等,然后通过socketio把事件传递到服务端,服务端通过 robot-js来执行不同的事件,这样就能使得客户端的事件在服务端触发了。
https://www.jianshu.com/p/432ccb755fd4
https://github.com/robot/robot-js



electron 制作远程控制软件
技术关键点
怎么捕捉画面?
使用 desktopCapturer,可以访问那些用于从桌面上捕获音频和视频的媒体源信息
怎么完成用户间连接、画面+指令传输?
使用 WebRTC,两个浏览器之间直接进行视频和音频的通信
怎么响应控制指令?
使用 RobotJS,实现鼠标点击滑动等效果
https://www.jianshu.com/p/71744e97ea65



https://www.electronjs.org/docs/latest/api/desktop-capturer#desktopcapturer
https://javascript.ruanyifeng.com/htmlapi/webrtc.html
https://www.oschina.net/p/robotjs



https://github.com/Mad-hu/RemoteControlByElectron



https://enterprise.todesk.com/v1?utm_source=baidu&utm_medium=cpc&utm_campaign=%E5%8A%9E%E5%85%AC%E8%BD%AF%E4%BB%B6&utm_term=%E8%BF%9C%E7%A8%8B%E6%A1%8C%E9%9D%A2
https://anydesk.com.cn/zhs
https://blog.csdn.net/u011690583/article/details/119992973

Electron区分了两种进程:主进程和渲染进程,两者各自负责自己的职能
Electron 运行package.json的 main 脚本的进程被称为主进程。一个 Electron 应用总是有且只有一个主进程。



职责:



创建渲染进程(可多个)
控制了应用生命周期(启动、退出APP以及对APP做一些事件监听)
调用系统底层功能、调用原生资源
可调用的API:



Node.js API
Electron提供的主进程API(包括一些系统功能和Electron附加功能)
渲染进程
由于 Electron 使用了 Chromium 来展示 web 页面,所以 Chromium 的多进程架构也被使用到。 每个Electron 中的 web页面运行在它自己的渲染进程中。



主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。



你可以把渲染进程想像成一个浏览器窗口,它能存在多个并且相互独立,不过和浏览器不同的是,它能调用Node API。



职责



用HTML和CSS渲染界面
用JavaScript做一些界面交互
可调用的API:



DOM API
Node.js API
Electron提供的渲染进程API



https://blog.csdn.net/k157507281/article/details/99411152



。Electron 把 Chromium 和 Node 合并到一个单独的运行时里面,很适合开发桌面 web 形式的应用程序,通过Node它提供了通常浏览器所不能提供的能力。
在这之前,Zhao主要进行node-webkit(现在叫nw.js)的开发工作。从概念上,Electron与nw.js很相似,但是他们有很重要的区别,我将在这里阐述这些区别。一个主要的不同点是Electron 通过 Googles Chromium Content Module 来使用 Chromium 的功能,nw.js 则直接使用了 Chromium本身。
https://blog.csdn.net/yanghaolong/article/details/81128129



Category node