30

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

 3 years ago
source link: https://blog.csdn.net/yao_hou/article/details/122755272
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

  新版的腾讯会议界面使用了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来开发界面也是不错的选择。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK