Agora 教程 | 如何使用 Qt 开发视频通话应用

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

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

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

一、使用 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

二、设计交互流程

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

有 2 个主要 UI 界面：

• JoinRoom：登录频道界面；

• InRoom：视频通话界面；

以及 3 个辅助 UI 界面：

• Splash：欢迎界面；

• VideoSetting：视频参数设置界面；

• DeviceSetting：设备设置界面；

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

三、创建 Qt 项目

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

1. 选择 Qt Quick Application - Empty； 

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

3. 选择 qmake 编译； 

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

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

6. 选择版本控制系统； 

四、导入资源

导入 images 资源

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

1. 将 images 文件夹拷贝到工程目录中；

2. 在 Qt Creator 的项目视图中，右键点击 Resources/qml.qrc 文件；

3. 选择添加现有路径；

4. 选择 images 文件夹；

5. images 文件夹下的所有资源，会自动添加到 qml.qrc 文件中；

导入 controls 资源

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

1. 使用 Qt Quick 定义的控件；优点是不用自己开发，可以快速集成使用。

2. 使用用户自定义控件；优点是样式可以自己定义，且可以定义更多官方不提供的控件。

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

1. 将 controls 文件夹拷贝到工程目录中；

2. 在 Qt Creator 的项目视图中，右键点击 Resources/qml.qrc 文件；

3. 选择添加现有路径；

4. 选择 controls 文件夹；

5. controls 文件夹下的所有控件，会自动添加到 qml.qrc 文件中；

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

导入 Agora.io 音视频通话 SDK

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

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

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

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

五、UI 及 UI 业务逻辑

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

创建 UI

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

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

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

UI 业务逻辑

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

• SplashForm.ui.qml：UI 的声明描述；

• Splash.qml：UI 对应事件的响应和部分 UI 业务逻辑；

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

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

1. MouseArea {

2. id: mouseArea

3. anchors.fill: parent

4. }

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

1. mouseArea.onClicked: main.joinRoom()

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

1. Loader {

2. id: loader

3. focus: true

4. anchors.fill: parent

5. }

6. 
   

7. function joinRoom() {

8. loader.setSource(Qt.resolvedUrl("JoinRoom.qml"))

9. }

这样就完成了一个基本的 UI 业务逻辑。其他例如打开设置窗口、登录到频道中等 UI 业务逻辑类似，就不再一一列举。

当然，实际触发的核心业务逻辑，例如说登录频道进行音视频通话、设置参数生效等可以先留空，在完成所有的 UI 交互响应后，再将该部分逻辑填充进去。

QML 与 C++ 交互

基本 UI 业务逻辑完成后，一般需要 QML 与 C++ 之间的逻辑交互。例如按下进入频道的 Join 按钮后，我们需要在 C++ 中调用 Agora 的音视频相关逻辑，来进入频道进行通话。

在 QML 中使用 C++ 的类和对象，一般有两种方式：

1. 在 C++ 中定义一个 QObject 的子类，注册到 QML 中，在 QML 中创建该类的对象；

2. 在 C++ 中创建对象，并将该对象设置为 QML 的上下文属性，在 QML 中使用该属性；

这里使用第二种方式，定义 MainWindow 类，用来作为核心窗体加载 main.qml，并在其构造函数中将本身设置为 QML 的上下文属性：

1. setWindowFlags(Qt::Window | Qt::FramelessWindowHint);

2. resize(600, 600);

3. 
   

4. m_contentView = new QQuickWidget(this);

5. m_contentView->rootContext()->setContextProperty("containerWindow", this);

6. m_contentView->setResizeMode(QQuickWidget::SizeRootObjectToView);

7. m_contentView->setSource(QUrl("qrc:///main.qml"));

8. 
   

9. QVBoxLayout *layout = new QVBoxLayout;

10. layout->setContentsMargins(0, 0, 0, 0);

11. layout->setSpacing(0);

12. layout->addWidget(m_contentView);

13. 
    

14. setLayout(layout);

六、视频渲染

