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 交互流程。

640?wx_fmt=png

有 2 个主要 UI 界面:

  • JoinRoom:登录频道界面;

  • InRoom:视频通话界面;

以及 3 个辅助 UI 界面:

  • Splash:欢迎界面;

  • VideoSetting:视频参数设置界面;

  • DeviceSetting:设备设置界面;

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

三、创建 Qt 项目

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

1. 选择 Qt Quick Application - Empty; 

640?wx_fmt=png


2. 输入项目名称 AgoraVideoCall,并选择项目路径; 

640?wx_fmt=png


3. 选择 qmake 编译; 

640?wx_fmt=png


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

640?wx_fmt=png


5. 选择本地 Qt 版本,这里使用 5.12.0; 

640?wx_fmt=png


6. 选择版本控制系统; 

640?wx_fmt=png


四、导入资源

导入 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 中导入,例如:

640?wx_fmt=png

导入 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 模板; 

640?wx_fmt=png


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

640?wx_fmt=png

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

640?wx_fmt=png


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. function joinRoom() {

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

  8. }

这样就完成了一个基本的 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. m_contentView = new QQuickWidget(this);

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

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

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


  7. QVBoxLayout *layout = new QVBoxLayout;

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

  9. layout->setSpacing(0);

  10. layout->addWidget(m_contentView);


  11. 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. virtual int initialize() override {

  5. return 0;

  6. }


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

  8. int rotation, bool mirrored) override {

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

  10. if (m_view)

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

  12. return -1;

  13. }

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


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

  2. if (videoFrame.IsZeroSize())

  3. return -1;


  4. int r = prepare();

  5. if (r) return r;


  6. QOpenGLFunctions *f = renderer();

  7. f->glClear(GL_COLOR_BUFFER_BIT);


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

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

  10. setupTextures(videoFrame);

  11. m_resetGlVert = true;

  12. }


  13. if (m_resetGlVert) {

  14. if (!ajustVertices())

  15. m_resetGlVert = false;

  16. }


  17. updateTextures(videoFrame);


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

  19. return 0;

  20. }

具体描绘部分,在 updateTextures 中实现如下:


 
  1. void VideoRendererOpenGL::updateTextures(

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

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

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


  5. QOpenGLFunctions *f = renderer();

  6. f->glActiveTexture(GL_TEXTURE0);

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

  8. glTexSubImage2D(width, height,

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

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


  11. f->glActiveTexture(GL_TEXTURE1);

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

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

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

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


  16. f->glActiveTexture(GL_TEXTURE2);

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

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

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

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

  21. }

这样就可以将 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. virtual void onVideoStopped() override {

  6. emit m_engine.videoStopped();

  7. }


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

  9. int elapsed) override {

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

  11. }


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

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

  14. }


  15. virtual void onUserOffline(uid_t uid,

  16. USER_OFFLINE_REASON_TYPE reason) override {

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

  18. }


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

  20. int elapsed) override {

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

  22. }


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

  24. int elapsed) override {

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

  26. }


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

  28. int elapsed) override {

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

  30. }


  31. private:

  32. AgoraRtcEngine &m_engine;

  33. };

这里我们将事件从 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. // Specify your APP ID here

  7. context.appId = "";


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

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

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

  11. }


  12. m_rtcEngine->initialize(context);

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

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

  15. if (mediaEngine) {

  16. mediaEngine->registerVideoRenderFactory(this);

  17. }

  18. m_rtcEngine->enableVideo();

  19. }

注意: 有关如何获取 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. 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 中,调用 AgoraRtcEnginejoinChannel 函数,如果成功则切换到 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. channelName.text = main.channelName

  4. agoraRtcEngine.setupLocalVideo(localVideo.videoWidget)

  5. }

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. VideoCanvas canvas(v, RENDER_MODE_HIDDEN, 0);

  5. return m_rtcEngine->setupLocalVideo(canvas);

  6. }

远端流

当收到 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. onUserJoined: {

  4. inroom.handleUserJoined(uid)

  5. }

  6. onUserOffline: {

  7. var view = inroom.findRemoteView(uid)

  8. if (view)

  9. inroom.unbindView(uid, view)

  10. }

  11. }


  12. function findRemoteView(uid) {

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

  14. var v = inroom.views[i]

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

  16. return v

  17. }

  18. }


  19. function bindView(uid, view) {

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

  21. return false

  22. view.uid = uid

  23. view.showVideo = true

  24. view.visible = true

  25. return true

  26. }


  27. function unbindView(uid, view) {

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

  29. return false

  30. view.showVideo = false

  31. view.visible = false

  32. view.uid = 0

  33. return true

  34. }


  35. function handleUserJoined(uid) {

  36. //check if the user is already binded

  37. var view = inroom.findRemoteView(uid)


  38. if (view !== undefined)

  39. return


  40. //find a free view to bind

  41. view = inroom.findRemoteView(0)


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

  43. inroom.bindView(uid, view)

  44. }

  45. }

我们在 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. }

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

640?wx_fmt=png

八、总结

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

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

640?wx_fmt=gif


参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值