手撕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，输入开机密码 点击 一直运转即可。

待处理问题

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

其他相关链接

www.jianshu.com/p/e1bb7bd80…
blog.csdn.net/crasowas/ar…
blog.csdn.net/weixin_2743…
www.bilibili.com/read/cv2899…