Agora SDK 提供接口，使得用户可以自己定义渲染方式。接口如下：

1. agora::media::IExternalVideoRender *

2. AgoraRtcEngine::createRenderInstance(

3. const agora::media::ExternalVideoRenerContext &context) {

4. if (!context.view)

5. return nullptr;

6. return new VideoRenderImpl(context);

7. }

VideoRenderImpl 需要继承 agora::media::IExternalVideoRender 类，并实现相关接口：

1. virtual void release() override {

2. delete this;

3. }

4. 
   

5. virtual int initialize() override {

6. return 0;

7. }

8. 
   

9. virtual int deliverFrame(const agora::media::IVideoFrame &videoFrame,

10. int rotation, bool mirrored) override {

11. std::lock_guard<std::mutex> lock(m_mutex);

12. if (m_view)

13. return m_view->deliverFrame(videoFrame, rotation, mirrored);

14. return -1;

15. }

我们将会使用 OpenGL 来进行渲染，定义 renderFrame ：

1. int VideoRendererOpenGL::renderFrame(const agora::media::IVideoFrame &videoFrame) {

2. if (videoFrame.IsZeroSize())

3. return -1;

4. 
   

5. int r = prepare();

6. if (r) return r;

7. 
   

8. QOpenGLFunctions *f = renderer();

9. f->glClear(GL_COLOR_BUFFER_BIT);

10. 
    

11. if (m_textureWidth != (GLsizei)videoFrame.width() ||

12. m_textureHeight != (GLsizei)videoFrame.height()) {

13. setupTextures(videoFrame);

14. m_resetGlVert = true;

15. }

16. 
    

17. if (m_resetGlVert) {

18. if (!ajustVertices())

19. m_resetGlVert = false;

20. }

21. 
    

22. updateTextures(videoFrame);

23. 
    

24. f->glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_BYTE, g_indices);

25. return 0;

26. }

具体描绘部分，在 updateTextures 中实现如下：

1. void VideoRendererOpenGL::updateTextures(

2. const agora::media::IVideoFrame &frameToRender) {

3. const GLsizei width = frameToRender.width();

4. const GLsizei height = frameToRender.height();

5. 
   

6. QOpenGLFunctions *f = renderer();

7. f->glActiveTexture(GL_TEXTURE0);

8. f->glBindTexture(GL_TEXTURE_2D, m_textureIds[0]);

9. glTexSubImage2D(width, height,

10. frameToRender.stride(IVideoFrame::Y_PLANE),

11. frameToRender.buffer(IVideoFrame::Y_PLANE));

12. 
    

13. f->glActiveTexture(GL_TEXTURE1);

14. f->glBindTexture(GL_TEXTURE_2D, m_textureIds[1]);

15. glTexSubImage2D(width / 2, height / 2,

16. frameToRender.stride(IVideoFrame::U_PLANE),

17. frameToRender.buffer(IVideoFrame::U_PLANE));

18. 
    

19. f->glActiveTexture(GL_TEXTURE2);

20. f->glBindTexture(GL_TEXTURE_2D, m_textureIds[2]);

21. glTexSubImage2D(width / 2, height / 2,

22. frameToRender.stride(IVideoFrame::V_PLANE),

23. frameToRender.buffer(IVideoFrame::V_PLANE));

24. }

这样就可以将 Agora SDK 回调中的 Frame，绘制在具体的 Widget 上了。

七、核心业务逻辑

我们需要简单封装 Agora SDK 的相关逻辑，以提供音视频通话的功能。

回调事件

Agora SDK 会提供很多事件的回调信息，例如远端用户加入频道、远端用户退出频道等，我们需要继承 agora::rtc::IRtcEngineEventHandler 事件回调类，并重写部分需要的函数，来进行事件的响应。

