如何使用 Qt 开发音视频通话应用

作者：单辉，声网 Agora 高级开发工程师。

众所周知，Qt 是一个跨平台的 C++ 图形用户界面应用程序开发框架，它具有跨平台、丰富的 API、支持 2D/3D 图形渲染、支持 OpenGL、开源等优秀的特性。很多市面上常见的应用或者游戏，例如说 VLC、WPS Office、极品飞车等，都是基于 Qt 开发。

本文将介绍如何使用 Qt 开发一个音视频通话应用。

1 使用 Qt Quick

Qt 目前有两种创建用户界面的方式：

• Qt Widgets
• Qt Quick

其中 Qt Widgets 是传统的桌面界面库，而 Qt Quick 是新一代的高级用户界面技术，可以轻松的用于移动端、嵌入式设备等界面开发。

目前 Qt Widgets 已经基本处于维护阶段，已经非常稳定且成熟。而 Qt Quick 是未来发展的主要方向，其开发更加简捷方便，用户体验更加好。

所以本文选择 Qt Quick 作为创建用户界面的方式，开发环境如下：

• Qt：5.12.0
• Qt Creator：4.8.2
• Agora Video SDK：2.4.0

2 设计交互流程

首先，我们设计一个简单的视频通话 UI 交互流程。

有 2 个主要 UI 界面：

• JoinRoom：登录频道界面；
• InRoom：视频通话界面；

以及 3 个辅助 UI 界面：

• Splash：欢迎界面；
• VideoSetting：视频参数设置界面；
• DeviceSetting：设备设置界面；

UI 之间的交互逻辑，已经用对应红色线框标记出来。

3 创建 Qt 项目

打开 Qt Creator，选择创建新的项目。

1. 选择 Qt Quick Application - Empty；

2. 输入项目名称 AgoraVideoCall，并选择项目路径；

3. 选择 qmake 编译；

4. 选择最小支持的 Qt 版本，这里默认为 Qt 5.9；

5. 选择本地 Qt 版本，这里使用 5.12.0；

6. 选择版本控制系统；

4 导入资源

4.1 导入 images 资源

我们先将准备好的图标等资源，导入到项目中。

1. 将 images 文件夹拷贝到工程目录中；
2. 在 Qt Creator 的项目视图中，右键点击 Resources/qml.qrc 文件；
3. 选择添加现有路径；
4. 选择 images 文件夹；
5. images 文件夹下的所有资源，会自动添加到 qml.qrc 文件中；

4.2 导入 controls 资源

在 Qt Quick 中使用按钮等控件时，有两种方式：

1. 使用 Qt Quick 定义的控件；优点是不用自己开发，可以快速集成使用。
2. 使用用户自定义控件；优点是样式可以自己定义，且可以定义更多官方不提供的控件。

我们这里使用事先准备的一些控件，所以先按照步骤导入到项目中。

1. 将 controls 文件夹拷贝到工程目录中；
2. 在 Qt Creator 的项目视图中，右键点击 Resources/qml.qrc 文件；
3. 选择添加现有路径；
4. 选择 controls 文件夹；
5. controls 文件夹下的所有控件，会自动添加到 qml.qrc 文件中；

需要注意的是，默认情况下控件是没有导入的，需要开发者在要使用的 UI 中导入，例如：

4.3 导入 Agora.io 音视频通话 SDK

使用音视频通话功能，需要导入 Agora.io 对应的 SDK，可以注册 Agora.io 的开发者账号，并从 SDK 下载地址中获取对应平台的 SDK。

下载后将对应的头文件拷贝到项目的 include 文件夹中，静态库拷贝到项目中的 lib 文件夹中，动态库则拷贝到项目中的 dll 文件夹中。

之后则修改 Qt 的工程文件，指定链接的动态库，打开 AgoraVideoCall.pro 文件，并添加以下内容：

INCLUDEPATH += $$PWD/lib win32: LIBS += -L$$PWD/lib/ -lagora_rtc_sdk

5 UI 及 UI 业务逻辑

完成项目创建和资源导入后，我们首先需要实现前面设计的 5 个 UI。

5.1 创建 UI

1. 在项目上点击右键，并选择 Add New，选择 QtQuick UI File 模板；

2. 输入 UI 的名称，并完成创建，会直接进入设计窗口；

3. 根据前面的设计，通过拖拽控件以及调整位置等操作，完成 UI；

5.2 UI 业务逻辑

完成 UI 后，对应的按钮所触发的业务逻辑需要对应添加。在创建 QtQuick UI File 的时候，例如说创建 Splash UI 时，默认会创建两个 qml 文件：

• SplashForm.ui.qml：UI 的声明描述；
• Splash.qml：UI 对应事件的响应和部分 UI 业务逻辑；

所以，例如说 Button 的点击事件、鼠标事件等，都通过对应控件的 id 进行关联处理。

例如在 SplashForm.ui.qml 中，我们期待用户如果点击任何地方，则返回到登录界面，则在 SplashForm.ui.qml 中增加鼠标事件监听区域：

MouseArea {
    id: mouseArea
    anchors.fill: parent
}
复制代码

在 Splash.qml 中增加业务逻辑：

mouseArea.onClicked: main.joinRoom()
复制代码

最后在 main.qml 增加 joinRoom 的响应函数：