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

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

开篇

 基于Flutter+WebRTC+gRPC,开发一款点对点加密、跨端、即时通讯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,其他版本系统开启方式可能略有不同,注意区分。打开手机设置,找到关于本机:

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

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

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

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

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

开启USB调试

一加手机设备开启USB调试

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

 这时,我们就可以看到系统选项多出来1个开发者选项,点击进去开发者选项,打开USB调试即可。

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

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

红米手机设备开启USB调试

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

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

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

完成配置

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

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

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

相关推荐
GitCode官方5 小时前
开源鸿蒙跨平台直播|Flutter HCPP 开源鸿蒙实践:让原生视图回到系统合成层
flutter·华为·harmonyos
光影少年6 小时前
RN与Flutter架构区别
前端·flutter·react native·react.js·架构·node.js
m0_7381858220 小时前
Flutter 鸿蒙化实战:flutter_app_minimizer_plus 适配 OpenHarmony,一键最小化应用
flutter·华为·harmonyos·鸿蒙
动物园猫21 小时前
Flutter 鸿蒙实战:用 webview_flutter 三方库在 鸿蒙 中内嵌真实网页
flutter·华为·harmonyos
m0_738185821 天前
Flutter 鸿蒙化实战:flutter_app_badger 适配 OpenHarmony,应用角标
flutter·华为·harmonyos·鸿蒙
yuezhilangniao1 天前
FVM 与 Flutter 环境配置完全指南:从安装到日常使用
flutter
福大大架构师每日一题1 天前
pion/webrtc v4.2.22 最新发布:TCP mux 写缓冲区调整至 4 MB,补齐缺失媒体方向处理
tcp/ip·webrtc·媒体
gnip1 天前
Flutter GetX 三件套开发规范(Skill)
前端·flutter
m0_738185821 天前
Flutter 鸿蒙化实战:flutter_blue_plus 适配 OpenHarmony,蓝牙扫描连接开箱即用
flutter·华为·harmonyos·鸿蒙
传奇开心果编程1 天前
【Flutter入门练中学】第3课:滚动与列表
android·学习·flutter·ui·ios