Electron + React学习记录_05_项目实战-远程控制

最新推荐文章于 2024-04-22 12:13:09 发布
最新推荐文章于 2024-04-22 12:13:09 发布
阅读量389 收藏 1
点赞数
分类专栏： Electron 文章标签： javascript reactjs 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42595231/article/details/115144516
版权
这篇博客记录了利用Electron和React开发远程控制应用的过程。目标是提供一种高效的技术支持方式，允许技术人员远程控制用户电脑进行故障排查和功能演示。关键点包括：傀儡端分享控制码、控制端连接、画面传输、指令传递和响应。技术上，使用desktopCapturer捕获画面，WebRTC进行画面和指令传输，而robotjs用于响应控制指令。
摘要由CSDN通过智能技术生成

项目背景：

提供软件服务时在复杂情况时下（如排查故障、演示功能)，通过沟通解决非常低效

目标：

希望迅速为用户提供远程协助，能够远程控制用户电脑，提供点击和键入功能，完成排查故障、演示场景

业务流程：

     角色:

  • 控制端:技术人员
  • 傀儡端:用户

     流程:

  1. 傀儡端告知控制端本机控制码
  2. 控制端输入控制码连接傀儡端
  3. 傀儡端将捕获的画面传至控制端
  4. 控制端的鼠标和键盘指令传送至傀儡端
  5. 傀儡端响应控制指令
     

关键点分析：

1.傀儡端告知控制端本机控制码

建立端与控制码的联系 ->服务端需求

2.控制端输入控

