现在主流的视频会议软件都有屏幕标注功能,屏幕标注功能给屏幕分享者讲解分享内容时提供了极大的方便。那我们以傲瑞视频会议(OrayMeeting)为例,来讲解屏幕标注是如何实现的。
傲瑞会议的PC端(Windows、信创Linux、银河麒麟、统信UOS)在分享自己的屏幕时,可在屏幕上进行标注、绘制功能。如下图,是傲瑞会议在银河麒麟V10SP1上演示的屏幕标注功能:
屏幕标注的工具有:自由曲线(涂鸦)、箭头、矩形、圆和椭圆、文本。并且可设置它们的颜色、线条粗细、字体大小。
那么,这样的屏幕标注功能是怎么实现的了?
细想一下,这个屏幕标注实际上就像是一个可以在上面绘制涂鸦的电子白板,只要将电子白板的背景设置为透明,然后,重新定义其工具栏就可以了。而我们的OMCS实时音视频框架内置了电子白板的功能,所以,可以直接使用OMCS来实现标注功能。
为了方便讲解其代码层面是如何实现的,我们在OMCS入门demo的白板功能(使用WhiteBoardConnector
)演示的窗口上,增加一个动态桌面连接器(DynamicDesktopConnector),并预定动态桌面连接器相关事件。
public WhiteBoardForm(string _ownerID)
{
InitializeComponent();
this.whiteBoardConnector1.WatchingOnly = false;
this.ownerID = _ownerID;
this.Text = string.Format("正在访问{0}的电子白板", this.ownerID);
// 需要在设计界面将电子白板连接器的背景改为透明(属性已修改)
this.whiteBoardConnector1.ConnectEnded += new CbGeneric<ConnectResult>(whiteBoardConnector1_ConnectEnded);
this.whiteBoardConnector1.BeginConnect(this.ownerID);
this.dynamicDesktopConnector1.ConnectEnded += new CbGeneric<ConnectResult>(DynamicDesktopConnector1_ConnectEnded); // 将动态桌面连接器控件设置在当前窗口
this.dynamicDesktopConnector1.SetViewer(this);
this.dynamicDesktopConnector1.BeginConnect(this.ownerID);
}
private void DynamicDesktopConnector1_ConnectEnded(ConnectResult obj)
{
if (this.InvokeRequired)
{
this.BeginInvoke(new CbGeneric<ConnectResult>(this.DynamicDesktopConnector1_ConnectEnded), obj);
}
else
{
if (obj != ConnectResult.Succeed)
{
MessageBox.Show("连接失败!" + obj.ToString());
}
}
}
在Demo的UI上点击开始“远程桌面(标绘)”按钮时,我们开始初始化电子白板连接器及动态桌面连接器,连接到目标会议室的房间ID。
这里有几点要注意一下:
(1)电子白板连接器控件的背景色 BackgroundColor 要设置成透明。
(2)必须要使用DynamicDesktopConnector组件,而不能使用DesktopConnector控件。
(3)DynamicDesktopConnector组件所使用的显示屏幕图像的Viewer必须是Form,而不能是Control,否则,电子白板连接器控件的背景透明就无法实现(可能是WinForm的限制)。
(4)所以,UI的整体结构层次是:底层是Form(DynamicDesktopConnector使用该Form的表面来绘制屏幕图像),上层是WhiteBoardConnector控件,背景透明,用于实现标注。
上面的这个Demo已经比较具体的说明了屏幕标注功能的代码实现,傲瑞视频会议的屏幕标绘功能也正是基于同样的思路实现的,只不过其不仅仅支持Windows,同时也适配了信创操作系统,包括银河麒麟、统信UOS等。