1. class AgoraRtcEngineEvent : public agora::rtc::IRtcEngineEventHandler {

2. public:

3. AgoraRtcEngineEvent(AgoraRtcEngine &engine)

4. :m_engine(engine) {}

5. 
   

6. virtual void onVideoStopped() override {

7. emit m_engine.videoStopped();

8. }

9. 
   

10. virtual void onJoinChannelSuccess(const char *channel, uid_t uid,

11. int elapsed) override {

12. emit m_engine.joinedChannelSuccess(channel, uid, elapsed);

13. }

14. 
    

15. virtual void onUserJoined(uid_t uid, int elapsed) override {

16. emit m_engine.userJoined(uid, elapsed);

17. }

18. 
    

19. virtual void onUserOffline(uid_t uid,

20. USER_OFFLINE_REASON_TYPE reason) override {

21. emit m_engine.userOffline(uid, reason);

22. }

23. 
    

24. virtual void onFirstLocalVideoFrame(int width, int height,

25. int elapsed) override {

26. emit m_engine.firstLocalVideoFrame(width, height, elapsed);

27. }

28. 
    

29. virtual void onFirstRemoteVideoDecoded(uid_t uid, int width, int height,

30. int elapsed) override {

31. emit m_engine.firstRemoteVideoDecoded(uid, width, height, elapsed);

32. }

33. 
    

34. virtual void onFirstRemoteVideoFrame(uid_t uid, int width, int height,

35. int elapsed) override {

36. emit m_engine.firstRemoteVideoFrameDrawn(uid, width, height, elapsed);

37. }

38. 
    

39. private:

40. AgoraRtcEngine &m_engine;

41. };

这里我们将事件从 AgoraRtcEngine 的信号函数发出，并在 UI 中进行响应，不做复杂的处理逻辑。

资源管理

定义 AgoraRtcEngine 类，并在构造函数中，初始化音视频通话引擎： agora::rtc::IRtcEngine ：

1. AgoraRtcEngine::AgoraRtcEngine(QObject *parent)

2. : QObject(parent), m_rtcEngine(createAgoraRtcEngine()),

3. m_eventHandler(new AgoraRtcEngineEvent(*this)) {

4. agora::rtc::RtcEngineContext context;

5. context.eventHandler = m_eventHandler.get();

6. 
   

7. // Specify your APP ID here

8. context.appId = "";

9. 
   

10. if (*context.appId == '\0') {

11. QMessageBox::critical(nullptr, tr("Agora QT Demo"),

12. tr("You must specify APP ID before using the demo"));

13. }

14. 
    

15. m_rtcEngine->initialize(context);

16. agora::util::AutoPtr<agora::media::IMediaEngine> mediaEngine;

17. mediaEngine.queryInterface(m_rtcEngine.get(), agora::AGORA_IID_MEDIA_ENGINE);

18. if (mediaEngine) {

19. mediaEngine->registerVideoRenderFactory(this);

20. }

21. m_rtcEngine->enableVideo();

22. }

注意： 有关如何获取 Agora APP ID，请参阅 Agora 官方文档。

在 App 退出时，应当在 AgoraRtcEngine 类的析构函数中，释放音视频通话引擎资源，这里我们通过指定 unique_ptr 的释放函数来自动管理：

1. struct RtcEngineDeleter {

2. void operator()(agora::rtc::IRtcEngine *engine) const {

3. if (engine != nullptr) engine->release();

4. }

5. };

6. 
   

7. std::unique_ptr<agora::rtc::IRtcEngine, RtcEngineDeleter> m_rtcEngine;

登录频道

大部分的逻辑基本上处理好了，接下来就是最重要的一步了。

在 MainWindow 增加 AgoraRtcEngine 的 QML 上下文属性设置：

1. AgoraRtcEngine *engine = m_engine.get();

2. m_contentView->rootContext()->setContextProperty("agoraRtcEngine", engine);

用户输入频道名，点击 Join 按钮，触发登录逻辑时，我们在 JoinRoom.qml 中增加事件处理：

1. btnJoin.onClicked: main.joinChannel(txtChannelName.text)

在 main.qml 中，调用 AgoraRtcEngine 的 joinChannel 函数，如果成功则切换到 InRoom 界面：

1. function joinChannel(channel) {

2. if (channel.length > 0 && agoraRtcEngine.joinChannel("", channel, 0) === 0) {

3. channelName = channel

4. loader.setSource(Qt.resolvedUrl("InRoom.qml"))

5. }

6. }

本地流

进入 InRoom 界面后，需要进行本地流（一般是摄像头采集的图像）的渲染。在 InRoom.qml 的 onCompleted 中增加：

1. Component.onCompleted: {

2. inroom.views = [localVideo, remoteVideo1, remoteVideo2, remoteVideo3, remoteVideo4]

3. 
   

4. channelName.text = main.channelName

5. agoraRtcEngine.setupLocalVideo(localVideo.videoWidget)

6. }

在 AgoraRtcEngine 中，将本地流渲染 Widget 设置为描绘的画布：

1. int AgoraRtcEngine::setupLocalVideo(QQuickItem *view) {

2. agora::rtc::view_t v =

3. reinterpret_cast<agora::rtc::view_t>(static_cast<AVideoWidget *>(view));

4. 
   

5. VideoCanvas canvas(v, RENDER_MODE_HIDDEN, 0);

6. return m_rtcEngine->setupLocalVideo(canvas);

7. }

远端流

当收到 onUserJoined 和 onUserOffline 的事件时， AgoraRtcEngine 会将该事件抛出：

1. virtual void onUserJoined(uid_t uid, int elapsed) override {

2. emit m_engine.userJoined(uid, elapsed);

3. }

此时，在 InRoom 界面中，捕获该事件，并进行处理：

1. Connections {

2. target: agoraRtcEngine

3. 
   

4. onUserJoined: {

5. inroom.handleUserJoined(uid)

6. }

7. onUserOffline: {

8. var view = inroom.findRemoteView(uid)

9. if (view)

10. inroom.unbindView(uid, view)

11. }

12. }

13. 
    

14. function findRemoteView(uid) {

15. for (var i in inroom.views) {

16. var v = inroom.views[i]

17. if (v.uid === uid && v !== localVideo)

18. return v

19. }

20. }

21. 
    

22. function bindView(uid, view) {

23. if (view.uid !== 0)

24. return false

25. view.uid = uid

26. view.showVideo = true

27. view.visible = true

28. return true

29. }

30. 
    

31. function unbindView(uid, view) {

32. if (uid !== view.uid)

33. return false

34. view.showVideo = false

35. view.visible = false

36. view.uid = 0

37. return true

38. }

39. 
    

40. function handleUserJoined(uid) {

41. //check if the user is already binded

42. var view = inroom.findRemoteView(uid)

43. 
    

44. if (view !== undefined)

45. return

46. 
    

47. //find a free view to bind

48. view = inroom.findRemoteView(0)

49. 
    

50. if (view && agoraRtcEngine.setupRemoteVideo(uid, view.videoWidget) === 0) {

51. inroom.bindView(uid, view)

52. }

53. }

我们在 UI 中设计最多只能显示 4 个远端流，所以超过 4 个时，就不再进行 bindView 处理。

在 AgoraRtcEngine 中，将远端流渲染 Widget 设置为描绘的画布：

1. int AgoraRtcEngine::setupRemoteVideo(unsigned int uid, QQuickItem* view) {

2. agora::rtc::view_t v =

3. reinterpret_cast<agora::rtc::view_t>(static_cast<AVideoWidget *>(view));

4. VideoCanvas canvas(v, RENDER_MODE_HIDDEN, uid);

5. return m_rtcEngine->setupRemoteVideo(canvas);

6. }

至此，基本的核心业务逻辑完成，通话效果如下：

八、总结

Qt 作为一个很成熟的图形界面库，使用起来非常简单，并且具备大量的文档和解决方案，个人认为是桌面下开发图形界面库首选的方案之一。这个 Demo 的开发，希望可以帮到那些，想要为自己的应用增加了音视频通话功能的场景的同学。

Github：https://github.com/AgoraIO/Agora-with-QT