在线教育 PC Demo 源码导读

工程概述

在线教育 Demo 是网易云通信的一款针对目前市场比较热门的在线教育场景推出的解决方案。在方案中结合了网易云通信 IM 能力的聊天室模型和网易云通信的音视频能力的多人会议模型。在使用本解决方案之前请务必了解 IM即时通讯 的聊天室能力,和 音视频通话 的多人会议能力。 Demo使用Visual Studio 2013 Update5开发(必须使用Update5版本)。

Demo源码中目录结构中的C++封装层文件夹名字尾部携带_vs2010的为vs2010创建的工程项目,对应的不携带_vs2010的为vs2013创建的工程项目,即Demo目前加载的工程,该工程依赖Demo工程。

Demo的主要功能由Demo工程本身以及UI组件工程共同完成,Demo工程和UI组件工程具有相同的目录结构。UI组件位于tool_kits\ui_component\ui_kit目录,UI组件的相关文档详见:云信UI组件

Demo源码版本历史

Demo源码版本历史

界面开发资料

网易云信Duilib使用说明

代码托管地址

网易云信Duilib使用说明

控件属性

控件属性

界面布局介绍

网易云信 DuiLib 布局功能指南

会话多窗口实现介绍

从3.0.0版本开始,Demo对会话窗口的实现进行了升级,方便开发者快速开发类似QQ,微信等多窗口模式。

会话窗口多窗口合并及分开功能及升级说明

CEF开发指南

从3.4.0版本开始,Demo增加了Cef控件,方便开发者开发Web相关的功能模块。

CEF开发指南

Duillib高分屏(高DPI)支持

从3.5.0版本开始,Duilib增加了对高分屏的支持,方便在用户设置了DPI后保持软件界面的清晰效果。

Duillib高分屏(高DPI)支持

目录结构

打包说明

开发者在打包自己的应用时,应确保将以下云信SDK相关文件打包进去。

其他的文件及目录是应用程序相关的,开发者根据自己程序的使用情况选择是否打包。

功能点指引

SDK C++封装层

因为SDK所有接口都是C接口,为了方便使用C++的同学使用,我们提供了nim_cpp_sdknim_chatroom_cpp_sdk静态库。静态库位于libs\nim_sdk_desktop\nim_cpp_sdklibs\nim_sdk_desktop\nim_chatroom_cpp_sdk目录,它将C接口SDK封装为C++代码,demo和UI组件都直接使用nim_cpp_sdknim_chatroom_cpp_sdk静态库的C++封装层代码。开发者可以直接在解决方案中导入nim_cpp_sdk工程和nim_chatroom_cpp_sdk工程。

封装层提供的包装文件如下:

除了nim_cpp_sdk静态库,另外还提供了负责语音和http传输的dll的C++封装类:

SDK 初始化

SDK的初始化在main.cpp中InitNim方法进行。

示例:

//sdk能力参数(必填)
//string(db key必填,目前只支持最多32个字符的加密密钥!建议使用32个字符)
config.database_encrypt_key_ = "Netease"; 

std::string app_key = GetConfigValueAppKey();
// 载入云信sdk,初始化安装目录和用户目录
bool ret = nim::Client::Init(app_key, "NIM_LIVE", "", config); 
assert(ret);
//聊天室初始化
ret = nim_chatroom::ChatRoom::Init("","");
assert(ret);

nim_ui::InitManager::GetInstance()->InitUiKit();
nim_chatroom::ChatroomCallback::InitChatroomCallback();

界面开发

云信PC demo以及UI组件的界面开发都依赖云信DuiLib库,关于云信DuiLib库的使用方法和注意事项,请参考:云信Duilib

登录

登录相关界面代码在gui/login目录下,登录相关的控制逻辑已经封装到了UI组件的,逻辑代码在callback\login\login_callback.cpp文件中。登录界面可以直接调用UI组件的登录函数,示例如下:

std::string username = "123456789"std::string password = "123456789";
nim_ui::LoginManager::GetInstance()->DoLogin(username, password);

总体逻辑

登陆后由用户选择创建房间,或者加入房间。整体在线教育房间以聊天室为主体,在加入聊天室后,分别加入多人音视频和多人白板。然后由聊天室自定义消息和点对点自定义消息,实现用户之前的协议交互,达到连麦,切换文档等交互操作。

创建房间

Demo入口在MeetingFrontpage::CreateMyRoomInfo中发起,先通过http协议创建聊天室房间,然后创建多人会议房间。

加入房间

主持人及成员互动

多人白板Demo协议

下面是白板通道传输的数据格式。

###与点对点白板的区别:

  1. 新增rgb颜色信息
  2. 不再限制每个命令value的个数(之前限制两个)
  3. 清空命令只能由主播发,发广播包
  4. 清空响应由参与白板绘制的人发,发广播包
  5. 新增 同步请求同步命令,用于非主播加入房间以后,主播向他同步当前的白板的笔画信息

###协议描述

####包

调用SDK发送或者从SDK接收到的一条RTS数据,是一个字符串,由一条或多条命令组成,命令之间用封号隔开

    命令1;命令2;命令3;

####命令

多人白板Demo的原子协议,每个命令必须遵守以下格式:

    type:value,value,value,…

每一个type对应明确数量的valuevalue之间用逗号隔开

####type

命令的类型,整数

typevalue

类型 type value,value,value,…
起始点 1 x,y,rgb
移动点 2 x,y,rgb
结束点 3 x,y,rgb
上一步 4
包序号 5 id
清空 6
清空响应 7
同步请求 8
同步 9 uid,end
同步准备 10
同步准备响应 11
标记 12 x,y,rgb
标记结束 13
同步文档 14 id(文档id),page_num(当前页数,1开始计算),page_count(总页数),type(状态通知:0,翻页操作:1)

####说明

x y: 浮点型的相对坐标,值为相对于画板的长宽,例如下图的白板示意中 x 点的坐标为 x= 2/6 = 0.3333 y = 3/4 = 0.75

o o o o o o
o o o o o o
o x o o o o
o o o o o o

rgb:整型的颜色值,例如一个颜色的RGB是 0xF3F6F9,rgb=15988473

上图的坐标点如果是一个移动点,那这这个点的命令为:

    2:0.3333,0.75,15988473

包序号:可选,主要用来调试是否有丢包

清空:只能主播发,发广播包;主播清空所有笔画,同时发该命令,非主播收到该命令后,清空所有笔画;

清空响应:参与者收到清空命令后发清空响应广播包;其他人收到该响应后,清空该参与者的笔画。该步骤用来避免清空过程中同时有人在画图可能会导致的数据不一致

同步请求: 非主播加入多人实时会话成功以后,发送该命令给主播

同步准备: 主播B多人白板登录成功(包含断网重新登录成功)后,发送该指令给所有其他人,然后再发同步。其他人收到该消息后清空本地所有数据

同步准备响应: 非主播收到同步准备后,回该消息给主播。该消息用于适配服务端录制回放功能,主播收到以后无需处理

同步:1. 主播B收到A同步请求后,主播B把所有的用户ABCD的笔画的数据单播发送给用户A,每个用户的数据单独通过该协议发送;2.主播B发出同步准备后,同步所有用户的数据给所有人

end=1表示该用户的数据发完了,例如C的数据可以一次发完:

    8:uid_C,1;1:x,y,rgb;2:x,y,rgb;…;3:x,y,rgb;

end=0表示没发完,后面还有数据。例如C的数据量太大,超过SDK接口的发送限制,可以分多条发送,比如分3个发送:

包1,end=0

    8:uid_C,0;1:x,y,rgb;2:x,y,rgb;…;3:x,y,rgb;

包2,end=0

    8:uid_C,0;1:x,y,rgb;2:x,y,rgb;…;3:x,y,rgb;

包3,end=1

    8:uid_C,1;1:x,y,rgb;2:x,y,rgb;…;3:x,y,rgb;

A在收完C所有的数据以后,清空C当前的数据,用同步的数据代替之。

标记: 主播发送标记消息,非主播收到后在界面显示标记图标,标记图标没有轨迹

标记结束: 主播发送标记结束后,非主播清除界面之前显示的标记