C++ Qt实现腾讯会议界面

  新版的腾讯会议界面使用了Qt来开发,记得当时是去年晚上9点多吧,接到腾讯的电话面试,我正在打王者,结果没注意,卒。
  最近我个人用业余时间写了一个,大概90%的相似度。下面开始分享如果来实现。

登录界面

在这里插入图片描述
  这个界面除了标题栏,其它的应该是web html写的,我看手机端和PC端的登录界面一样,用html写,放到服务端,然后各个客户端去请求,这样可以减少一些不必要的bug。当然用Qt做可以,下面是我的实现:
在这里插入图片描述
颜色和布局有改动,如果真要做,这一部分肯定是用web页面。

会议预定

在这里插入图片描述
  这个除了标题栏,下面的部分也是web页面,各个端直接加载,如果是Qt,则可以使用CEF或者QWebEngineView实现。

会议场景界面

在这里插入图片描述
  这个不是web页面,这个得各个端自己来实现,比如PC端,由于窗口大,可以加很多控件,下面是我的实现:
在这里插入图片描述
  按钮右边的菜单箭头我没有实现,因为要自定义好多个控件,我在高仿QQ影音时,已经实现这个控件,由于时间关系,在高仿腾讯会议项目里没有做控制栏的控件定义。另外我把网速变化,最大化,会议时长移到了标题栏。

实现步骤

1 无边框窗口,模块布局,整体是竖直布局,添加标题栏,然后标题栏下面是个水平布局,添加各个子模块界面;
2 自适应布局,最大化,还原,涉及到控件较多,要管理好;
3 拖动标题栏时,当聊天窗口也出现在右侧时,可能出现界面遮挡现象,那么得指定好主界面的最小size;
4 各个控件的样式,自定义控件,qss, 堆代码,等等

实现难点:

1 无边框窗口,自定义标题栏,窗口拉伸,这些应该好说,常规操作即可;
2 控制栏的各个控件,看着像是按钮弹出箭头菜单,其实实现得自定义widget button, 就像我在高仿QQ影音里做的那样,用两个按钮拼成一个按钮,然后贴图标,写菜单事件;
3 聊天窗口,这个对于腾讯来说应该没难度,就像微信有web版,那么聊天窗口直接用web页面即可,如果用C++ Qt label之类来写,有点扯犊子,要实现消息的上下滚动,以及表情包动态图,网页链接,以及各种乱七八糟的协议解析,用QWebEngineView直接加载成熟的IM组件即可;
4 大视图窗口与小视图窗口的布局,这个可能很复杂,因为随着入会人员的增多,可以进行各种花里胡哨的布局,例如九宫格,十二宫格等,还有大小视图的切换,也就是需要熟练的管理好所有Widget
5 左侧的气泡消息,这个消息label得隔几秒就消失,实现起来有一定的难度;

设置界面

在这里插入图片描述
  这个工作量就有点大了,控件太多,要不少时间,QListWidget加QStackedWidget就可以实现,一个人得花不少时间。
  另外腾讯会议的设置界面有个bug,在点击控制栏的设置时,弹出设置界面,此时任务栏应该只能有一个窗口缩略图,不知是腾讯会议的产品经理要求两个缩略图,还是开发写界面时没有指定父窗口,导致这个问题。

共享屏幕

在这里插入图片描述
  这里可能需要枚举窗口,在windows端会涉及到gdi窗口与dxgi窗口的采集,如果只用BitBlt EnumWindows这种方式,部分窗口取到的图是黑色,因为微软在win8之后修改了窗口实现方式,得采用桌面复制技术来截图获取buffer, BitBlt已经不适用了,关于这部分可以看我的OBS源码解析专栏。

音视频互动、IM消息的实现

  关于音视频通信的具体实现可以参考声网的SDK,每月免费10000分钟。

代码

我的代码也就写了大概30%的功能,cpp文件如下:
在这里插入图片描述
  如果全部做出来,估计得再增加5-8倍的cpp文件吧,各种窗口交互connect signal, 与后端交互,数据埋点,等功能;如果要跨平台,那代码量又增加不少,毕竟Qt同时做Mac、UOS、windows等,应该问题不大,但是各端可能还有不少差异。
  用Qt实现的PC客户端软件有不少,这两年UOS也在慢慢的崛起,中国的小微软,很多的客户端应用也慢慢移植到UOS了,腾讯会议采用Qt来开发界面也是不错的选择。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>