作者:单辉,声网 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,选择创建新的项目。
- 选择 Qt Quick Application - Empty;
- 输入项目名称 AgoraVideoCall,并选择项目路径;
- 选择 qmake 编译;
- 选择最小支持的 Qt 版本,这里默认为 Qt 5.9;
- 选择本地 Qt 版本,这里使用 5.12.0;
4 导入资源
4.1 导入 images 资源
我们先将准备好的图标等资源,导入到项目中。
- 将 images 文件夹拷贝到工程目录中;
- 在 Qt Creator 的项目视图中,右键点击 Resources/qml.qrc 文件;
- 选择添加现有路径;
- 选择 images 文件夹;
- images 文件夹下的所有资源,会自动添加到 qml.qrc 文件中;
4.2 导入 controls 资源
在 Qt Quick 中使用按钮等控件时,有两种方式:
- 使用 Qt Quick 定义的控件;优点是不用自己开发,可以快速集成使用。
- 使用用户自定义控件;优点是样式可以自己定义,且可以定义更多官方不提供的控件。
我们这里使用事先准备的一些控件,所以先按照步骤导入到项目中。
- 将 controls 文件夹拷贝到工程目录中;
- 在 Qt Creator 的项目视图中,右键点击 Resources/qml.qrc 文件;
- 选择添加现有路径;
- 选择 controls 文件夹;
- 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
- 在项目上点击右键,并选择 Add New,选择 QtQuick UI File 模板;
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 的响应函数: