手撕Flutter 整一个视频通话App 开发日志一

一个web前端撸一个视频通话App，是否能做到？当然可以啊，伊隆·马斯克都上天了，开发一个视频通话App能有多难? 为什么别人能做到，我就做不到？灵魂拷问自己千百次之后，下定决心，说干就干。

前期准备

前端技术栈: Flutter
前期在技术栈选型方面，徘徊了一段时间，做了多个demo，不是各种各样未知的问题，就是性能上的问题而放弃了 uni-app, react-native, taro, tuari-mobile 这些技术栈，最终选定了 Flutter， Flutter是比较牛X的，跨平台方面，同时支持 window应用，iOS应用，安卓应用也就只有它了。

后端技术栈：腾讯云
就算我会写Java, C#, PHP，Rust， Node.js, Python后端服务，也然并卵，我一个人的团队，开发一个App，前端和后端都要做, 要搞得猴年马月啊? 有没有现成的serverless CMS平台? 有，而且很成熟，开箱即用，噔噔噔噔，向你们隆重推荐 strapi，什么？搞错了?不是这个? 是腾讯云开发，为什么是腾讯云开发?（以后我会慢慢解析）。

需要两台手机
音频视通信嘛，肯定需要两个终端。

平台说明
window还是macOS平台，看自己的条件，各个平台所遇到的问题都各不相同, 本文主要以macOS为主。

WebRTC 选择?

选择 WebRTC方面，走了一些弯路，最早选择是的 flutter_webrtc，但发现后端以及管理方面的能力，比如用户管理，流量统计，安全审计等等都是没有的，需要自己开发管理后台，天啊。。。市面上已经很多的很厉害的平台，何不直接拿来用？我应该集中时间和精力去做前端和交互（也就是产品），这也是我选择腾讯云的原因，它是TRTC, 生态完整，技术成熟，站在巨人的肩膀上，让我跑得更快，看得更高，更远。

TRTC App配置与运行

这里我使用带有UI的RTC项目, TuiCallKit项目链接 github.com/tencentyun/…

// clone本地
git clone https://github.com/tencentyun/TUICallKit.git
// 具体的路径是  Flutter/example/

除了RTC服务，TUIKit还使用了即时通信IM PaaS 服务，所以也需要开启和使用腾讯的即时通信IM

下面是项目的具体配置和运行说明。

1.即时通信IM控制台新建一个应用
即时通信IM控制台 console.cloud.tencent.com/im

2.拿到 SDKAppID和 secretKey 之后，更改项目配置.

// flutter/example/lib/debug/generate_test_user_sig.dart
class GenerateTestUserSig {
    static int sdkAppId = 0;   //修改这里
    static String secretKey = ''; // 修改这里
}

3.创建IM的用户

即时通信 -> 账号管理 console.cloud.tencent.com/im/account-…

注：也可以在客户端临时注册，但呼叫的时候，需要知道对方的userID。

4.安装依赖

flutter pub get

5.xcode 项目配置
使用xcode 直接打 Flutter\example\ios\Runner.xcworkspace，点击Setting -> Accounts

setting位置

点击 + 添加Apple ID

Runner -> Signing & Capabilities -> Debug

team 那里选中你刚才新增的Apple ID的团队。

6.运行App

提示失败

需要在iphone设置信任 App，具体设置 -> VPN与设置管理 -> 开发者App，然后点击信任。

最后，重新再运行，成功。

以下是运行成功之后的截图。

Demo图片

腾讯云其他链接

实时音视频（Tencent RTC）
cloud.tencent.com/product/trt…

实时音视频控制台
console.cloud.tencent.com/trtc

TuiCallKit 开发文档
cloud.tencent.com/document/pr…

问题与解决方案

在运行成功之前，可能还会遇到其他问题，以下是我收集的一些问题和解决方案，供你参考。

问题: window平台 flutter run 很慢
在window上面跑flutter run , 一直停留在Running Gradle task 'assembleDebug'... ,这个需要修改 android\build.gradle文件，改成阿里的镜像。

// example\android\build.gradle
buildscript {
    // 修改这里
    repositories {
        maven { url 'https://maven.aliyun.com/repository/public' } // jcenter
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' } // gradle-plugin
        maven { url 'https://maven.aliyun.com/repository/central' } // central
        maven { url 'https://maven.aliyun.com/repository/google' } // google
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

allprojects {
    // 修改这里
    repositories {
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/google' }
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

问题: window平台的运行提示No implementation found for method xxx on channel
解决方案: 据平台解释说不支持虚拟机运行，需要在真机上运行。

问题: macOS平台 flutter run很慢，一直卡 Running pod install...
解决方案: 需要开启魔法（你懂的），并且复制终端代理命令，具体操作如下：

问题: macOS提示Framework not found TXFFmpeg/TXSoundTouch
好不容易,运行不卡，也不慢，，但提示 Framework not found TXFFmpeg 的错误。运行Ruuner，点击Build Phases --> Link Binary.. 搜索 TXFFmpeg 或者 TXSoundTouch 添加上去就可以，然后重新跑Flutter run.

问题: macOS提示CFBundleShortVersionString的问题
在macOS平台运行时提示 The application's Info.plist does not contain a valid CFBundleShortVersionString
解决方案: xcode打开 Flutter\example\ios\Runner.xcworkspace 在Runnder dashboard 在Build Settings 点击 + 新建添加一个键为 Marketing Version 然后搜索 Marketing Version, 在搜索结果双击编辑输入 ${FLUTTER_BUILD_NAME} 即可

问题: App iphone真机上闪退问题
排除万能，项目终于可以在iphone真机上面运行了，但把数据线拔了之后，App就闪退了，这是致命的Bug? 原来之前跑的都是debug版本，需要插入数据线链上xcode的。
解决方案：设置 Flutter 模块的编译模式为 profile 或 releas， xcode打开 Flutter\example\ios\Runner.xcworkspace，在Build Settings选项，找到 User-Defined，点击 + 新建，添加一个键为 FLUTTER_BUILD_MODE ，值为 release。

问题: codesign想要访问您的钥匙串中的密钥access
macOS 真机运行的时候, 弹窗提示 codesign想要访问您的钥匙串中的密钥access, 这是要输入你的Mac开机密码，如不小心点了拒绝。解决方案：打开钥匙串App，找到登录 -> 我的证书，把 iPhone DeveloperXXX删除，然后重启xcode，重新运行项目，再弹窗提示codesign，输入开机密码点击始终运行即可。

待处理问题

用户注册与登录
微信登录
离线呼醒功能
新功能增加