STF简单修改实现安卓多机同屏控制

简介: 背景:STF是一个非常优秀的安卓真机管理平台,近期团队同学在看安卓真机适配方面的事情,想到如果采用STF来进行多机同屏控制那将是一件非常nice的事情。动手:初步看了一下STF的代码,前端主要是采用WebSocket与后端进行通信,那我们只要找到通信类,在他原来的send上面加上foreach,那么就完美了。简单尝试,周末用Ubuntu装了个开发环境,初步实现了多台安卓机的同屏控制,但有些细节方面
背景:
STF是一个非常优秀的安卓真机管理平台,近期团队同学在看安卓真机适配方面的事情,想到如果采用STF来进行多机同屏控制那将是一件非常nice的事情。

动手:
初步看了一下STF的代码,前端主要是采用WebSocket与后端进行通信,那我们只要找到通信类,在他原来的send上面加上foreach,那么就完美了。

简单尝试,周末用Ubuntu装了个开发环境,初步实现了多台安卓机的同屏控制,但有些细节方面还需要优化,比如不同分辨率需要做缩放。

1.  找到前后端通信模块, stf/control, 将整个文件夹复制一份,生成:stf/batch-control, 其中control-service.js 改名为:batch-control-service.js


2. 打开stf/batch-control/index.js,修改原来的control为batchControl:
module.exports = angular.module('stf/batch-control', [
  require('stf/socket').name,
  require('stf/transaction').name,
  require('stf/keycodes').name
])
  .factory('BatchControlService', require('./batch-control-service'))
AI 代码解读

 


3. 打开改名后的:batch-control-service.js, 同样修改原来的controlService为batchControlService.

4. 定义deviceControlArray,用来存放多机同屏的机器列表,注意这里为了简单实现,仅仅用了API获取了全部机器,实际操作建议按设备List选择后存入Array。
  var deviceControlArray = new Array()

  if (deviceControlArray.length == 0)
  {
    var devices = "";
      devices = oboe('/api/v1/devices')

      devices.node('devices[*]', function(device) {
        if (device.present)  //仅将在线的设备加入Array
        {
          deviceControlArray.push(device.channel)
        }
      })
  }
AI 代码解读

 



5. 继续修改batch-control-service.js,可以看到发送WS消息方法为:sendOneWay,就在这里给他套个foreach
    function sendOneWay(action, data) {
      deviceControlArray.forEach(function(channel)
      {
        socket.emit(action, channel, data)
      })
    }
AI 代码解读

 要做不同分辨率适配的,可以考虑在这里的data做点手脚。



6.做个多机同屏操作界面吧,同样把control-panes文件夹复制一份,自行修改为其他名字,然后把其中原来应用stf/control的地方全部修改为我们的 stf/batch-control,这样在这里操作的任何指令将群发到所有机器。




7.添加多机屏幕显示
上面已经实现了指令群发,接下来就可以把其他手机的屏幕嵌入页面显示了,最简单的方法当然是standalone了。这样我们在页面上面只要嵌入standalone的iframe就一切都搞定了。

进入standalone模式只要在URL最后加上?standalone 即可
比如原来的单机控制URL是:
http://192.168.1.100:7100/#!/control/06157df6a99bc02e
那么standalone模式的URL就是:
http://192.168.1.100:7100/#!/control/06157df6a99bc02e?standalone
把这个URL嵌入iframe就好啦。

最后:
实际找了4台安卓手机,再修改后的代码上面进行运行,发现同屏操作几乎无延迟,改造完成。
目录
打赏
0
0
0
3
2
分享
相关文章
flutter中实现仿Android端的onResume和onPause方法
flutter中实现仿Android端的onResume和onPause方法
java 实现读取txt文件,反射创建对象,android 手机缓存文件目录
java 实现读取txt文件,反射创建对象,android 手机缓存文件目录
469 1
java 实现读取txt文件,反射创建对象,android 手机缓存文件目录
通过howler.js实现在Android下的微信浏览器自动播放音频
通过howler.js实现在Android下的微信浏览器自动播放音频
592 0
通过howler.js实现在Android下的微信浏览器自动播放音频
android 多级下拉菜单实现教程 greendao使用
android 多级下拉菜单实现教程 greendao使用
271 0
android 多级下拉菜单实现教程 greendao使用
深入剖析Android四大组件(四)——Messenger实现Android IPC
深入剖析Android四大组件(四)——Messenger实现Android IPC
164 2
Android自定义控件(十)——SurfaceView实战实现天气APP背景移动效果
Android自定义控件(十)——SurfaceView实战实现天气APP背景移动效果
482 0
Android自定义控件(十三)——实现CSDN搜索框文字提示容器
Android自定义控件(十三)——实现CSDN搜索框文字提示容器
331 0
Android自定义控件(十三)——实现CSDN搜索框文字提示容器
Android自定义控件(七)——ShapeDrawable实现放大镜效果
Android自定义控件(七)——ShapeDrawable实现放大镜效果
534 0
Android自定义控件(七)——ShapeDrawable实现放大镜效果

热门文章

最新文章

  • 1
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
    56
  • 2
    Android历史版本与APK文件结构
    122
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    38
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    22
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    5
  • 6
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    11
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    10
  • 8
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 9
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
    1
  • 10
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    14
  • 2
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    28
  • 3
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 4
    Android历史版本与APK文件结构
    122
  • 5
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 6
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    24
  • 7
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    60
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    73
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等