likes
comments
collection
share

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

作者站长头像
站长
· 阅读数 8

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

开篇

 基于Flutter+WebRTC,开发一款点对点加密、跨端、即时通讯APP,实现文字、音视频通话聊天,同时支持图片、短视频等文件传输功能,计划支持Windows、Android平台。我准备将自己的学习和实践过程记录下来,同时分享给大家,欢迎大家一起研讨交流。这个工程是利用自己的业余时间来实现的,不定时更新。这是第一篇文章,是关于Vscode下的Android真机环境搭建的过程。

为什么要搭建真机调试环境?

 为什么要搭建真机调试环境?以前都是使用虚拟机来开发APP,当然了,使用虚拟机进行开发很方便,任何型号的设备都可以模拟出来,但是,虚拟机与真机还是存在一定的差异的,有一些功能或者特性虚拟机是无法提供的,可能无法满足我们的开发需求,所以现在来搭建基于Vscode的真机调试开发环境。Vscode连接虚拟机可以通过USB进行有线连接调试,也可以通过WIFI进行无线连接调试,这里只考虑有线连接的情况。

前提条件

 我们首先需要一台安装了Vscode的Windows主机设备来进行代码开发,Flutter SDK已经安装到位,然后需要两台Android真机和两根正规的USB数据线,我的设备是一款一加8T手机和一台Redmi4X手机,为什么需要两台真机,而不是一台真机呢?因为我要开发的是端到端加密即时通讯APP,所以至少是两个设备来进行对等链接,这样端到端就实现了。你为什么需要正规的USB数据线呢?因为我在实践的过程中遇到电脑主机无法连接手机的情况,后来不停地折腾好久才发现,是数据线不行,换一根USB数据线就能连接上了。

手机设置

开启开发者模式

 我们要通过USB对真机进行调试,首先要开启手机的开发者模式,每个品牌的手机开启开发者模式的方式都是不同的,这里介绍一下一加品牌和Redmi品牌开启开发者模式的方法。一加手机开启方式比较简单,红米设备就比较麻烦了。

一加手机设备开启开发者模式

 我的一加手机的系统是ColorOS13.1,其他版本系统开启方式可能略有不同,注意区分。打开手机设置,找到关于本机:

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

 点进去关于本机,找到版本信息:

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

 点进去版本号,连续点击版本号很多下,注意!这里我们点击的必须是版本号,而不是Android版本!你会看到弹窗提示已经开启了开发者模式,我们这里是已经开启过了,所以是这样的提示:

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

 到这里一加设备就成功开启了开发者模式。

红米手机设备开启开发者模式

  红米手机开启开发者模式的方法和一加相差不多,也是点击系统设置,找到我的设备,然后点击全部参数,找到MIUI版本,连续点击很多次,就可以啦!很简单的。

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

开启USB调试

一加手机设备开启USB调试

 开启了开发者模式后,我们再次进入系统设置,点击其他设置:

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

 这时,我们就可以看到系统选项多出来1个开发者选项,点击进去开发者选项,打开USB调试即可。 Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

 当我们手机在连接电脑的时候,连接模式尽量选择文件传输,这个时候,手机会弹窗允许调试选项。直接打钩框框,并且点击确定,就正式可以连接电脑啦。

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

 如果插上电脑没任何反应,可能是你的数据线问题,更换原厂或者一根稳定的数据线再连接电。

红米手机设备开启USB调试

 红米设备开启USB调试稍微麻烦了一点。刚才我们已经打开了开发者模式,所以系统设置中也会多出来1个开发者选项。点击更多设置,可以看到开发者选项。

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

 点击进去开发者选项,打开USB调试即可。

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

 需要注意的是,小米和红米系列手机设备,在不插卡、没有登录小米账号、不连网的情况下是无法开启USB调试的,要打开usb安装选项,就必须要插入sim卡,并且还要登录小米账号才行。我用的是早就淘汰的旧手机,哪来的手机卡和小米账号呀!麻烦得很!好在这个只要求插一次卡激活就行了,并不需要一直插着卡使用。据说这是小米为了防止线下经销商利用adb批量预置垃圾应用才想出的办法。

完成配置

 我们将手机用靠谱的USB数据线连接到windows主机上,连接模式选择文件传输,接使用Vscode打开Flutter工程,这时Vscode右下角已经显示了连接到的真机设备:

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

 我们可以使用flutter devices命令查看目前项目可用的设备列表:

Flutter+WebRTC开发点对点加密即时通讯APP--Vscode Android真机环境搭建

 可以看到,我们现在有四个可用设备:一个安卓12设备、一个安卓7设备,一个windows设备,还有一个edge浏览器web设备。接下来我们就可以愉快的使用Android真机进行开发调试啦!

转载自:https://juejin.cn/post/7329350541136527414
评论
请登录