最低0.47元/天 解锁文章
weixin_42595231
关注
专栏目录
基于webRTC+Electron实现远程控制
yinshipin007的博客
03-08 1684
然后我们需要将我们控制端生成的邀请，也就是我们的offer，通过其他的媒介，比如你可以直接通过微信或者说短信都可以，将邀请的SDP传到给我们的傀儡端，我们的傀儡端拿到了offer之后，它也会去创建一个PeerConnection的对象，然后我们的傀儡端因为要分享我们的画面，在桌面共享的那一节的时候其实我们讲过，我们需要将我们的桌面流捕获完之后添加到我们的PeerConnection里面，随后我们将控制端设置为我们傀儡端的远端。
Electron 远程控制
u011690583的博客
08-30 2555
前言 Electron 远程控制，使用Electron 11.4.9为基础，前端使用react、antd 测试发现鼠标和键盘的延迟大概在20ms左右，屏幕的延迟有200ms-1s之间。 采用声网RTC 4.6.1作为屏幕共享媒介 使用声网RTM1.4.3进行信令控制 使用robotjs 0.0.6进行本地鼠标键盘控制 源码github 欢迎 Star Mad-hu/RemoteControlByElectron: RemoteControl By Electron (gith...
Electron + React学习记录_06_项目实战-远程控制_2
weixin_42595231的博客
03-24 293
目录架构 common存放渲染进程、主进程可复用代码 前端框架在render/src/页面 构建产物在pages/页面 纯JS直接在Pages页面下 与React框架结合 跟Electron在一起工作要做些什么呢? 书写React，并且编译它。CRA 其实一个好的选择。· 处理引入electron/node模块: webpack配置: https://webpack.js.org/configuration/target/ window.require windows根据环境信息加载本地或者d
Electron + React学习记录_07_项目实战-远程控制_3_IPC通信
weixin_42595231的博客
03-25 349
实现打开控制界面 流程 1.让控制端输入控制码，发起控制请求，ipc传输到主进程 2.服务器端接受到控制码，告诉傀儡端已被控制 3.服务器端返回成功指令，告诉控制端已控制成功，主进程再发给渲染进程 4.控制端打开新窗口，显示控制界面，主窗口显示正在控制傀儡端 （服务器端先不实现，先代为mock，控制码也先直接mock） 实现 //渲染一打开就监听第三步的返回 ipcRenderer.on('control-state-change',handleControlState) //控制按钮鼠标点击事件 c
enkodi-desktop:使用Electron和NodeJS和ReactJS的Kodi远程桌面控制器
05-28
Enkodi-用于Kodi的台式遥控器 免责声明 这是一个在制品项目。 它可以日常使用，但是当前开发中缺少一些功能。 跑步 您可以同时使用yarn和npm来安装依赖项或运行项目。 运行项目： $ yarn run dev # (or use `npm run dev`) 包裹 生成可执行文件： $ yarn run package # (or use `npm run package`) 屏幕截图 控制器 播放器视图 电视节目库
山与路远程控制 一个基于electron和golang实现的远控软件
最新发布
a1309525802的博客
04-22 1676
山与路远程控制是基于和golang实现的远程控制软件(项目界面主要模仿向日葵远程软件,如有侵权请告知),代码可能有点臃肿毕竟只花了一周左右写的无聊项目,如果对其感兴趣的大佬可以fork自行修改(大佬勿喷)
Electron + React学习记录_08_项目实战-远程控制_4_WebRTC介绍与实现
weixin_42595231的博客
03-25 442
先回顾一下WebRTC的主要构成 getUserMedia 例子： 如何播放： //直接再cosole输入，如果有摄像头，则请求调用，网页就会显示摄像头和声音 navigator.mediaDevices .getUserMedia({ audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 576, ideal: 720, max: 1080 }
Electron + React学习记录_10_项目实战-远程控制_6_建立传输过程——SDP
weixin_42595231的博客
03-26 290
SDP协议介绍 SDP全称是Session Description Protocol，翻译过来就是描述会话的协议。主要用于两个会话实体之间的媒体协商。 什么叫会话呢，比如一次网络电话、一次电话会议、一次视频聊天，这些都可以称之为一次会话。 那为什么要去发这个描述文本呢，主要是为了解决参与会话的各成员之间能力不对等的问题，如果参加本次通话的成员都支持高质量的通话，但是我们没有去进行协议，为了兼容性，使用的都是普通质量的通话格式，这样就很浪费资源了。所以SDP的作用还是很有必要的。 RTCPeerConne.
黑客远程控制服务攻击技术与安全搭建实战
qq_42663178的博客
08-30 365
黑客远程控制服务攻击技术与安全搭建实战
GhostViewer:类似Team Viewer的应用程序，用于通过Electron.js，webRTC和Robot.js进行远程流传输和控制其他PC
05-25
幽灵浏览器 用Electron JS，webRTC和Robot JS制作的类似Team Viewer的应用程序，用于远程流传输和控制其他PC 克隆并运行 $npm install $npm start 信令服务器： ：
remote-component:从URL动态加载React组件
05-01
远程组件 在运行时从URL加载React组件。 目录 渲染道具 React钩 创建一个远程组件 远程组件入门套件 使用Webpack创建一个远程组件 创建React App（CRA） 使用Next.js进行服务器端渲染 getServerSideProps 从Next.js调用getServerSideProps 这个怎么运作 内容安全政策（CSP） 备择方案 路线图 注意事项 什么是远程组件？ 远程组件是在运行时从URL加载的。 它的使用方式与其他任何React Component的使用方式相同。 const url = "https://raw.githubusercontent.com/Paciolan/remote-component/master/examples/remote-components/HelloWorld.js" ; const HelloW
react-loaders:快速从远程JS包加载和渲染React组件！
05-01
React装载机！ 一组实用程序组件，可远程加载React组件和JS脚本 演示和文档 此处提供在线演示和组件参考： : 由提供支持的演示 安装 npm install @opuscapita/react-loaders 贡献者 基里尔·沃尔科维奇（Kirill Volkovich） 执照 根据Apache许可，版本2.0许可。 有关完整的许可证文本，请参阅LICENSE 。
react-builder采用拖拽方式构建页面使用您的React组件进行设计远程发布
08-15
builder - 采用拖拽方式构建页面，使用您的React组件进行设计，远程发布
React远程服务
weixin_30908707的博客
07-28 219
http://web1.dev5.net:3002/cloud/start?server=exf2&name=zhangxiaocong http://web1.dev5.net:3002/cloud/stop?server=exf2&name=zhangxiaocong http://web1.dev5.net:3002/cloud/status?server=exf2...
electron之v18的remote使用
qq_44961097的博客
05-16 526
1.在项目根目录使用使用终端安装remote npm install --save @electron/remote 2.在主进程(比如main.js)初始化remote require('@electron/remote/main').initialize() require('@electron/remote/main').enable(mainWindow.webContents) 3.在webPreferences里设置可以使用remote webPreferences: {
react学习之旅十一：React远程数据请求
muAluo的博客
11-10 318
React使用封装的Axios请求远程数据。 一、安装Axios 根据项目需要在终端输入以下命令中的一条（这里我用的是npm install -save axios）： npm install axios //安装到node_modules目录下，不写入依赖 npm install -g axios //安装到全局 npm install -save axios //安装到生产环境中（项目跑起来必须要） npm install -save-dev axios
electron开发个远程桌面，调试工具
斗师——Ace
12-02 1154
基于electron+react+robotjs开发了个远程桌面，录屏，截图，调试应用等的工具。放在小程序上，欢迎浏览。
Electron+React实战：架构师教你打造桌面云平台
"本课程是关于使用Electron和React框架构建跨平台桌面应用程序的实战教程，旨在帮助开发者掌握这两种技术的结合使用，从而创建出具备桌面应用特性的云平台应用。" 在当前的软件开发领域， Electron 和 React 的结合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值